/* ============================================================
   Frei Brothers — base, header, and BLOCK-styled sections
   Sections are built from core blocks (group/image/heading/paragraph/button)
   and styled here via the design tokens, so content is edited in wp-admin.
   ============================================================ */

:root {
	--fb-ink: #4D4D4F;
	--fb-white: #ffffff;
	--fb-red: #921B1E;
	--fb-red-dark: #7c1619;
	--fb-container: 1658px;
	--fb-gutter: 80px;
	--fb-font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--fb-font-head: "adobe-caslon-pro", "Libre Caslon Display", Georgia, serif;
	--fb-font-nav: "sackers-gothic-std", "Lato", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: var(--fb-font-body); color: var(--fb-ink); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; }
a { color: inherit; }
.screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; word-wrap: normal !important; }

/* ---------- Block alignment (classic theme rendering the_content) ---------- */
.site-main { width: 100%; }
.site-main > * { margin-top: 0; margin-bottom: 0; }
.alignfull { width: 100%; }

/* ---------- Hero / full-bleed banner — shared by every page ----------
   Desktop + mobile crops collapse into one <picture> at render
   (freibrothers_picture_swap), so only the matching crop downloads. */
.hero, .ourwines-hero, .vineyards-hero { width: 100%; line-height: 0; }
.hero figure, .ourwines-hero figure, .vineyards-hero figure { margin: 0; }
.hero picture, .ourwines-hero picture, .vineyards-hero picture { display: block; }
.hero img, .ourwines-hero img, .vineyards-hero img { display: block; width: 100%; height: auto; }
.hero__img--mobile, .ourwines-hero__img--mobile, .vineyards-hero__img--mobile { display: none; }

/* ---------- Intro (pattern) ---------- */
.intro { max-width: 900px; margin: 0 auto; padding: 64px 24px 8px; }
.intro p { margin: 0; font-size: 24px; line-height: 35px; color: var(--fb-ink); text-align: center; }

/* ---------- Split: media + text (reusable pattern) ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 56px; max-width: 1400px; margin: 0 auto; padding: 56px 40px; }
.split .split__media, .split > .wp-block-image { margin: 0; }
.split .split__media img, .split img { width: 100%; height: auto; display: block; }
.split__body { text-align: center; }
.split__body h2, .split__body .wp-block-heading { margin: 0 0 10px; font-family: var(--fb-font-head); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; color: var(--fb-ink); }
.split__body p { margin: 0 auto 26px; max-width: 537px; font-size: 24px; line-height: 35px; color: var(--fb-ink); }
.split__body .wp-block-buttons { justify-content: center; }
.split--reverse .split__media, .split--reverse > .wp-block-image:first-child { order: 2; }

/* CTA button — core button styled to the brand (#921B1E, white Sackers Gothic, 203×53) */
.btn-cta .wp-block-button__link, a.btn-cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 203px; height: 53px; padding: 0 24px; border-radius: 0;
	background: var(--fb-red); color: #fff;
	font-family: var(--fb-font-nav); font-weight: 800; font-size: 18px;
	letter-spacing: .9px; text-transform: uppercase; text-decoration: none;
}
.btn-cta .wp-block-button__link:hover, a.btn-cta:hover { background: var(--fb-red-dark); }

/* ---------- Header (desktop, 272:2662) ---------- */
.site-header { background: var(--fb-white); }
.header-inner { max-width: var(--fb-container); margin: 0 auto; padding: 30px var(--fb-gutter) 0; position: relative; }
.header-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: 24px; }
.header-find   { justify-self: start; }
.header-logo   { justify-self: center; }
.header-search { justify-self: end; }
.header-logo img, .header-logo .custom-logo { width: 250px; height: auto; display: block; }
.util { display: inline-flex; align-items: center; gap: 9px; color: var(--fb-ink); text-decoration: none; line-height: 1; }
.util__icon { display: block; flex: 0 0 auto; }
.util--find { font-size: 21px; }
.util--find .util__icon { width: 14px; height: 20px; }
.util--search { font-size: 20px; cursor: default; }
.util--search .util__icon { width: 21px; height: 22px; }
.primary-nav { margin-top: 36px; padding-bottom: 26px; }
.primary-nav__list { display: flex; justify-content: center; gap: 64px; margin: 0; padding: 0; list-style: none; }
.primary-nav a { font-family: var(--fb-font-nav); font-weight: 800; font-size: 18px; letter-spacing: 0.9px; text-transform: uppercase; color: var(--fb-ink); text-decoration: none; }
.header-rule { width: 100%; height: 10px; background: url(../img/header-rule.svg) center center / 100% 100% no-repeat; }

.nav-burger { display: none; }
/* Out of the a11y tree on desktop (no burger there); revealed — still visually hidden — with the burger on mobile. */
.fb-nav-toggle { display: none; position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mobile (≤900px): header 272:3254 + stacked sections ---------- */
@media (max-width: 900px) {
	.header-inner { padding: 0 20px; }
	.header-top { grid-template-columns: auto 1fr auto; column-gap: 12px; min-height: 92px; }
	.header-search { display: none; }
	.header-find { justify-self: start; }
	.header-find .util__label { display: none; }
	.header-find .util__icon { width: 17px; height: 25px; }
	.header-logo { justify-self: center; }
	.header-logo img, .header-logo .custom-logo { width: 138px; }
	.nav-burger { display: inline-flex; align-items: center; justify-self: end; position: relative; width: 20px; height: 10px; cursor: pointer; }
	.fb-nav-toggle { display: block; }
	.nav-burger__bars, .nav-burger__bars::before, .nav-burger__bars::after { content: ""; position: absolute; left: 0; width: 20px; height: 1.6px; background: var(--fb-ink); border-radius: 1px; transition: transform .25s ease, opacity .2s ease, top .25s ease; }
	.nav-burger__bars { top: 50%; transform: translateY(-50%); }
	.nav-burger__bars::before { top: -4px; }
	.nav-burger__bars::after  { top: 4px; }
	.primary-nav { display: none; margin-top: 0; padding: 10px 0 18px; }
	.primary-nav__list { flex-direction: column; align-items: center; gap: 2px; }
	.primary-nav a { padding: 13px 4px; font-size: 16px; }
	#fb-nav-toggle:checked ~ .header-inner .primary-nav { display: block; }
	#fb-nav-toggle:checked ~ .header-inner .nav-burger__bars { background: transparent; }
	#fb-nav-toggle:checked ~ .header-inner .nav-burger__bars::before { top: 0; transform: rotate(45deg); }
	#fb-nav-toggle:checked ~ .header-inner .nav-burger__bars::after  { top: 0; transform: rotate(-45deg); }
	/* The checkbox is the tab stop but is clipped to 1px, so paint its focus ring on the burger. */
	#fb-nav-toggle:focus-visible ~ .header-inner .nav-burger { outline: 2px solid var(--fb-ink); outline-offset: 4px; }

	.hero__img--desktop { display: none; }
	.hero__img--mobile  { display: block; }

	.intro { padding: 40px 22px 4px; }
	.split { grid-template-columns: 1fr; gap: 0; max-width: 520px; padding: 26px 0 6px; }
	.split--reverse .split__media, .split--reverse > .wp-block-image:first-child { order: 0; }
	.split__body { padding: 26px 22px 10px; }
	.split__body p { max-width: 320px; }
}

@media (max-width: 480px) {
	.header-logo img, .header-logo .custom-logo { width: 130px; }
	.header-top { min-height: 84px; }
}

/* ---------- Footer (272:2690 — 1658×392 layout; mobile 272:3396) ---------- */
.site-footer { background: var(--fb-white); position: relative; overflow: hidden; }
.footer-rule { width: 100%; height: 10px; background: url(../img/header-rule.svg) center center / 100% 100% no-repeat; transform: scaleY(-1); }
.footer-inner { position: relative; z-index: 1; max-width: var(--fb-container); margin: 0 auto; min-height: 300px; padding: 71px var(--fb-gutter) 0; display: flex; justify-content: space-between; align-items: flex-start; }
.footer-heading { margin: 0 0 22px; font-size: 21px; line-height: 30px; color: var(--fb-ink); }
.footer-services { display: flex; flex-direction: column; }
.footer-services .footer-menu, .footer-services ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.footer-services a, .footer-link--red { color: var(--fb-red); font-size: 21px; line-height: 30px; text-decoration: none; }
.footer-link--red { display: block; margin-bottom: 22px; }
.footer-link--red:last-child { margin-bottom: 0; }
.footer-brand { margin-right: 98px; }
.footer-logo { width: 278px; height: auto; display: block; }
/* Est. 1897 seal — faint watermark in lower-right of the upper block (Figma: logo y88–187, seal y207–306) */
.footer-seal { position: absolute; right: 53px; bottom: 0; width: 112px; height: 112px; opacity: 1; pointer-events: none; z-index: 0; }
.footer-bottom { position: relative; z-index: 1; max-width: var(--fb-container); margin: 0 auto; padding: 28px var(--fb-gutter) 38px; display: flex; justify-content: space-between; align-items: center; }
.footer-copy { margin: 0; font-size: 15px; color: var(--fb-ink); }
.footer-legal, .footer-legal ul, .footer-legal-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 43px; }
.footer-legal a { color: var(--fb-ink); font-size: 15px; text-decoration: none; }

@media (max-width: 900px) {
	/* Mobile footer (272:3396): centered stack — logo, seal, red links, divider, stacked legal, copyright */
	.footer-inner { flex-direction: column; align-items: center; text-align: center; min-height: 0; padding: 34px 22px 0; }
	.footer-brand { order: 1; margin: 0 0 14px; }
	.footer-logo { width: 130px; }
	.footer-seal { order: 2; position: static; transform: none; left: auto; right: auto; top: auto; bottom: auto; width: 89px; height: 89px; margin: 0 auto 22px; }
	.footer-services { order: 3; align-items: center; }
	.footer-heading { color: var(--fb-red); font-weight: 400; font-size: 15px; line-height: 1.4; margin: 0 0 18px; }
	.footer-services .footer-menu, .footer-services ul { gap: 18px; }
	.footer-services a, .footer-link--red { font-size: 15px; line-height: 1.4; }
	.footer-link--red { margin-bottom: 18px; }

	.footer-bottom { flex-direction: column; align-items: center; text-align: center; padding: 0 22px 32px; }
	.footer-bottom::before { content: ""; order: 0; width: 123px; height: 1px; background: var(--fb-red); margin: 26px auto 24px; }
	.footer-legal, .footer-legal ul, .footer-legal-menu { order: 1; flex-direction: column; align-items: center; gap: 18px; }
	.footer-legal a { font-size: 13px; }
	.footer-copy { order: 2; max-width: 240px; margin: 22px auto 0; font-size: 11px; line-height: 1.6; }
}

/* ============================================================
   OUR WINES page (Figma 272:2846) — hero banner, intro, CPT grid
   ============================================================ */

/* Hero rules are consolidated in the shared Hero section near the top. */

/* "Bottled Legacy" heading + intro paragraph (editable block content) */
.ourwines-intro { max-width: 1290px; margin: 0 auto; padding: 50px 24px 0; text-align: center; }
.ourwines-intro :is(h1, h2, .wp-block-heading) { margin: 0 0 10px; font-family: var(--fb-font-head); font-weight: 600; font-size: 34px; line-height: 35px; letter-spacing: .5px; text-transform: uppercase; color: var(--fb-ink); }
.ourwines-intro p { margin: 0 auto; max-width: 1140px; font-size: 24px; line-height: 35px; color: var(--fb-ink); }

/* Wine grid (5 cards) */
.wine-grid-section { max-width: var(--fb-container); margin: 0 auto; padding: 45px var(--fb-gutter) 53px; text-align: center; }
.wine-grid { display: flex; justify-content: center; align-items: flex-start; gap: clamp(20px, 4.6vw, 77px); }
.wine-card { flex: 0 1 225px; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.wine-card__bottle { display: block; margin: 0 0 17px; line-height: 0; text-decoration: none; }
.wine-card__bottle img { display: block; width: auto; max-width: 100%; height: calc(min(100vw, 1658px) * 0.385); margin: 0 auto; object-fit: contain; }
.wine-card__name { margin: 0 0 10px; font-family: var(--fb-font-head); font-weight: 600; font-size: 24px; line-height: 1.05; letter-spacing: .3px; text-transform: uppercase; color: var(--fb-ink); }
.wine-card__notes { margin: 0; font-size: 16px; line-height: 20px; color: var(--fb-ink); }
.wine-card__accolade { margin: 0; font-weight: 700; font-size: 16px; line-height: 20px; color: var(--fb-ink); }
.wine-card__cta {
	margin-top: 18px; display: inline-flex; align-items: center; justify-content: center;
	width: 146px; height: 32px; background: var(--fb-red); color: #fff;
	font-family: var(--fb-font-nav); font-weight: 800; font-size: 14px;
	letter-spacing: .7px; text-transform: uppercase; text-decoration: none;
}
.wine-card--white .wine-card__cta { background: #ab642a; }       /* white-wine accent */
.wine-card__cta:hover { filter: brightness(.93); }

/* Disclaimer + Find Now (centered, below the grid) */
.wine-disclaimer { margin: 53px auto 0; max-width: 806px; font-size: 16px; line-height: 20px; color: var(--fb-ink); }
.wine-findnow { margin-top: 29px; }

@media (max-width: 900px) {
	/* OUR WINES mobile (Figma 419:463): single column, full-size cards, big
	   centered bottles. SAME font sizes as desktop — only the layout stacks. */
	.ourwines-hero__img--desktop { display: none; }
	.ourwines-hero__img--mobile  { display: block; }

	.ourwines-intro { max-width: 312px; padding: 51px 16px 0; }   /* heading 34px wraps to 2 lines */
	.ourwines-intro p { max-width: 280px; }                       /* 24px intro, ~9 lines */

	.wine-grid-section { padding: 48px 20px 62px; }
	.wine-grid { flex-direction: column; align-items: center; gap: 54px; }
	.wine-card { flex: none; width: 225px; max-width: 100%; }
	.wine-card__bottle { margin: 0 0 30px; }
	.wine-card__bottle img { height: clamp(440px, 170vw, 638px); }
	.wine-card__cta { margin-top: 20px; }

	.wine-disclaimer { margin: 58px auto 0; max-width: 317px; font-size: 16px; line-height: 20px; }
	.wine-findnow { margin-top: 21px; }
}

/* ============================================================
   WINE PDP (single-wine.php) — Figma 419:590
   Bottle (286×976, left) + info column (725, right), vertically centered.
   ============================================================ */
.pdp { max-width: var(--fb-container); margin: 0 auto; padding: 100px var(--fb-gutter); display: flex; align-items: center; justify-content: center; gap: clamp(48px, 9vw, 174px); }
.pdp__bottle { flex: 0 0 auto; line-height: 0; }
.pdp__bottle img { display: block; width: 286px; max-width: 100%; height: auto; }
.pdp__info { flex: 0 1 725px; min-width: 0; }
.pdp__title { margin: 0 0 20px; font-family: var(--fb-font-head); font-weight: 600; font-size: 34px; line-height: 35px; letter-spacing: .5px; text-transform: uppercase; color: var(--fb-ink); }
.pdp__row { margin: 0 0 20px; font-size: 24px; line-height: 35px; color: var(--fb-ink); }
.pdp__row strong { font-weight: 700; }

/* "+" disclosure — Viticulture & Winemaking Notes */
.pdp-accordion { margin: 0 0 20px; }
.pdp-accordion__summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; list-style: none; border-bottom: 1px solid #909091; font-weight: 700; font-size: 24px; line-height: 35px; color: var(--fb-ink); }
.pdp-accordion__summary::-webkit-details-marker { display: none; }
.pdp-accordion__summary::marker { content: ""; }
.pdp-accordion__icon { position: relative; flex: 0 0 15px; width: 15px; height: 15px; }
.pdp-accordion__icon::before, .pdp-accordion__icon::after { content: ""; position: absolute; background: var(--fb-ink); transition: opacity .2s ease; }
.pdp-accordion__icon::before { left: 0; top: 6.75px; width: 15px; height: 1.5px; }
.pdp-accordion__icon::after  { top: 0; left: 6.75px; width: 1.5px; height: 15px; }
.pdp-accordion[open] .pdp-accordion__icon::after { opacity: 0; }   /* + becomes − */
.pdp-accordion__content { padding-top: 20px; }
.pdp-accordion__content .pdp__row:last-child { margin-bottom: 0; }

/* Actions: Find Now (red) + All Wines (amber) */
.pdp__actions { display: flex; flex-wrap: wrap; gap: 110px; margin-top: 54px; }
a.btn-cta--amber { background: #ab642a; }
a.btn-cta--amber:hover { background: #9a5824; }

@media (max-width: 900px) {
	/* PDP mobile (Figma 419:690): centered bottle -> left-aligned copy -> stacked
	   centered buttons. The Viticulture/Winemaking "+" disclosure is NOT shown on
	   mobile (the design omits it). padding+max-width land text at x47, bottle at x94. */
	.pdp { flex-direction: column; align-items: center; padding: 46px 20px; gap: 41px; }
	.pdp__bottle img { width: clamp(150px, 50vw, 187px); }
	.pdp__info { flex: none; width: 100%; max-width: 280px; text-align: left; }
	.pdp-accordion { display: none; }
	.pdp__actions { flex-direction: column; align-items: center; gap: 40px; margin-top: 110px; }
}

/* ============================================================
   VINEYARDS page (Figma 419:336 + alternating regions)
   ============================================================ */
/* Hero rules are consolidated in the shared Hero section near the top. */

.vineyards-intro { max-width: 1190px; margin: 0 auto; padding: 53px 24px 0; text-align: center; }
.vineyards-intro :is(h1, h2, .wp-block-heading) { margin: 0 0 10px; font-family: var(--fb-font-head); font-weight: 600; font-size: 34px; line-height: 35px; letter-spacing: .5px; text-transform: uppercase; color: var(--fb-ink); }
.vineyards-intro p { margin: 0 auto; max-width: 1138px; font-size: 24px; line-height: 35px; color: var(--fb-ink); }

/* One region: 714 image + 559 text, vertically centered, alternating sides */
.fb-media-split { max-width: var(--fb-container); margin: 59px auto 0; display: flex; align-items: center; gap: clamp(40px, 5.7vw, 95px); padding: 0 clamp(40px, 11.1vw, 184px) 0 clamp(40px, 6.4vw, 106px); }
.fb-media-split--reverse { flex-direction: row-reverse; padding: 0 clamp(40px, 6.4vw, 106px) 0 clamp(40px, 11.1vw, 184px); }
.fb-media-split + .fb-media-split { margin-top: 53px; }
.fb-media-split:last-child { margin-bottom: 93px; }
.fb-media-split__media { flex: 0 1 714px; min-width: 0; margin: 0; line-height: 0; }
.fb-media-split__media figure { margin: 0; }
.fb-media-split__media img { display: block; width: 100%; height: auto; }
.fb-media-split__img--mobile { display: none; }   /* desktop shows the landscape crop */
.fb-media-split__body { flex: 0 1 559px; min-width: 0; text-align: center; }
.fb-media-split__body :is(h2, .wp-block-heading) { margin: 0 0 10px; font-family: var(--fb-font-head); font-weight: 600; font-size: 34px; line-height: 1.1; letter-spacing: .5px; text-transform: uppercase; color: var(--fb-ink); }
.fb-media-split__body p { margin: 0; font-size: 24px; line-height: 35px; color: var(--fb-ink); }

@media (max-width: 1100px) {
	/* Tablet: side-by-side gets too tight — stack each region (landscape image
	   full-width, centered copy below). Phones (≤900) refine this further below. */
	.vineyards-intro { max-width: 760px; padding-top: 44px; }
	.fb-media-split, .fb-media-split--reverse { flex-direction: column; gap: 30px; padding: 0 40px; max-width: 760px; margin: 50px auto 0; }
	.fb-media-split + .fb-media-split { margin-top: 50px; }
	.fb-media-split:last-child { margin-bottom: 64px; }
	.fb-media-split__media, .fb-media-split__body { flex: none; width: 100%; }
	.fb-media-split__body { max-width: 620px; margin: 0 auto; }
}

@media (max-width: 900px) {
	/* Vineyards mobile (Figma 419:324): full-bleed SQUARE image on top, centered
	   heading + copy below, regions stacked. SAME 34/24px type as desktop. */
	.vineyards-hero__img--desktop { display: none; }
	.vineyards-hero__img--mobile  { display: block; }

	.vineyards-intro { max-width: 280px; padding: 54px 0 0; }   /* keeps 34/24 from base */

	.fb-media-split, .fb-media-split--reverse { flex-direction: column; gap: 0; padding: 0; max-width: none; margin: 45px 0 0; }
	.fb-media-split + .fb-media-split { margin-top: 55px; }
	.fb-media-split:last-child { margin-bottom: 45px; }
	.fb-media-split__media { flex: none; width: 100%; }
	.fb-media-split__img--desktop { display: none; }
	.fb-media-split__img--mobile  { display: block; }
	.fb-media-split__body { flex: none; width: 100%; max-width: 280px; margin: 49px auto 0; }
}

/* ── Sitemap page ─────────────────────────────────────────────────────────── */
.fb-sitemap-wrapper {
	padding: 60px 80px 80px;
	max-width: 1200px;
	margin: 0 auto;
}

.fb-sitemap-title {
	font-family: var(--fb-font-nav);
	font-size: 42px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--fb-ink);
	letter-spacing: 1px;
	margin: 0 0 50px;
}

.fb-sitemap {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 40px 60px;
	max-width: 1000px;
}

.fb-sitemap-col__heading {
	font-family: var(--fb-font-nav);
	font-size: 18px;
	font-weight: 800;
	text-transform: uppercase;
	color: var(--fb-ink);
	letter-spacing: 1px;
	margin: 0 0 16px;
}

.fb-sitemap-col__list {
	list-style: disc;
	padding: 0 0 0 20px;
	margin: 0;
}

.fb-sitemap-col__list li {
	margin: 0 0 10px;
}

.fb-sitemap-col__list a {
	font-family: var(--fb-font-body);
	font-size: 16px;
	color: var(--fb-red);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.2s ease;
}

.fb-sitemap-col__list a:hover {
	color: var(--fb-red-dark);
}

@media (max-width: 600px) {
	.fb-sitemap {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.fb-sitemap-title {
		font-size: 32px;
		margin: 0 0 32px;
	}

	.fb-sitemap-wrapper {
		padding: 40px 24px 60px;
	}
}