/*
Theme Name: Catherine Daley Design
Theme URI: https://github.com/zacharyfleck
Author: Zachary Fleck
Author URI: https://github.com/zacharyfleck
Description: A custom block (Full Site Editing) theme for Catherine Daley Design — a portfolio gallery for a graphic designer. Warm, minimal, and mobile friendly.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: catherine-daley-design
Tags: portfolio, block-patterns, full-site-editing, custom-colors, custom-logo, one-column, two-columns, featured-images
*/

/*
 * Most styling for this theme lives in theme.json (colors, fonts, layout,
 * spacing, buttons, links). This stylesheet only holds the interactive and
 * plugin-specific rules that theme.json cannot express:
 *   1. The portfolio grid hover overlay
 *   2. Contact Form 7 form styling
 *   3. A couple of header/footer responsive niceties
 */

/* ------------------------------------------------------------------ *
 * 0. Sticky footer
 *    Keep the footer pinned to the bottom of the viewport on short pages
 *    (e.g. 404, thin pages). WordPress wraps all template blocks in
 *    .wp-site-blocks; make it a full-height flex column and let <main> grow.
 * ------------------------------------------------------------------ */

.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
	margin-block-start: 0;
}

.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ------------------------------------------------------------------ *
 * 1. Portfolio grid (Query Loop with the "portfolio-grid" class)
 *    Featured image fills each cell; the title fades in over a dimmed
 *    image on hover/focus.
 * ------------------------------------------------------------------ */

.portfolio-grid .wp-block-post-template {
	list-style: none;
	padding: 0;
	margin: 0;
}

.portfolio-grid li.wp-block-post {
	position: relative;
	overflow: hidden;
	margin: 0;
	aspect-ratio: 16 / 9;
	background: none;
}

.portfolio-grid .wp-block-post-featured-image {
	width: 100%;
	height: 100%;
	margin: 0;
}

.portfolio-grid .wp-block-post-featured-image a,
.portfolio-grid .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.portfolio-grid .wp-block-post-featured-image img {
	object-fit: cover;
	transition: filter 0.3s ease;
}

.portfolio-grid li.wp-block-post::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.25);
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.portfolio-grid .wp-block-post-title {
	position: absolute;
	inset: 0;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	text-align: center;
	font-size: 1.5rem;
	font-weight: 700;
	color: #fff;
	text-shadow: 0 0 8px rgba(0, 0, 0, 0.8);
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
	pointer-events: none;
}

.portfolio-grid .wp-block-post-title a {
	color: #fff;
	text-decoration: none;
}

.portfolio-grid li.wp-block-post:hover .wp-block-post-featured-image img,
.portfolio-grid li.wp-block-post:focus-within .wp-block-post-featured-image img {
	filter: brightness(0.55);
}

.portfolio-grid li.wp-block-post:hover::before,
.portfolio-grid li.wp-block-post:focus-within::before {
	opacity: 1;
}

.portfolio-grid li.wp-block-post:hover .wp-block-post-title,
.portfolio-grid li.wp-block-post:focus-within .wp-block-post-title {
	opacity: 1;
	transform: translateY(0);
}

/* ------------------------------------------------------------------ *
 * 1b. Post content images & galleries
 *     Each artwork post is a gallery of images. Full-bleed (100% of the
 *     content column) looks great on mobile, but on desktop the images
 *     get uncomfortably large. On wider screens we cap each image's
 *     width AND height. Only *max* constraints are used (width/height
 *     stay auto), so the browser preserves the intrinsic aspect ratio —
 *     images scale down to fit, never stretch or squish.
 *
 *     Breakpoint matches the header/nav 600px breakpoint used elsewhere.
 * ------------------------------------------------------------------ */

@media (min-width: 600px) {
	/*
	 * The leading .content .wp-block-gallery.is-cropped selector is
	 * deliberately more specific than core's
	 * ".wp-block-gallery.is-cropped .wp-block-image img" rule, which
	 * otherwise forces width:100% / height:100% / object-fit:cover and
	 * crops the image. With width and height back to auto, the img has no
	 * fixed box, so it simply scales down within the max constraints while
	 * keeping its intrinsic aspect ratio (object-fit becomes irrelevant).
	 */
	.content .wp-block-gallery.is-cropped .wp-block-image img,
	.content .wp-block-gallery .wp-block-image img,
	.content .wp-block-image img {
		max-width: 75%;
		/* !important defeats core's cropped-gallery rule
		   (width:100%; height:100%; object-fit:cover) no matter the load
		   order. With no fixed width/height, the img has no box to crop
		   against — it just scales down and keeps its aspect ratio. */
		width: auto !important;
		height: auto !important;
		object-fit: contain !important;
		margin-inline: auto;
	}

	/*
	 * The figures (both the outer gallery and each inner image figure) may
	 * carry a fixed height / flex-fill in cropped mode. Let them size to
	 * their now-capped images instead, centered, with no distortion.
	 */
	.content .wp-block-gallery .wp-block-image {
		flex-grow: 0;
		align-self: center;
		height: auto !important;
	}
}

/* ------------------------------------------------------------------ *
 * 2. Header & footer responsive niceties
 * ------------------------------------------------------------------ */

/* --- Header: one menu, split around a centered logo on desktop --- */

.site-header .wp-block-image {
	margin: 0;
}

.site-header .in-nav-logo img,
.site-header .mobile-logo img {
	height: auto;
}

/* The logo sits between the two halves of the menu; give it breathing room. */
.site-header .in-nav-logo {
	margin: 0 1.5rem;
}

/* Desktop: show the in-nav (split) logo, hide the mobile-only logo. */
.site-header .mobile-logo {
	display: none;
}

/*
 * Mobile: the Navigation block collapses to a hamburger at 600px, so match
 * that breakpoint. Show the standalone logo on the left, hamburger on the
 * right, and hide the in-nav logo so the overlay lists only the links.
 */
@media (max-width: 599px) {
	.site-header {
		justify-content: space-between;
	}

	.site-header .in-nav-logo {
		display: none;
	}

	.site-header .mobile-logo {
		display: block;
		order: -1;
	}

	.site-header .mobile-logo img {
		max-width: 200px;
	}
}

/*
 * --- 3-line, right-aligned hamburger icon (replaces the 2-line default) ---
 * WordPress's navigation stylesheet loads after this file, so these overrides
 * are scoped under .site-header to win on specificity. The show/hide
 * breakpoints match core's 600px overlay breakpoint.
 */
@media (max-width: 599px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 40px;
		height: 30px;
		padding: 0;
		background: transparent;
	}
}

@media (min-width: 600px) {
	.site-header .wp-block-navigation__responsive-container-open {
		display: none;
	}
}

.site-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

.site-header .wp-block-navigation__responsive-container-open::before {
	content: "";
	display: block;
	width: 28px;
	height: 18px;
	background:
		linear-gradient(#3f3a36, #3f3a36) right top / 28px 2px no-repeat,
		linear-gradient(#3f3a36, #3f3a36) right center / 28px 2px no-repeat,
		linear-gradient(#3f3a36, #3f3a36) right bottom / 28px 2px no-repeat;
}

/* Footer links inherit the footer's (white) text color. */
.site-footer a,
.site-footer .wp-block-social-link a {
	color: inherit;
}

/* Each footer column centers its own contents. */
.site-footer .footer-col {
	align-items: center;
}

/* On small screens the two footer columns stack into one centered column. */
@media (max-width: 768px) {
	.site-footer .footer-row {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
	}
}

/* ------------------------------------------------------------------ *
 * 3. Contact Form 7 styling (only applies when the plugin is active)
 * ------------------------------------------------------------------ */

.wpcf7-form {
	display: grid;
	gap: 1rem;
	padding: 1.5rem;
}

.wpcf7-form p {
	margin: 0;
	display: grid;
	gap: 0.5rem;
	justify-content: center;
}

.wpcf7-form label {
	font-size: 0.95rem;
	font-weight: 600;
	color: #333;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100%;
	max-width: 36rem;
	margin: 0 auto;
	border: 1px solid #ccc;
	border-radius: 0.5rem;
	padding: 0.65rem 0.75rem;
	font-size: 1rem;
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form textarea:focus,
.wpcf7-form select:focus {
	outline: none;
	border-color: #ddb7ac;
	box-shadow: 0 0 0 0.15rem rgba(221, 183, 172, 0.25);
	transform: translateY(-1px);
}

.wpcf7-form input[type="submit"],
.wpcf7-form button {
	appearance: none;
	border: none;
	background: #697C70;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	padding: 0.85rem 1.75rem;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 8px 20px rgba(21, 53, 90, 0.25);
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button:hover {
	background: #be8764;
	transform: translateY(-1px);
	box-shadow: 0 11px 28px rgba(21, 53, 90, 0.33);
}

.wpcf7-form .wpcf7-response-output {
	margin-top: 0.75rem;
	padding: 0.8rem 1rem;
	border: 1px solid #c2c2c2;
	border-radius: 0.5rem;
	background: #f8f8f8;
	color: #2f2f2f;
	font-weight: 600;
	text-align: center;
}

@media (max-width: 480px) {
	.wpcf7-form input[type="text"],
	.wpcf7-form input[type="email"],
	.wpcf7-form input[type="tel"],
	.wpcf7-form textarea,
	.wpcf7-form select {
		max-width: 100%;
	}
}