/*
Theme Name: Oak Farms Dairy
Author: QNY Creative
Author URI: http://qnycreative.com
Version: 1.0
*/

/* Colors — overwrite per project */
:root{
	--primary:#061a6e;      /* Oak Farms navy — headings, labels, header/footer */
	--accent:#ffd523;       /* CTA yellow */
	--white:#fff;
	--dark:#1a1a1a;
	--text:#333;
	--text-light:#999;
	--border:#333;
	--bg:#fff;
	--bg-alt:#f5f6f1;
	--card:rgba(255,255,255,0.95);

	/* Display face: Playfair Display (Google Fonts, free/OFL).
	   Body face: Museo Sans, licensed via Adobe Fonts kit wui5fam (enqueued in
	   functions.php). The family name Adobe serves is lowercase `museo-sans` with
	   NUMERIC weights — not "Museo Sans 500" as separate families — so weight 500
	   and 700 select the two faces. The kit carries ONLY 500 and 700 for this
	   family: never ask for 400 or the browser will synthesize it. */
	/* the live site's header/footer navy, a shade off the Figma's #061a6e */
	--navy-chrome:#001b72;
	--font-display:'Playfair Display', 'Noto Serif', Georgia, serif;
	--font-nav:'Noto Serif', Georgia, serif;   /* what oakfarmsdairy.com's nav uses */
	--font-body:museo-sans, 'Helvetica Neue', Arial, sans-serif;
}

/* WordPress Core Styles */
.alignleft{float:left; margin-right:1.5rem; margin-bottom:1rem}
.alignright{float:right; margin-left:1.5rem; margin-bottom:1rem}
.aligncenter{display:block; margin-left:auto; margin-right:auto; margin-bottom:1rem}
.alignwide{max-width:100%; margin-left:auto; margin-right:auto}
.alignfull{max-width:100vw; margin-left:calc(-50vw + 50%); width:100vw}
.wp-caption{max-width:100%; margin-bottom:1rem}
.wp-caption img{display:block; max-width:100%; height:auto}
.wp-caption-text,.wp-block-image figcaption,.gallery-caption{font-size:.875rem; color:#666; margin-top:.5rem; text-align:center}
img{max-width:100%; height:auto}
.wp-block-image img{display:block}
.gallery{display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem}
.gallery-item{flex:1 0 calc(33.333% - .5rem)}
.gallery-item img{display:block; width:100%; height:auto}
.screen-reader-text{clip:rect(1px,1px,1px,1px); clip-path:inset(50%); height:1px; width:1px; margin:-1px; overflow:hidden; padding:0; position:absolute; word-wrap:normal!important}
.screen-reader-text:focus{background-color:#f1f1f1; clip:auto!important; clip-path:none; color:#21759b; display:block; font-size:.875rem; font-weight:700; height:auto; left:5px; line-height:normal; padding:15px 23px 14px; text-decoration:none; top:5px; width:auto; z-index:100000}
.entry-content::after{content:""; display:table; clear:both}
.wp-block-quote{border-left:4px solid #ccc; margin:1.5rem 0; padding:.5rem 1.5rem}
.wp-block-pullquote{border-top:4px solid #ccc; border-bottom:4px solid #ccc; padding:1.5rem 0; text-align:center}
.wp-block-table{width:100%; margin-bottom:1.5rem; border-collapse:collapse}
.wp-block-table td,.wp-block-table th{padding:.5rem; border:1px solid #ccc}
.wp-block-separator{border:none; border-top:2px solid #ccc; margin:2rem 0}
.wp-block-button .wp-block-button__link{display:inline-block; padding:.75rem 1.5rem; text-decoration:none}
.has-text-align-left{text-align:left}
.has-text-align-center{text-align:center}
.has-text-align-right{text-align:right}

/* Minimal Reset */
*, *::before, *::after{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; font-size:16px}
body{font-family:var(--font-body); min-height:100vh; line-height:1.5; overflow-x:hidden; font-weight:500; font-size:1rem; color:var(--text);}
img, picture, video, canvas, svg{display:block; max-width:100%; height:auto}
button{font:inherit; cursor:pointer}
a{text-decoration:none; color:inherit}
table{border-collapse:collapse; border-spacing:0}
h1,h2,h3,h4,h5,h6{font-size:inherit; font-weight:inherit}
input, select, textarea{width:100%; padding:10px; border:1px solid var(--border); background:var(--white); font:inherit; border-radius:0; -webkit-appearance:none}
textarea{resize:none; min-height:120px}

/* Layout */
.content{ width:1420px; max-width:calc(100% - 80px); margin:0 auto; padding:0;}
.hidden{display:none !important}
.center{ text-align:center !important;}
.bg{ display: flow-root;}
.white{ color:var(--white);}

/* Column Layout */
.row{display:flex; flex-wrap:wrap; gap:15px}
.col{flex:1}
.col-1{flex:0 0 100%}
.col-2{flex:0 0 calc(50% - 7.5px)}
.col-3{flex:0 0 calc(33.333% - 10px)}
.col-4{flex:0 0 calc(25% - 11.25px)}
.col-5{flex:0 0 calc(20% - 12px)}

/* Responsive BG */
.rbg{background-image:var(--bg-desktop); background-size:cover; background-position:center}

/* Solid fill button */
.button{display:inline-block; padding:12px 30px; background:var(--primary); color:var(--white); font-weight:700; text-transform:uppercase; letter-spacing:0.05em; font-size:0.875rem; cursor:pointer; border:none; transition:background 0.3s}
.button:hover{background:var(--accent)}

/* Notifications */
.msg{padding:12px 16px; font-size:1rem; margin:20px 0 0; display:none;}
.msg.visible{display:block !important;}
.msg.success{background:#e8f5e9; color:#2e7d32; border:1px solid #a5d6a7}
.msg.error{background:#fbe9e7; color:#c62828; border:1px solid #ef9a9a}
.msg.warning{background:#fff8e1; color:#f57f17; border:1px solid #ffe082}
.redBorder{border-color:#c62828 !important; outline: 2px solid #c62828 !important;}

/* ACF Blocks wrapper */
.block { margin: 60px auto; position: relative;}
.block .content { margin: 0px auto;}

/* Popup CPT overlay */
.popupOverlay{position:fixed; left:0; top:0; background:rgba(255,255,255,0.8); display:block; width:100vw; height:100vh; z-index:1000;}
.popupOverlay .verticalAlign{width:100%; height:100%; display:table-cell; vertical-align:middle;}
.popupOverlay .popup{ width: 100%; margin:0 auto; max-width:420px; position: relative;}
.popupOverlay .popupFullImg{ width: 100%; margin:0 auto; display: block; }
.popupOverlay .popupFullImg img{ display: block; width: 100%;}
.popupOverlay .close{ position: absolute; right: -40px; top: -40px; width: 40px; height: 40px; box-sizing: border-box; background: url(img/close.svg) no-repeat center center / contain; cursor: pointer;}
.displayTable{ display: table; width: 100%; height: 100%;}
.verticalAlign{ display: table-cell; vertical-align: middle;}

/* Header — navy bar with the logo card overhanging below it */
header{ position:fixed; left:0; top:0; width:100%; z-index:1000;}
body.admin-bar header{ top:32px;}
.headerBar{
	position:relative;
	/* sized to match oakfarmsdairy.com: 76px bar, logo card 256x160 at x=55,
	   nav 15px Noto Serif 700 uppercase with ~13px gaps, ending ~110px from the
	   right edge. The live site's navy is #001b72, a shade off the Figma's
	   #061a6e — the chrome uses the live value so it reads as the same site. */
	height:76px;
	background:var(--navy-chrome);
	display:flex;
	align-items:center;
	justify-content:flex-end;
	padding:0 110px 0 0;
}
/* logo sits in a white card pinned to the bar and hanging below it */
header .logo{
	position:absolute;
	left:55px; top:0;
	width:256px; height:160px;
	background:var(--white);
	display:flex; align-items:center; justify-content:center;
	padding:10px 16px;
	z-index:2;
}
header .logo img{ width:100%; height:auto; display:block;}

header .headerNav-list{ display:flex; align-items:center; gap:13px; list-style:none;}
header .headerNav a{
	font-family:var(--font-nav);
	font-weight:700;
	font-size:0.9375rem;
	letter-spacing:normal;
	text-transform:uppercase;
	color:var(--white);
	white-space:nowrap;
	transition:opacity 0.2s;
}
header .headerNav a:hover{ opacity:0.72;}

/* hamburger — desktop hides it, narrow screens use it */
header .menuIcon{
	display:none;
	position:relative; width:34px; height:34px; flex-shrink:0;
	align-items:center; justify-content:center; cursor:pointer; z-index:1001;
}
header .menuIcon span{ display:block; width:22px; height:2px; background:var(--white); border-radius:2px; position:absolute; transition:0.3s ease; left:50%; margin-left:-11px;}
header .menuIcon span:nth-child(1){ top:11px;}
header .menuIcon span:nth-child(2){ top:16px;}
header .menuIcon span:nth-child(3){ top:21px;}
body.menuOpen .menuIcon span:nth-child(1){ top:16px; transform:rotate(45deg);}
body.menuOpen .menuIcon span:nth-child(2){ opacity:0;}
body.menuOpen .menuIcon span:nth-child(3){ top:16px; transform:rotate(-45deg);}

.skipLink{ position:absolute;}

/* Section — the hero background runs under the fixed header, so no offset here */
section{ padding:0;}

/* Main Menu (full-screen overlay, narrow screens only) */
.mainMenu { position: fixed; inset: 0; z-index: 999; background: var(--primary); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0.3s ease; overflow-y: auto; -webkit-overflow-scrolling: touch;}
body.menuOpen .mainMenu { opacity: 1; visibility: visible; pointer-events: auto;}
.mainMenu-inner { padding: 130px 0px 60px; min-height: 100vh;}
/* bare <li>s inside a div fail HTML validation — wp_nav_menu now emits a real list */
.mainMenu-list{ list-style:none; margin:0; padding:0;}
.mainMenu a { display:block; font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:var(--white); text-transform:uppercase; padding:10px 0; transition:opacity 0.2s;}
.mainMenu a:hover { opacity: 0.7;}

/* Footer */
footer{ background:var(--navy-chrome); color:var(--white); padding:24px 0 20px;}
footer a{ color:var(--white);}
.footer-inner{ display:flex; align-items:flex-start; justify-content:space-between; gap:40px;}

.footerMenu-list{ display:flex; flex-wrap:wrap; align-items:center; gap:31px; list-style:none;}
.footerMenu-list li{ display:flex; align-items:center; gap:31px;}
.footerMenu-list li + li::before{ content:"\2022"; opacity:0.75; font-size:0.75rem;}
.footerMenu a{ font-weight:500; font-size:1rem; letter-spacing:normal; text-transform:uppercase;}
.footerMenu a:hover{ opacity:0.75;}

.footerPrefs{ margin:32px 0 0;}
.managePreferences{ font-size:0.875rem; font-weight:600; color:rgba(255,255,255,0.55);}
.managePreferences:hover{ color:rgba(255,255,255,0.85);}

.footerLegal{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:22px; font-size:0.875rem;}
.footerLegal-list{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none;}
.footerLegal-list li + li::before{ content:"|"; margin-right:8px; opacity:0.6;}
.footerLegal-list li{ display:flex; align-items:center;}
.footerLegal a:hover{ text-decoration:underline;}

.footer-social{ display:flex; align-items:center; gap:15px; padding-top:38px;}
.socialIcon{
	width:37px; height:37px; border-radius:50%;
	background:var(--white);
	display:flex; align-items:center; justify-content:center;
	transition:opacity 0.2s;
}
.socialIcon:hover{ opacity:0.85;}
/* glyph is masked so the source SVG's own white fill doesn't matter */
.socialIcon i{
	display:block; width:21px; height:21px;
	background:var(--primary);
	-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
	-webkit-mask-position:center; mask-position:center;
	-webkit-mask-size:contain; mask-size:contain;
}
.socialIcon .iconFacebook{ -webkit-mask-image:url(img/icon-facebook.svg); mask-image:url(img/icon-facebook.svg);}
.socialIcon .iconInstagram{ -webkit-mask-image:url(img/icon-instagram.svg); mask-image:url(img/icon-instagram.svg);}

/* floating back-to-top */
.toTop{
	position:fixed; right:24px; bottom:24px; z-index:900;
	width:30px; height:30px; border-radius:50%;
	border:2px solid #d0021b; background:var(--white);
	display:flex; align-items:center; justify-content:center;
	opacity:0; visibility:hidden; transition:opacity 0.25s ease, visibility 0.25s ease;
}
body.scrolled .toTop{ opacity:1; visibility:visible;}
.toTop::before{
	content:""; width:9px; height:9px;
	border:solid #d0021b; border-width:2px 2px 0 0;
	transform:rotate(-45deg); margin-top:4px;
}

@media(min-width:768px){
	.showIphone{ display: none;}
}

/* Tablet / narrow desktop — collapse the nav into the overlay menu */
@media(max-width:1199px){
	.headerBar{ padding:0 20px 0 0; justify-content:flex-end;}
	header .headerNav{ display:none;}
	header .menuIcon{ display:flex;}
	header .logo{ left:20px; width:130px; height:84px;}
	.showDesktop, .hideIpad{ display:none !important;}
	.col-3, .col-4, .col-5 { flex: 0 0 calc(50% - 7.5px);}
}

/* Phone */
@media(max-width:767px){
	.popupOverlay .popup{max-width: 300px;}
	header .logo{ left:16px; width:104px; height:68px; padding:5px 8px;}
	.headerBar{ height:44px;}
	/* NOTE: no .fullwidthText override here — the max-width:900px block appears
	   LATER in this file, so at equal specificity it wins and sets 124px for
	   phones too (a 56px gap below the logo card, which reads fine). */
	.mainMenu-inner { padding: 110px 0px 40px;}
	.rbg { background-image: var(--bg-phone);}
	[class*="col-"] { flex: 0 0 100%;}
	.footer-inner{ flex-direction:column; align-items:flex-start; gap:18px;}
	/* Stack the footer lists and drop the separators. Inline they wrap mid-list and
	   the bullet/pipe leads the new line ("· CAREERS"), which reads as broken. */
	.footerMenu-list{ flex-direction:column; align-items:flex-start; gap:10px;}
	.footerMenu-list li{ gap:0;}
	.footerMenu-list li + li::before{ display:none;}
	.footerLegal{ flex-direction:column; align-items:flex-start; gap:8px; margin-top:18px;}
	.footerLegal-list{ flex-direction:column; align-items:flex-start; gap:8px;}
	.footerLegal-list li + li::before{ display:none;}
	.footer-social{ padding-top:0;}
	.toTop{ right:14px; bottom:14px;}
	#wpadminbar{ display: none !important;}
	body.admin-bar{ margin-top: -46px;}
	body.admin-bar header{ top: 0;}
	.hideIphone{ display: none !important;}
	.showIphone{ display: block !important;}
}


/* ============================================================
   Oak Farms — Community Love Giveback
   ============================================================ */

/* --- Background wrapper (background_open / background_close) --- */
.bgSection{
	position:relative;
	background-image:var(--bg-desktop);
	background-size:cover;
	background-position:center top;
	background-repeat:no-repeat;
	min-height:var(--min-height, auto);
	display:flow-root;
}
/* torn paper edge sitting on the bottom lip of the section */
.bgSection--tornBottom::after{
	content:"";
	position:absolute;
	left:0; right:0; bottom:-1px;
	height:70px;
	background:url(img/torn-edge.png) repeat-x bottom center;
	background-size:auto 70px;
	transform:scaleY(-1);
	pointer-events:none;
	z-index:2;
}

/* --- Full width text (hero) --- */
.fullwidthText{ padding:134px 0 124px; position:relative; z-index:1;}
.fullwidthText--center{ text-align:center;}
.fullwidthText--left{ text-align:left;}
.fullwidthText-heading{
	font-family:var(--font-display);
	font-weight:800;
	color:var(--primary);
	font-size:clamp(2.75rem, 5.3vw, 5.3125rem);
	line-height:1.235;
	letter-spacing:-0.02em;
	margin:0;
}
.fullwidthText-body{
	font-family:var(--font-body);
	font-weight:700;
	color:var(--primary);
	font-size:clamp(1.25rem, 2.19vw, 2.1875rem);
	line-height:1.2;
	margin:24px auto 0;
	/* The design sets this copy over three lines, breaking after "Texas." and
	   after "difference"; its 1233px box lets Museo Sans fit it on two. 860px is
	   just above the design's longest line (820px) and below the two-line
	   threshold, so those exact breaks fall out naturally — no hard-coded <br>s
	   in a client-editable field. Do NOT add text-wrap:balance: it redistributes
	   the words and loses the intended break points. */
	max-width:860px;
}
.fullwidthText-body p{ margin:0;}

/* --- Nomination form section --- */
.formSection{
	position:relative;
	background-image:var(--bg-desktop);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	/* The Figma section is 1139px tall with 104px padding around a 917px card.
	   Our card is ~93px taller because it carries a reCAPTCHA widget the design
	   never accounted for, so the padding is trimmed to absorb that and keep the
	   SECTION at the design's height. That matters beyond rhythm: the background
	   is `cover`, so a taller section rescales and re-crops the artwork, and the
	   centred polaroid group drifts down. */
	/* design: card top 104 from the section top, polaroid group top 120,
	   section total 1139. The card is the tallest flex item so it defines the
	   content box and pins to the top — hence the asymmetric padding, and the
	   group is offset from flex-start rather than centred (centring would put
	   it at 154). */
	padding:104px 0 25px;
	overflow:hidden;
}
/* ripped paper on the TOP edge only.
   No bottom tear: the section runs straight into the navy footer, which is what
   the design does — its section-4 background has no bottom tear at all. */
.formSection::before{
	content:"";
	position:absolute;
	left:0; right:0;
	top:-1px;
	height:70px;
	background:url(img/torn-edge.png) repeat-x center;
	background-size:auto 70px;
	pointer-events:none;
	z-index:2;
}

.formSection-inner{
	display:flex;
	align-items:center;
	gap:3.9%;
	position:relative;
	z-index:1;
	/* The -16px design offset is applied in the desktop block at the bottom of this
	   file, NOT here: it only makes sense at the 1600px width the design was drawn
	   at. Applying it everywhere threw the form 32px off centre on phone and
	   tablet, which is very visible once the layout stacks. */
}
.formSection--left  .formSection-polaroids{ order:1;}
.formSection--left  .formSection-card{ order:2;}
.formSection--right .formSection-polaroids{ order:2;}
.formSection--right .formSection-card{ order:1;}

/* --- Polaroids --- */
.formSection-polaroids{
	flex:1 1 44.7%;
	position:relative;
	/* matches the Figma polaroid group so the card/tape percentages hold */
	aspect-ratio:634.45 / 893.17;
	align-self:flex-start;
	margin-top:16px;
}
.polaroid{
	position:absolute;
	width:84.5%;
	/* NO aspect-ratio here. The card's height comes from padding + the photo box's
	   own ratio, which lands on the same 733:1091 now that the padding percentages
	   are correct (see below).
	   ⚠️ Do NOT pin aspect-ratio on the card and size the photo with height:100%:
	   that is a cyclic dependency and WebKit resolves it differently from Blink and
	   Gecko — it sized the photo from the card's ratio height, then let the card
	   grow to fit, so on iPhone the card came out 514px instead of 444 and
	   overflowed the group. Chrome and Firefox looked fine. */
	background:var(--white);
	/* The Figma card IS the pre-framed source image (733x1091, photo inset 16px on
	   three sides with a 155px bottom strip) shown with plain object-cover — so the
	   CSS frame has to reproduce those proportions exactly or object-fit crops the
	   photo and it reads as zoomed.
	   GOTCHA: percentage padding resolves against the CONTAINING BLOCK's width, not
	   the element's own. The card is 84.5% of the group, so the card-relative
	   figures (2.183% / 21.15%) must be scaled by 0.845 to land right:
	     2.183 x 0.845 = 1.845    21.15 x 0.845 = 17.87
	   Rescale these if .polaroid's width ever changes (see the phone query). */
	padding:1.845% 1.845% 17.87%;
	box-shadow:0 6px 24px rgba(0,0,0,0.22);
}
.polaroid-photo{
	display:block;
	position:relative;
	width:100%;
	/* the photo's own ratio drives the box — no dependency on the parent's height */
	aspect-ratio:701 / 920;
	overflow:hidden;
	background:var(--bg-alt);
}
/* absolutely positioned so nothing here can feed back into the box's height */
.polaroid-photo picture,
.polaroid-photo img{ position:absolute; inset:0; width:100%; height:100%;}
.polaroid-photo img{
	width:100%; height:100%;
	object-fit:cover;
	display:block;
}
/* Geometry derived from the Figma group (634.45 x 893.17) — both cards are the
   same size (~536 x 799) and lean the SAME way, only a couple of degrees apart,
   so they read as a near-stacked pair rather than a fan.
   NOTE: the `top` values are 7.72% (69px) above what get_metadata reports for
   these nodes. Figma's reported bbox and its own rendered PNG of the section
   disagree by exactly that much; the render is what the design actually looks
   like, so it wins. Verified by cross-correlating the rendered section against
   the live page (content correlation 1.000 once shifted). */
/* The -7.72% render/metadata compensation above applies to the FRONT card only —
   it is verified correct there (red-cap landmark, 1.7px). Applying it to the rear
   too lifted this card ~60px and exposed its photo, which the design keeps hidden
   behind the front. Measured back down off the render, not the metadata. */
.polaroid--rear{
	left:12.96%; top:4.42%;
	transform:rotate(-1.5deg);
	z-index:1;
}
.polaroid--front{
	left:7.75%; top:5.37%;
	transform:rotate(-7.5deg);
	z-index:2;
}
/* Tape — anchored to the POLAROID CORNERS, not the container, so it tracks the
   cards at any size. Design: one strip straddling the rear card's top-right
   corner, one straddling the front card's bottom-left. Measured off the Figma
   polaroid group: each strip is ~31% of the group width, i.e. ~42% of a card. */
.formSection--tapeLight{ --tape:url(img/tape-light.png); --tape-ratio:1227 / 400;}
.formSection--tapeNavy{ --tape:url(img/tape-navy.png); --tape-ratio:962 / 397;}

/* Both strips sit on the FRONT card in the design — top-right and bottom-left of
   the same polaroid — not one per card. Centres measured off the Figma section:
   top strip at 85%/8% of the card box, bottom strip at 17%/93%. */
.polaroid--front::before,
.polaroid--front::after{
	content:"";
	position:absolute;
	z-index:3;
	/* 38.0% of the card's LAYOUT width (536px) = 203.8px rendered. Note the
	   card's rotated bbox is 636px, so a figure measured off a screenshot
	   must be converted before being typed here. */
	width:38.0%;
	aspect-ratio:var(--tape-ratio);
	background:var(--tape) no-repeat center / contain;
	pointer-events:none;
}
/* Tape centres measured off the rendered design, expressed against the FRONT
   card box: top strip centre 86.9%/-3.8%, bottom strip 17.0%/89.4%, each 36.2%
   of the card width. Both strips slope DOWN to the right in the design; the
   angles below are on top of the card's own -7.5deg. */
/* ⚠️ These angles COMPOSE with the parent card's own -7.5deg, so the rendered
   angle is (value - 7.5). Design wants +31.8 and +21.6 on screen, hence
   31.8+7.5=39.3 and 21.6+7.5=29.1. Typing the design's angle directly lands
   7.5deg short — that was the bug. */
/* Offsets are in the card's ROTATED local frame, so a screen-space correction
   must be rotated by +7.5deg before being applied here. */
.polaroid--front::before{ left:77.33%; top:4.51%; transform:rotate(39.3deg);}
.polaroid--front::after{ left:-11.20%; top:90.16%; transform:rotate(29.1deg);}

/* --- Form card --- */
.formSection-card{
	flex:0 0 51.4%;
	background:var(--card);
	border-radius:14px;
	padding:37px 63px 50px;
}
.formCard-heading{
	font-family:var(--font-display);
	font-weight:800;
	color:var(--primary);
	font-size:clamp(1.875rem, 2.81vw, 2.8125rem);
	line-height:1.1;
	letter-spacing:-0.01em;
	margin:0 0 16px;
}
.formCard-intro{
	font-family:var(--font-body);
	font-weight:700;
	font-size:1rem;
	line-height:1.25;
	color:var(--text);
	margin:0 0 18px;
	max-width:541px;
}
.formCard-thanks{
	font-family:var(--font-body);
	font-weight:700;
	font-size:1.125rem;
	color:var(--primary);
	padding:24px 0;
}

.formRow{ margin-bottom:24px;}
.formLabel{
	display:block;
	font-family:var(--font-display);
	font-weight:800;
	color:var(--primary);
	font-size:0.9375rem;
	line-height:1.33;
}
.formHelp{
	display:block;
	font-family:var(--font-body);
	font-weight:500;
	font-size:0.8125rem;
	/* line-height is load-bearing: without it this inherits body's 1.5 and renders
	   20px tall against the design's 13, which made every helper-text row ~5px too
	   tall and compounded down the form (label 5 ended up 10px low). */
	line-height:1.25;
	letter-spacing:0.02em;
	color:var(--text);
	margin-top:4px;
}
.nominationForm input[type=text],
.nominationForm input[type=email],
.nominationForm input[type=tel],
.nominationForm textarea{
	width:100%;
	max-width:626px;
	margin-top:4px;
	border:1px solid var(--border);
	border-radius:3px;
	background:var(--white);
	font-family:var(--font-body);
	font-size:0.9375rem;
	color:var(--text);
	padding:7px 10px;
}
.nominationForm input[type=text],
.nominationForm input[type=email],
.nominationForm input[type=tel]{ height:36px;}
.nominationForm textarea{ height:96px; min-height:96px; resize:vertical;}
.nominationForm input:focus,
.nominationForm textarea:focus{ outline:2px solid var(--primary); outline-offset:1px;}

/* checkboxes */
/* design: 36px from the last input to the first checkbox, 35px between them */
.formCheck{ display:flex; align-items:flex-start; gap:8px; margin-bottom:16px; max-width:626px;}
/* NOT :first-of-type — the first sibling div is a .formRow, so that selector
   matches nothing. Target the checkbox that follows the last field row.
   36px, not 12px: adjacent vertical margins COLLAPSE, so this competes with the
   preceding .formRow's 24px margin-bottom rather than adding to it. */
.formRow + .formCheck{ margin-top:36px;}
.formCheck input[type=checkbox]{
	width:19px; height:19px; flex:0 0 19px;
	/* padding:0 is load-bearing: the global `input{padding:10px}` reset applies
	   here too, and under border-box the used height can't fall below
	   padding+border — so height:19px silently rendered as 22px. */
	padding:0;
	border:1px solid var(--border); border-radius:3px;
	background:var(--white); cursor:pointer;
	-webkit-appearance:none; appearance:none;
	position:relative;
	/* centre the box on the label's FIRST line (not the whole label, which wraps
	   to 2-3 lines on phones). Mirrors the label's own 13px/1.35 so the two stay
	   locked together if that type scale changes. */
	font-size:13px; line-height:1.35;
	margin-top:calc((1.35em - 19px) / 2);
}
.formCheck input[type=checkbox]:checked{ background:var(--primary); border-color:var(--primary);}
.formCheck input[type=checkbox]:checked::after{
	content:""; position:absolute;
	left:50%; top:50%; width:5px; height:9px;
	margin:-6px 0 0 -3px;
	border:solid var(--white); border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.formCheck input[type=checkbox]:focus-visible{ outline:2px solid var(--primary); outline-offset:2px;}
.formCheck label{
	font-family:var(--font-body);
	font-weight:500;
	font-size:0.8125rem;
	letter-spacing:0.02em;
	line-height:1.35;
	color:var(--text);
	cursor:pointer;
}
.formCheck label a{ text-decoration:underline;}

.formCaptcha{ margin:18px 0 4px;}
.formError{
	font-family:var(--font-body);
	font-weight:700;
	font-size:0.875rem;
	line-height:1.35;
	color:#c62828;
	background:#fdecea;
	border:1px solid #f5c6c2;
	border-radius:3px;
	padding:9px 12px;
	margin:16px 0 0;
	max-width:626px;
}

.btnSubmit{
	margin-top:26px;
	display:inline-block;
	min-width:195px;
	height:42px;
	padding:0 18px;
	background:var(--accent);
	color:var(--primary);
	border:none;
	border-radius:14px;
	font-family:var(--font-display);
	font-weight:800;
	font-size:1.125rem;
	line-height:42px;
	transition:filter 0.2s ease;
}
.btnSubmit:hover{ filter:brightness(0.94);}
.btnSubmit:focus-visible{ outline:2px solid var(--primary); outline-offset:3px;}

/* honeypot */
.oakHp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}

/* --- Tablet --- */
@media(max-width:1299px){
	.formSection-card{ padding:30px 36px 36px;}
	.formSection-polaroids{ min-height:520px;}
}

/* --- Phone / stacked --- */
/* Stack below 1100px so BOTH iPad orientations (768 portrait, 1024 landscape) get
   the single-column treatment. Side-by-side at 1024 left the form card only 485px
   wide and cramped. 1100-1299 stays two-column for small laptops. */
@media(max-width:1100px){
	.content{ max-width:calc(100% - 40px);}
	/* The logo card overhangs the bar (bottom edge at 84px here, 68px on phones).
	   At 70px the heading sat 14px INTO it on tablet and 2px below it on phone;
	   these clear it by ~40px. */
	.fullwidthText{ padding:124px 0 80px;}
	.formSection{ padding:70px 0 80px;}
	/* Photos ABOVE the form, and they keep the desktop arrangement: the two cards
	   stay absolutely positioned and overlapping inside the aspect-ratio group, so
	   the tilt, the stacking and the tape all scale down intact. Do NOT switch the
	   cards to position:relative here — that makes them flow as two separate
	   pictures and loses the polaroid-pile look entirely. */
	.formSection-inner{ flex-direction:column; gap:40px;}
	.formSection--left .formSection-polaroids,
	.formSection--right .formSection-polaroids{ order:1;}
	.formSection--left .formSection-card,
	.formSection--right .formSection-card{ order:2;}
	.formSection-card{ flex:1 1 auto; width:100%; padding:26px 22px 30px;}
	/* Cap the stacked photo group: it keeps the design's 634:893 ratio, so at full
	   tablet width it would render ~984x1386 and swamp the form. 460px keeps it in
	   proportion to the phone treatment at every width in this range. */
	.formSection-polaroids{ flex:0 0 auto; width:100%; max-width:460px; align-self:center; margin-top:0;}
	.bgSection--tornBottom::after,
	.formSection::before{ height:38px; background-size:auto 38px;}
	.nominationForm input[type=text],
	.nominationForm input[type=email],
	.nominationForm input[type=tel],
	.nominationForm textarea,
	.formCheck{ max-width:none;}
}


/* --- Desktop background framing (the width the design was drawn at) ---
   At >=1300px pin the background to 100% width, top-anchored, instead of `cover`.
   The client's added fields make this section taller than the design's 1139px, and
   `cover` would rescale the artwork and crop it horizontally, so the pattern stops
   matching the design. The form backgrounds are mirror-extended to 1450px tall so
   100%-width still fills any realistic section height.
   Below 1300px the section is far taller than it is wide, so `cover` (the default
   above) is correct there — 100% width would leave most of the section unpainted. */
@media(min-width:1300px){
	.formSection{
		background-size:100% auto;
		background-position:center top;
	}
	/* The design's section content spans x 75-1493 on a 1600 frame, so its centre is
	   784 — 16px LEFT of the page centre, not centred. Desktop only.
	   Use `left`, NOT margin-left: this element is .content, whose `margin:0 auto`
	   does the centring, and margin-left would replace that auto and slam the block
	   to the left edge. */
	.formSection-inner{ left:-16px;}
}