/*
Theme Name: Roker Photography
Theme URI: https://www.rokerphotography.com/
Author: Roker Photography
Description: Custom editorial photography theme built to match the original Pixieset design. Full-bleed masonry galleries, minimal monochrome layout, standard WordPress templating (no page builder required).
Version: 1.12
Requires PHP: 7.4
Text Domain: roker-photography
*/

/* -------------------------------------------------- */
/* 1. Reset & base                                     */
/* -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	background: #eef1f3;
	color: #111111;
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

ul { list-style: none; margin: 0; padding: 0; }

h1, h2, h3, h4 {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-weight: 400;
	margin: 0 0 0.6em;
}

p { margin: 0 0 1.2em; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
}

/* -------------------------------------------------- */
/* 2. Layout helpers                                   */
/* -------------------------------------------------- */

.wrap {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 32px;
}

.narrow {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
}

/* Force Contact page content to actually fill the .narrow container.
   WordPress can wrap paragraphs/the form shortcode in a Group or
   Columns block that defaults to a centered flex layout shrinking to
   fit its content — same underlying issue as the grid-width bug
   fixed earlier, just showing up in a different spot. */
.narrow, .narrow * {
	max-width: 100% !important;
}

.narrow .wp-block-group {
	display: block !important;
	width: 100% !important;
	justify-content: normal !important;
}

/* Columns blocks need to KEEP their flex/grid display — that's what
   lays their columns out side-by-side. Only fix the width/centering
   issue (the same shrink-to-fit problem Group blocks had), without
   touching display, or columns stack vertically instead. */
.narrow .wp-block-columns {
	width: 100% !important;
	max-width: 100% !important;
	justify-content: flex-start !important;
}

.narrow .wp-block-columns > .wp-block-column {
	min-width: 0;
}

/* -------------------------------------------------- */
/* 3. Site header / nav                                */
/* -------------------------------------------------- */

.site-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 41px 40px;
}

.site-title {
	font-family: "Poppins", sans-serif;
	font-size: 18px;
	font-weight: 300;
	margin: 0;
	color: var(--nav-color, #111111);
}

.site-title a {
	display: inline-block;
	color: var(--nav-color, #111111);
}

.custom-logo { max-height: 44px; width: auto; }

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 40px;
}

.primary-nav a {
	font-size: 19px;
	font-weight: 300;
	padding-bottom: 2px;
	color: var(--nav-color, #111111);
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.primary-nav a:hover,
.primary-nav .current-menu-item a {
	border-bottom-color: var(--nav-color, #111111);
}

/* Mobile hamburger toggle — hidden on desktop, shown below 700px
   (see media query further down) in place of the horizontal nav. */
.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--nav-color, #111111);
}

.menu-toggle .bar,
.menu-toggle .bar::before,
.menu-toggle .bar::after {
	display: block;
	width: 22px;
	height: 2px;
	background: currentColor;
}

.menu-toggle .bar {
	position: relative;
}

.menu-toggle .bar::before,
.menu-toggle .bar::after {
	content: "";
	position: absolute;
	left: 0;
}

.menu-toggle .bar::before { top: -7px; }
.menu-toggle .bar::after { top: 7px; }

/* Full-screen mobile nav overlay — always a plain white background
   with black text, regardless of which header colour is active on
   the page it was opened from. */
.mobile-nav-overlay {
	position: fixed;
	inset: 0;
	background: #ffffff;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.25s ease, visibility 0.25s ease;
}

.mobile-nav-overlay.is-open {
	opacity: 1;
	visibility: visible;
}

.mobile-nav-overlay .mobile-nav-close {
	position: absolute;
	top: 26px;
	right: 26px;
	background: none;
	border: none;
	cursor: pointer;
	color: #111111;
	padding: 6px;
	line-height: 0;
}

.mobile-nav-overlay nav ul {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 34px;
}

.mobile-nav-overlay nav a {
	color: #111111;
	font-size: 26px;
	font-weight: 400;
}

body.roker-nav-open {
	overflow: hidden;
}

/* Hero header — a page's Featured Image displayed full-width, with
   the logo/nav overlaid directly on top in plain black text (no
   background or gradient), matching the original site exactly. */

.site-hero {
	position: relative;
}

.site-hero-img {
	width: 100%;
	aspect-ratio: 1.56 / 1;
	object-fit: cover;
	display: block;
}

.site-hero .hero-header {
	position: absolute;
	top: 0; left: 0; right: 0;
	background: none;
}

@media (max-width: 700px) {
	.site-header, .site-hero .hero-header {
		padding: 37px 24px;
	}
	.primary-nav { display: none; }
	.menu-toggle { display: inline-flex; }
}

/* Consistent 20px buffer between the header/hero and whatever content
   follows it — applies site-wide (grid, About, Contact, everything),
   since every template's content sits inside .site-main. */
.site-main {
	margin-top: 20px;
}

/* -------------------------------------------------- */
/* 4. Photo grid                                        */
/* -------------------------------------------------- */

.tpl-photo-grid,
.photo-grid {
	width: 100%;
	max-width: none;
	margin: 0;
}

/* Blanket fix: strip any max-width WordPress injects anywhere inside
   the grid (regardless of which class or inline style it uses — this
   covers every WP version/mechanism at once, rather than guessing at
   a specific class name). Each element still only fills its own
   parent, so this can't overflow the page — it just removes narrow
   caps at every level so the grid actually reaches full width. */
.photo-grid,
.photo-grid * {
	max-width: 100% !important;
	box-sizing: border-box;
}

/* If the Gallery got wrapped in a Group block (this can happen
   depending on how it was inserted/pasted), that Group block
   defaults to a centered flex layout that shrinks to fit its
   content — which is what makes the whole gallery float as a small
   block in the middle of the page instead of filling it. Force it
   back to plain full-width block layout. */
.photo-grid .wp-block-group {
	display: block !important;
	width: 100% !important;
	justify-content: normal !important;
}

.photo-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	padding: 20px;
}

/* Catch-all: neutralise WordPress's own default block-width
   constraint (the core ".wp-block" class caps blocks at ~610px
   unless "wide"/"full" alignment is set, and different WP versions
   name the gallery wrapper slightly differently). Anything sitting
   directly inside the grid container is forced to full width. */
.tpl-photo-grid > *,
.photo-grid > *,
.photo-grid .wp-block,
.photo-grid .wp-block-gallery {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* The critical fix: CSS Grid only divides DIRECT children into
   columns. Any non-image block sitting directly in .photo-grid — a
   Gallery/Group wrapper, or ordinary content like a paragraph,
   heading, or Columns block added above the images — would otherwise
   get squeezed into just ONE of the 3 outer columns, e.g. landing in
   the left third of the page instead of spanning full width. Only an
   actual standalone image should occupy a single cell (that's how
   the 3-per-row layout works for individually-placed Image blocks);
   everything else spans every column.

   Excluding by the .wp-block-image CLASS, not the <figure> tag: a
   standalone image is <figure class="wp-block-image">, but core's
   Gallery block wrapper is ALSO a bare <figure> (class
   "wp-block-gallery") — excluding by tag would wrongly exclude the
   real gallery too, collapsing it into a single column exactly like
   the bug this rule exists to fix. */
.photo-grid > *:not(.wp-block-image) {
	grid-column: 1 / -1;
}

/* Every figure/image directly inside the grid — whether it came from
   a Gallery block or individual Image blocks — must fill its grid
   cell. These overrides are deliberately aggressive (!important +
   float:none) because WordPress can otherwise apply its own
   image-size width, alignment class (alignleft/aligncenter), or
   inline flex-basis, which is what causes images to render small
   and left-aligned instead of filling the grid. */
.photo-grid figure,
.photo-grid .wp-block-image,
.photo-grid .wp-block-gallery {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
}

.photo-grid img,
.photo-grid .alignleft img,
.photo-grid .alignright img,
.photo-grid .aligncenter img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 5 / 7 !important;
	object-fit: cover;
	display: block;
	float: none !important;
	margin: 0 !important;
}

.photo-grid figcaption { display: none; } /* Home / Latest grids are image-only, like the original */

/* WordPress's native lightbox prints its own small "expand" button
   in the top-right corner of every lightbox-enabled image
   (<button class="lightbox-trigger">), shown on hover via core's own
   CSS. The photo itself is already clickable and opens the same
   lightbox (core sets its own click handler directly on the <img>),
   so this button is a redundant affordance rather than the only way
   in — safe to hide without losing any functionality. */
.photo-grid .wp-lightbox-container button.lightbox-trigger {
	display: none !important;
}

/* WordPress's native "Expand on click" lightbox (core Image block,
   WP 6.4+) does NOT nest the enlarged image inside the figure/grid.
   Core prints the overlay markup once, sitewide, via the wp_footer
   action (see block_core_image_print_lightbox_overlay() in
   wp-includes/blocks/image.php) — so it sits as a sibling at the end
   of <body>, outside .photo-grid entirely. The bound image classes
   are copied from the original <img>, but never include .photo-grid
   itself (that class lives on the wrapping <div>, not the <img> or
   its <figure>). A selector scoped under .photo-grid can therefore
   never match this overlay, on any page. It has to be targeted
   unscoped, since it's a single global dialog shared by every
   lightbox-enabled image on the site.

   IMPORTANT CONTEXT (found by inspecting the live overlay's inline
   style, and cross-checking against WordPress core's real
   wp-includes/blocks/image/style.min.css):

   Core sizes the lightbox using its own CSS custom properties —
   --wp--lightbox-container-width/height on .lightbox-image-container,
   and --wp--lightbox-image-width/height on the img itself:
     .wp-lightbox-overlay .lightbox-image-container{
       width:var(--wp--lightbox-container-width);
       height:var(--wp--lightbox-container-height); overflow:hidden; }
     .wp-lightbox-overlay .wp-block-image img{
       width:var(--wp--lightbox-image-width);
       height:var(--wp--lightbox-image-height); }
   Those variables are computed by core's own JS from the image's
   real natural dimensions. On this site they're coming out as ~107×
   150px — the size of the clicked THUMBNAIL, not the photo — which
   happens when core can't read the image's real width/height
   server-side and falls back to the clicked element's own on-page
   size instead of zooming to a proper fullscreen target. That's a
   data/markup issue upstream of CSS, not something a stylesheet can
   truly fix — but we can force a sane display size regardless of
   what those variables end up containing, as a safety net.

   This also explains why the 1.8 rule never worked: its selector
   (.wp-lightbox-overlay img) is LESS specific than core's own
   (.wp-lightbox-overlay .wp-block-image img) above, so core's rule
   won on specificity even without !important — 1.8's width/height
   were silently never applied. Matching that exact selector and
   adding !important here is what actually wins the cascade. The
   container is overridden too, since it also inherits the same
   broken small size and clips its contents (overflow:hidden). */
.wp-lightbox-overlay .lightbox-image-container {
	width: 90vw !important;
	height: 90vh !important;
	overflow: visible !important;
}
.wp-lightbox-overlay .wp-block-image img {
	aspect-ratio: auto !important;
	object-fit: contain !important;
	width: auto !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: 100% !important;
}

@media (max-width: 1100px) {
	.photo-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.photo-grid { grid-template-columns: 1fr; }
}

/* If photos were added as a single core Gallery block, force it to
   lay out as the same grid rather than its own flex/columns layout.
   Scoped to .photo-grid only — this must NOT apply site-wide, or it
   fights with other galleries (like Featured Models on About). */
.photo-grid .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr) !important;
	gap: 20px !important;
	width: 100% !important;
	max-width: 100% !important;
}
@media (max-width: 1100px) {
	.photo-grid .wp-block-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 600px) {
	.photo-grid .wp-block-gallery { grid-template-columns: 1fr !important; }
}

/* -------------------------------------------------- */
/* 5. Page content (About / Contact)                    */
/* -------------------------------------------------- */

.page-content {
	padding: 20px 0 90px;
}

.page-content .intro-image {
	margin-bottom: 48px;
}

.page-content h2 {
	font-size: 30px;
	text-align: center;
}

.page-content h3.subheading {
	font-size: 13px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
	color: #666;
	margin-top: -10px;
}

.page-content .bio-text {
	max-width: 640px;
	margin: 0 auto 30px;
	text-align: center;
	font-size: 18px;
}

.page-content .cta-link {
	display: inline-block;
	margin: 10px auto 60px;
	text-align: center;
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	border-bottom: 1px solid #111;
}

.page-content .cta-wrap { text-align: center; }

/* Featured models — the gallery block on the About page. Targeted
   directly (rather than relying on JS to detect it) since About only
   ever has one gallery, so this is reliable regardless of whether a
   Group block ends up wrapping it. */

.tpl-about .wp-block-group {
	display: block !important;
	width: 100% !important;
	justify-content: normal !important;
}

.tpl-about .wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr) !important;
	gap: 24px !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-top: 40px !important;
}

.tpl-about .wp-block-gallery figure,
.tpl-about .wp-block-gallery .wp-block-image {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	float: none !important;
	text-align: center;
}

.tpl-about .wp-block-gallery img {
	width: 100% !important;
	max-width: 100% !important;
	height: auto !important;
	aspect-ratio: 4 / 5 !important;
	object-fit: cover;
	display: block;
	float: none !important;
	margin: 0 !important;
}

.tpl-about .wp-block-gallery figcaption {
	position: static !important;
	background: none !important;
	background-image: none !important;
	color: #17181d !important;
	bottom: auto !important;
	left: auto !important;
	right: auto !important;
	top: auto !important;
	padding: 0 !important;
	text-shadow: none !important;
	margin-top: 32px !important;
	font-size: 22px !important;
	font-weight: 400 !important;
	letter-spacing: 0.04em !important;
	text-transform: uppercase !important;
	text-align: center !important;
}

.tpl-about .wp-block-gallery figcaption .role {
	display: block !important;
	font-size: 14px !important;
	color: #17181d !important;
	margin-top: 10px !important;
	letter-spacing: 0.08em !important;
}

@media (max-width: 500px) {
	.tpl-about .wp-block-gallery figcaption { font-size: 17px !important; margin-top: 24px !important; }
	.tpl-about .wp-block-gallery figcaption .role { font-size: 12px !important; }
}

@media (max-width: 900px) {
	.tpl-about .wp-block-gallery { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 500px) {
	.tpl-about .wp-block-gallery { grid-template-columns: 1fr !important; }
}

/* Contact form */
.wpcf7-form p { margin-bottom: 18px; }

.wpcf7-form label {
	display: block;
	font-size: 12px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 6px;
	color: #555;
}

.wpcf7-form input[type=text],
.wpcf7-form input[type=email],
.wpcf7-form input[type=number],
.wpcf7-form input[type=url],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid #ccc;
	font-family: inherit;
	font-size: 15px;
	background: #fff;
}

.wpcf7-form textarea { min-height: 140px; }

.wpcf7-form input[type=submit] {
	background: #111;
	color: #fff;
	border: none;
	padding: 14px 34px;
	font-size: 13px;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	cursor: pointer;
}

.wpcf7-form input[type=submit]:hover { background: #333; }

/* -------------------------------------------------- */
/* 6. Footer                                            */
/* -------------------------------------------------- */

.site-footer {
	background: #2c3542;
	color: #ffffff;
	padding: 40px 32px 34px;
	margin-top: 20px;
}

.site-footer .footer-nav ul {
	display: flex;
	justify-content: center;
	gap: 40px;
	flex-wrap: wrap;
	margin-bottom: 40px;
}

.site-footer .footer-nav a {
	font-size: 16px;
	font-weight: 400;
	color: #ffffff;
}

.site-footer .footer-nav a:hover {
	opacity: 0.75;
}

.footer-bottom {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
}

.site-footer .copyright {
	font-size: 13px;
	color: #ffffff;
	line-height: 1.5;
	margin: 0;
	text-align: left;
	justify-self: start;
}

.site-footer .social-icon {
	justify-self: center;
}

.site-footer .back-to-top {
	justify-self: end;
}

.site-footer .social-icon,
.site-footer .back-to-top {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
}

.site-footer .social-icon:hover,
.site-footer .back-to-top:hover {
	opacity: 0.75;
}

@media (max-width: 600px) {
	.footer-bottom {
		grid-template-columns: 1fr;
		justify-items: center;
		text-align: center;
		gap: 16px;
	}
	.site-footer .copyright,
	.site-footer .social-icon,
	.site-footer .back-to-top {
		justify-self: center;
	}
	.site-footer .copyright { text-align: center; }
}