/*
Theme Name: HyFibe
Theme URI: https://hyfibe.com.au/
Author: Milne AgriGroup (internal)
Description: Custom block theme for the HyFibe website. Every design section is a block pattern of core blocks; layout lives in assets/css/design.css (generated from the design) plus the hand-written rules below. No plugins required.
Version: 1.2.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: Proprietary
Text Domain: hyfibe
*/

/* ---------- base ---------- */
body { margin: 0; font-synthesis: none; position: relative; }
:where(.wp-site-blocks) :where(p, h1, h2, h3, h4, h5, h6, figure, blockquote) { margin: 0; }
body .wp-block-image { margin: 0; }
body .wp-block-image img { max-width: 100%; }
body .wp-block-image a { display: block; height: 100%; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* skip link (design: .hf-skip) */
.hf-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #FEFBF7; color: #502D1E; padding: 12px 16px; font-size: 15px; font-weight: 500; }
.hf-skip:focus { left: 16px; }

/* ---------- header sits over the page hero (the design puts it inside the hero) ---------- */
:root { --hf-header-h: 243px; }
@media (max-width: 700px) { :root { --hf-header-h: 331px; } }
.hf-site-header { position: absolute; top: 0; left: 0; right: 0; z-index: 5; }
body .hf-hero { padding-top: var(--hf-header-h); }
/* a page that does not start with a hero still gets a readable header */
body:not(:has(.hf-hero)) .hf-site-header { position: relative; background: var(--wp--preset--color--clay); }

/* ---------- navigation (core/navigation styled to the design) ---------- */
body .hf-nav { gap: 0; }
body .hf-nav .wp-block-navigation__container { gap: 0; margin: 0; }
body .hf-nav .wp-block-navigation-item__content:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
body .hf-nav-legal .wp-block-navigation-item { display: flex; align-items: center; gap: 4px; }
body .hf-nav-legal .wp-block-navigation-item + .wp-block-navigation-item::before { content: "·"; font-size: 13px; color: var(--wp--preset--color--mushroom); }

/* ---------- links rendered as paragraphs (design: styled <a> elements) ---------- */
p.hf-link { display: contents; }
.hf-card { position: relative; }
.hf-card-link { color: inherit; text-decoration: inherit; text-underline-offset: inherit; }
.hf-card-link::after { content: ""; position: absolute; inset: 0; }
.hf-card-link:focus-visible { outline: none; }
.hf-card:focus-within { outline: 2px solid var(--wp--preset--color--bark); outline-offset: 4px; }

/* ---------- design helmet rules ---------- */
/* canvas a1d2 mobile rules (the canvas calls the hero's inner box .hf-hero; here it is .hf-herobody, see build_theme.py classes()) */
@media (max-width: 600px) {
	.hf-herobody { padding-top: 88px !important; padding-bottom: 80px !important; }
	body.home .hf-herobody { padding-top: 72px !important; }
	.hf-herosec { min-height: 0 !important; }
	.hf-capwrap { left: 16px !important; right: 16px !important; bottom: 72px !important; }
	.hf-cap { padding: 14px 18px !important; gap: 2px !important; }
	.hf-cap p { font-size: 17px !important; }
	.hf-pellet { font-size: 22px !important; letter-spacing: 0.06em !important; line-height: 1.4 !important; }
	.hf-pellet br { display: none; }
	.hf-pl { display: block; padding: 12px 0; border-top: 1px solid rgba(242, 218, 178, 0.3); }
	.hf-cards { gap: 56px !important; }
	.hf-pent { transform: scale(0.72); }
	.hf-stmt { text-align: center !important; }
}
img.hf-sepia, .hf-sepia img { filter: url(#hf-sepia); }   /* on the <img> (as in the design), so its border-radius clips first */
.hf-wins { display: grid; grid-template-columns: minmax(0, 1fr) 360px minmax(0, 1fr); grid-template-areas: "a p b" "c p d" ". e ."; gap: 48px 56px; align-items: center; }
@media (max-width: 900px) { .hf-wins { grid-template-columns: minmax(0, 1fr); grid-template-areas: "p" "a" "b" "c" "d" "e"; } }
@media (max-width: 760px) {
	.hf-flow { flex-direction: column !important; }
	.hf-arr { transform: rotate(90deg); }
	.hf-fork-h { display: none !important; }
	.hf-fork-v { display: block !important; }
	.hf-pair { flex-direction: row !important; gap: 16px !important; width: 100%; }
}

/* ---------- carousel (Home) ---------- */
body .hf-carousel { position: relative; overflow: hidden; background: var(--wp--preset--color--bark-deep); height: 800px; }
body .hf-carousel .hf-slides, body .hf-carousel .hf-slide { position: absolute; inset: 0; }
body .hf-carousel .hf-slide-img { position: absolute; inset: 0; }
body .hf-carousel .hf-slide-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body .hf-carousel:not(.is-js) .hf-slide:not(:first-child) { display: none; }
body .hf-carousel.is-js .hf-slide:not(.is-active) { visibility: hidden; }
body .hf-slide .hf-slide-badge.hf-slide-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); pointer-events: none; }
body .hf-slide .hf-slide-caption { pointer-events: none; }
.hf-arrow { position: absolute; top: 50%; margin-top: -28px; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: rgba(80, 45, 30, 0.82); box-shadow: 0 2px 12px rgba(46, 25, 16, 0.3); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.hf-arrow--prev { left: 24px; }
.hf-arrow--next { right: 24px; }
.hf-dots { position: absolute; left: 0; right: 0; bottom: 24px; display: flex; justify-content: center; z-index: 2; }
.hf-dot { width: 28px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.hf-dot span { display: block; width: 7px; height: 7px; border-radius: 50%; background: rgba(254, 251, 247, 0.6); }
.hf-dot[aria-current="true"] span { width: 10px; height: 10px; background: #FEFBF7; }
.hf-arrow:focus-visible, .hf-dot:focus-visible { outline: 2px solid #FEFBF7; outline-offset: 3px; }

/* ---------- cookie consent banner (canvas 4d55; layout classes in design.css, behaviour in hyfibe.js) ---------- */
body .hf-consent[hidden] { display: none !important; }
.hf-consent-btn:focus-visible { outline: 2px solid var(--wp--preset--color--wheat); outline-offset: 3px; }
.hf-consent a:focus-visible { outline: 2px solid var(--wp--preset--color--wheat); outline-offset: 2px; }
@media print { .hf-consent { display: none !important; } }

/* ---------- contact form ---------- */
.hf-form input, .hf-form textarea { box-sizing: border-box; width: 100%; }
.hf-form input:focus-visible, .hf-form textarea:focus-visible, .hf-form button:focus-visible { outline: 2px solid var(--wp--preset--color--bark); outline-offset: 2px; }
.hf-form [aria-invalid="true"] { border-color: #9B2C1F !important; }
.hf-field-error { margin: 0; font-size: 14px; color: #8A1F12; }
.hf-form-status { margin: 0; font-size: 15px; line-height: 1.5; }
.hf-form-status.is-error { color: #8A1F12; }

/* ---------- simple pages (404, posts) ---------- */
body .hf-simple { max-width: 760px; margin: 0 auto; padding: 56px 24px 96px; display: flex; flex-direction: column; gap: 16px; }

/* ---------- print (design: Privacy / Terms) ---------- */
@media print {
	.hf-skip, .hf-site-header, .hf-site-footer, .hf-hero > figure { display: none !important; }
	section, main, body, div { background: #fff !important; }
	h1 { font-size: 24pt !important; color: #000 !important; }
	#main { max-width: none !important; padding: 0 !important; }
	#main p, #main li { color: #000 !important; font-size: 11pt !important; orphans: 3; widows: 3; }
	#main h2 { color: #000 !important; font-size: 13pt !important; break-after: avoid; page-break-after: avoid; }
	#main a { color: #000 !important; }
}

/* ---------- Home: blend the hero into the sunset-cloud photo band (2026-10-29 seam fix) ----------
   The hero's bottom edge (cream on the left, orange on the right) met the photo's top edge with no
   transition, so it read as a hard line. Both sides now fade to the same flat sunset peach. */
body.home .hf-hero:has(+ .hf-main > .hf-64caeac:first-child)::after,
body.home .hf-hero + .hf-main > .hf-64caeac:first-child::before {
	content: ""; position: absolute; left: 0; right: 0; height: clamp(140px, 16vw, 260px);
	pointer-events: none; z-index: 1;
}
body.home .hf-hero:has(+ .hf-main > .hf-64caeac:first-child)::after { bottom: 0; background: linear-gradient(to bottom, rgba(240,205,165,0), #F0CDA5); }
body.home .hf-hero + .hf-main > .hf-64caeac:first-child { position: relative; }
body.home .hf-hero + .hf-main > .hf-64caeac:first-child::before { top: 0; background: linear-gradient(to bottom, #F0CDA5, rgba(240,205,165,0)); }