/* ==========================================================================
   VMGAA theme — all front-end styles

   Spacing system
   --------------
   Every margin, padding and gap uses the scale below (4px base), so spacing
   stays consistent across the site:

     --sp-1  4px    hairline gaps (tags, icons)
     --sp-2  8px    tight groups (chips, label → field)
     --sp-3  12px   related items
     --sp-4  16px   default gap
     --sp-5  24px   between groups
     --sp-6  32px   between blocks
     --sp-7  48px   major separation inside a section
     --sp-8  64px   large separation
     --section      vertical padding of full sections (56px → 104px)
     --gutter       side padding (20px → 40px)
   ========================================================================== */

/* Fonts (self-hosted Poppins, Latin subset) */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/poppins-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/poppins-latin-700-normal.woff2) format("woff2"); }

:root {
	/* Color */
	--gold: #f1c232;
	--gold-dark: #d9a916;
	--peach: #fda085;
	--ink: #121315;
	--text: #1b1f26;
	--muted: #4a4f57;
	--line: #e3e4e6;
	--white: #fff;
	--late: #ffb4a2;
	--error: #b3261e;
	--overlay: rgba(18, 19, 21, .55);
	--panel: rgba(18, 19, 21, .66);

	/* Spacing */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;
	--section: clamp(56px, 7vw, 104px);
	--section-sm: clamp(48px, 5.5vw, 80px);
	--gutter: clamp(20px, 4vw, 40px);

	/* Layout */
	--container: 1280px;
	--measure: 760px;            /* comfortable reading width for page text */
	--header-h: 88px;

	/* Type */
	--font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--radius: 4px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + var(--sp-5)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }
body { margin: 0; font-family: var(--font); font-size: 18px; font-weight: 300; line-height: 1.65; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
@media (max-width: 600px) { :root { --header-h: 72px; } body { font-size: 17px; } }
body:has(dialog[open]) { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: .18em; }
a:hover { color: var(--gold-dark); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

h1, h2, h3, h4, h5, h6 { font-family: var(--font); color: var(--ink); line-height: 1.2; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8125rem); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.625rem); font-weight: 600; letter-spacing: -.01em; }
h3 { font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem); font-weight: 500; }
h4 { font-size: 1.25rem; font-weight: 600; }
p, ul, ol { margin: 0 0 1.25em; }
p { text-wrap: pretty; }
strong, b { font-weight: 600; }

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--sp-4); top: -100px; z-index: 1000; background: var(--gold); color: var(--ink); padding: var(--sp-3) var(--sp-4); font-weight: 600; }
.skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   Buttons (one size system: default 52px tall, small 44px)
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 52px; padding: 0 var(--sp-6); border: 1.5px solid transparent; border-radius: 2px; font: 600 14px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .2s, color .2s, border-color .2s, transform .2s; }
.btn:hover { transform: translateY(-1px); }
.btn--gold { background: var(--gold); color: var(--white); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold-dark); border-color: var(--gold-dark); color: var(--white); }
.btn--outlined-white { border-color: var(--white); }
.btn--light { background: var(--white); color: var(--ink); border-color: var(--gold); }
.btn--light:hover { background: var(--gold); color: var(--ink); }
.btn--outline { background: transparent; color: var(--ink); border-color: var(--gold); }
.btn--outline:hover { background: var(--gold); color: var(--ink); }
.btn--ghost { background: transparent; color: var(--white); border-color: var(--gold); }
.btn--ghost:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.btn--small { min-height: 44px; padding: 0 var(--sp-5); font-size: 12.5px; }
.btn--block { width: 100%; }

/* Dark text on gold where the button is the main action, for readability. */
.cta-band .btn--gold, .contact-form .btn--gold, .greet .btn--gold { color: var(--ink); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header { position: fixed; top: var(--wp-admin--admin-bar--height, 0px); left: 0; right: 0; z-index: 50; background: var(--panel); color: var(--white); transition: background-color .25s, box-shadow .25s; }
.site-header.is-scrolled { background: rgba(18, 19, 21, .96); box-shadow: 0 6px 24px rgba(0, 0, 0, .25); }
@supports (backdrop-filter: blur(8px)) { .site-header.is-scrolled { background: rgba(18, 19, 21, .85); backdrop-filter: blur(8px); } }
@media (max-width: 600px) { .site-header { top: 0; } body.admin-bar .site-header { top: var(--wp-admin--admin-bar--height, 0px); } }

/* Same width and side padding as page content, so the logo lines up with everything below. */
.header-inner { display: flex; align-items: center; gap: var(--sp-5); min-height: 88px; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.brand { order: 0; margin-right: auto; min-width: 0; font-size: clamp(1.125rem, .95rem + .8vw, 1.5rem); font-weight: 700; line-height: 1.2; color: var(--white); text-decoration: none; }
.brand:hover { color: var(--white); }

.primary-nav { order: 1; }
.primary-nav .menu, .primary-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.primary-nav a { display: block; color: var(--white); text-decoration: none; font-size: 14.5px; font-weight: 400; line-height: 1.3; }
.primary-nav a:hover, .primary-nav .current-menu-item > a, .primary-nav .current-menu-ancestor > a { color: var(--gold); }
.submenu-toggle { display: inline-grid; place-items: center; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; }
.submenu-toggle svg { transition: transform .2s; }
.submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Contact Us as a button, always last so the main action ends the menu */
.primary-nav .menu-item--cta { order: 10; }
.primary-nav .menu-item--cta > a { background: var(--gold); color: var(--ink); font-weight: 600; border-radius: 2px; transition: background-color .2s; }
.primary-nav .menu-item--cta > a:hover, .primary-nav .menu-item--cta.current-menu-item > a { background: var(--white); color: var(--ink); }

.lang-switch { order: 2; display: flex; align-items: center; gap: var(--sp-2); font-size: 13px; font-weight: 500; letter-spacing: .06em; color: rgba(255, 255, 255, .45); }
.lang-switch a { color: rgba(255, 255, 255, .8); text-decoration: none; padding: var(--sp-2) var(--sp-1); }
.lang-switch a:hover, .lang-switch a[aria-current] { color: var(--gold); }

.nav-toggle { order: 3; display: none; background: none; border: 0; color: var(--white); padding: var(--sp-2); margin-right: calc(var(--sp-2) * -1); cursor: pointer; }
.nav-toggle .icon-close { display: none; }

/* Desktop menu */
@media (min-width: 1320px) {
	.brand { white-space: nowrap; flex: none; font-size: 1.375rem; }
	.primary-nav .menu { display: flex; align-items: center; gap: 22px; }
	.primary-nav .menu > li > a { font-size: 14px; }
	.primary-nav .menu > li { position: relative; display: flex; align-items: center; gap: var(--sp-1); }
	.primary-nav .menu > li > a { white-space: nowrap; padding: var(--sp-5) 0; }
	.primary-nav .menu > .menu-item--cta > a { padding: var(--sp-3) 20px; }
	.primary-nav .submenu-toggle { width: 24px; height: 24px; }
	.primary-nav .sub-menu { position: absolute; top: 100%; left: calc(var(--sp-5) * -1); min-width: 300px; padding: var(--sp-2) 0; background: var(--white); box-shadow: 0 16px 40px rgba(0, 0, 0, .18); border-top: 3px solid var(--gold); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s, visibility .15s; }
	.primary-nav li:hover > .sub-menu, .primary-nav li.is-open > .sub-menu { opacity: 1; visibility: visible; transform: none; }
	.primary-nav li:hover > .submenu-toggle svg { transform: rotate(180deg); }
	.primary-nav .sub-menu a { color: var(--ink); padding: var(--sp-3) var(--sp-5); font-size: 14.5px; }
	.primary-nav .sub-menu a:hover { background: #faf6e8; color: var(--ink); }
	.primary-nav .sub-menu .current-menu-item > a { color: var(--ink); font-weight: 600; box-shadow: inset 3px 0 0 var(--gold); }
	.lang-switch { padding-left: var(--sp-5); border-left: 1px solid rgba(255, 255, 255, .2); }
}

/* Mobile menu */
@media (max-width: 1319.98px) {
	.nav-toggle { display: block; }
	.primary-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100dvh - var(--header-h)); overflow-y: auto; overscroll-behavior: contain; background: var(--ink); padding: var(--sp-2) var(--gutter) var(--sp-6); box-shadow: 0 16px 32px rgba(0, 0, 0, .3); }
	.site-header.is-open .primary-nav { display: block; }
	.site-header.is-open .icon-open { display: none; }
	.site-header.is-open .icon-close { display: block; }
	.primary-nav .menu { display: flex; flex-direction: column; max-width: 640px; margin-inline: auto; }
	.primary-nav .menu > li { display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, .08); }
	.primary-nav .menu > li > a { flex: 1; padding: var(--sp-4) 0; font-size: 17px; }
	.primary-nav .submenu-toggle { width: 48px; height: 48px; margin-right: calc(var(--sp-3) * -1); color: rgba(255, 255, 255, .8); }
	.primary-nav .sub-menu { display: none; flex-basis: 100%; padding: 0 0 var(--sp-3); }
	.primary-nav li.is-open > .sub-menu { display: block; }
	.primary-nav .sub-menu a { padding: var(--sp-3) 0 var(--sp-3) var(--sp-4); font-size: 15.5px; color: rgba(255, 255, 255, .8); border-left: 2px solid rgba(255, 255, 255, .12); }
	.primary-nav .sub-menu .current-menu-item > a { color: var(--gold); border-left-color: var(--gold); }
	.primary-nav .menu > .menu-item--cta { border-bottom: 0; padding-top: var(--sp-5); }
	.primary-nav .menu > .menu-item--cta > a { flex: 1; text-align: center; padding: var(--sp-4); font-size: 16px; }
}
@media (max-width: 600px) {
	.header-inner { min-height: 72px; gap: var(--sp-4); }
	.lang-switch { font-size: 12.5px; }
}

/* --------------------------------------------------------------------------
   Hero photos (shared)
   -------------------------------------------------------------------------- */
.home-hero, .page-hero, .services { position: relative; isolation: isolate; overflow: hidden; background: var(--ink); }
.hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
/* Parallax: the photo is a bit taller than its section and drifts slower than the page (see main.js). */
.home-hero > .hero-bg, .page-hero > .hero-bg { inset: auto 0; top: -10%; height: 120%; transform: translate3d(0, var(--py, 0px), 0) scale(var(--hs, 1)); will-change: transform; }
/* Services photo: wider and taller than its section so it can drift left (and a little down) without showing edges. */
.services > .hero-bg { inset: auto; top: -8%; left: 0; width: 112%; max-width: none; height: 116%; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; }
.home-hero::before, .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--overlay); }

/* Homepage hero, classic version */
.home-hero { min-height: max(560px, min(100svh, 900px)); display: flex; align-items: center; padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-8); }
.home-hero__inner { display: flex; flex-direction: column; align-items: center; text-align: center; }
.home-hero__logo { width: min(300px, 70vw); height: auto; }
.home-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-4) var(--sp-6); margin-top: var(--sp-7); }
@media (max-width: 520px) { .home-hero__actions { flex-direction: column; align-self: stretch; } }

/* Inner page header */
.page-hero { padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-7); text-align: center; }
.page-hero::before { background: linear-gradient(0deg, rgba(161, 140, 209, .28), rgba(251, 194, 235, .12)), var(--overlay); }
.page-title { max-width: 24ch; margin: 0 auto; color: var(--gold); }
@media (max-width: 600px) { .page-hero { padding: calc(var(--header-h) + var(--sp-6)) 0 var(--sp-6); } }

/* --------------------------------------------------------------------------
   Homepage services
   -------------------------------------------------------------------------- */
.services { padding: var(--section) 0; }
.services__grid { display: grid; grid-template-columns: 40fr 30fr 30fr; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.services__intro { display: flex; align-items: center; padding: var(--sp-7); background: linear-gradient(130deg, var(--gold) 0%, var(--peach) 100%); }
.services__intro h2 { margin: 0; color: var(--white); font-size: clamp(2rem, 1.3rem + 2.6vw, 3.375rem); line-height: 1.1; }
.services__card { display: flex; flex-direction: column; padding: var(--sp-7) var(--sp-6); background: var(--panel); color: var(--white); }
.services__card + .services__card { border-left: 1px solid rgba(255, 255, 255, .08); }
.services__card h3 { margin: 0 0 var(--sp-5); color: var(--white); font-size: 21px; font-weight: 600; line-height: 1.35; }
.services__card ul { list-style: none; padding: 0; margin: 0 0 var(--sp-6); font-size: 18px; line-height: 1.45; }
.services__card li { padding: var(--sp-2) 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.services__card li:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.services__card a:not(.btn) { color: var(--white); text-decoration: none; }
.services__card a:not(.btn):hover { color: var(--gold); }
.services__card .btn { margin-top: auto; align-self: flex-start; }

@media (max-width: 1023.98px) {
	.services { padding: 0; }
	.services__grid { grid-template-columns: 1fr; padding-inline: 0; }
	.services__intro { padding: var(--sp-7) var(--gutter); }
	.services__card { padding: var(--sp-7) var(--gutter); }
	.services__card + .services__card { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
	.services__card ul { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Page content (core blocks)
   Text sits in a centered reading column; media blocks may run wider.
   -------------------------------------------------------------------------- */
.site-main { display: block; }
.entry-content { padding-top: var(--section-sm); padding-bottom: var(--section); }
.entry-content > * { max-width: var(--measure); margin-left: auto; margin-right: auto; }
.entry-content > .wp-block-media-text,
.entry-content > .alignwide,
.entry-content > .wp-block-columns,
.entry-content > .wp-block-gallery,
.entry-content > .post-list { max-width: 1080px; }
.entry-content > .alignfull { max-width: 1080px; } /* stays inside the page column */
.entry-content > *:first-child { margin-top: 0; }
.entry-content > *:last-child { margin-bottom: 0; }

.entry-content h2 { margin: 1.6em auto .55em; }
.entry-content h3 { margin: 1.5em auto .5em; }
.entry-content h4 { margin: 1.4em auto .5em; }
.entry-content h2 + h3 { margin-top: .25em; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; margin-bottom: 1.5em; }
.entry-content li { margin-bottom: .45em; padding-left: .2em; }
.entry-content li::marker { color: var(--gold-dark); }
.entry-content a { color: var(--ink); text-decoration-color: var(--gold); text-decoration-thickness: 2px; }
.entry-content a:hover { color: var(--gold-dark); }
.entry-content p:empty { display: none; }
.has-x-large-font-size { font-size: clamp(2rem, 1.4rem + 2.2vw, 2.8125rem) !important; }
.has-large-font-size { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) !important; }

.entry-content .wp-block-media-text { margin-top: var(--sp-8); margin-bottom: var(--sp-8); gap: 0; align-items: center; }
.entry-content .wp-block-media-text__content { padding: 0 0 0 clamp(var(--sp-5), 5vw, var(--sp-8)); }
.entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: 0 clamp(var(--sp-5), 5vw, var(--sp-8)) 0 0; }
.entry-content .wp-block-media-text__content > :first-child { margin-top: 0; }
.entry-content .wp-block-media-text__content > :last-child { margin-bottom: 0; }
.entry-content .wp-block-media-text img { display: block; border-radius: var(--radius); }
@media (max-width: 600px) {
	.entry-content .wp-block-media-text { margin-top: var(--sp-7); margin-bottom: var(--sp-7); }
	.entry-content .wp-block-media-text__content,
	.entry-content .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content { padding: var(--sp-5) 0 0; }
}
.wp-block-image img { height: auto; }
figure { margin: 0 0 1.5em; }

.post-list { display: grid; gap: var(--sp-7); }
.post-card h2 { font-size: 1.625rem; margin: 0 0 var(--sp-2); }
.post-card h2 a { text-decoration: none; }
.post-meta { color: var(--muted); font-size: .9rem; margin-bottom: var(--sp-3); }

/* Core button block */
.wp-block-buttons { gap: var(--sp-4); margin: var(--sp-6) auto; }
.wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 var(--sp-6); background: var(--gold); color: var(--ink); border-radius: 2px; font: 600 14px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; }
.wp-block-button__link:hover { background: var(--gold-dark); color: var(--ink); }

/* --------------------------------------------------------------------------
   Call to action band
   -------------------------------------------------------------------------- */
.cta-band { background: var(--ink); color: var(--white); padding: var(--section-sm) 0; }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6) var(--sp-8); }
.cta-band h2 { margin: 0 0 var(--sp-3); color: var(--white); font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem); }
.cta-band p { margin: 0; color: rgba(255, 255, 255, .85); max-width: 52ch; }
.cta-band .cta-band__trust { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-5); font-size: 14px; font-weight: 400; color: var(--gold); max-width: none; }
.cta-band__trust svg { flex: none; }
.cta-band .btn { flex: none; min-height: 56px; padding: 0 var(--sp-7); font-size: 15px; }
@media (max-width: 767.98px) {
	.cta-band__inner { flex-direction: column; align-items: stretch; }
	.cta-band .btn { width: 100%; padding: 0 var(--sp-5); }
	.cta-band .cta-band__trust { align-items: flex-start; }
	.cta-band__trust svg { margin-top: 2px; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--gold); padding: var(--section-sm) 0 var(--sp-7); text-align: center; color: var(--ink); }
.footer-brand { font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem); font-weight: 600; color: var(--ink); text-decoration: none; }
.footer-brand:hover { color: var(--ink); }
.footer-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-6) var(--sp-8); max-width: 1000px; margin: var(--sp-6) auto 0; padding-top: var(--sp-6); border-top: 1px solid rgba(18, 19, 21, .2); text-align: left; }
.footer-nav__title { margin: 0 0 var(--sp-3); font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); line-height: 1.4; }
.footer-nav__title a { text-decoration: none; color: inherit; }
.footer-nav__title a:hover { text-decoration: underline; color: inherit; }
.footer-nav ul { list-style: none; margin: 0; padding: 0; }
.footer-nav li { margin: 0; }
.footer-nav li a { display: inline-block; padding: 6px 0; font-size: 15px; font-weight: 400; line-height: 1.4; color: var(--ink); text-decoration: none; }
.footer-nav li a:hover { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; }
@media (max-width: 767.98px) {
	.footer-nav { grid-template-columns: 1fr; gap: var(--sp-6); text-align: center; }
	.footer-nav li a { padding: var(--sp-2) 0; }
}

/* --------------------------------------------------------------------------
   Contact dialog + form
   -------------------------------------------------------------------------- */
.contact-dialog { width: min(640px, calc(100% - var(--sp-5))); max-height: calc(100dvh - var(--sp-5)); padding: 0; border: 0; border-radius: var(--radius); background: var(--white); color: var(--text); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); overscroll-behavior: contain; }
.contact-dialog::backdrop { background: rgba(18, 19, 21, .7); }
.contact-dialog[open] { animation: dialog-in .2s ease-out; }
@keyframes dialog-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.contact-dialog__panel { position: relative; padding: clamp(var(--sp-5), 5vw, var(--sp-7)); border-top: 5px solid var(--gold); }
.contact-dialog h2 { margin: 0 0 var(--sp-2); padding-right: var(--sp-7); font-size: clamp(1.625rem, 1.3rem + 1.2vw, 2.125rem); }
.contact-dialog__intro { margin: 0 0 var(--sp-6); color: var(--muted); font-size: 16px; }
.contact-dialog__close { position: absolute; top: var(--sp-4); right: var(--sp-4); display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; }
.contact-dialog__close:hover { background: #f2f2f3; }

.contact-form .field { margin: 0 0 var(--sp-5); }
.contact-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--sp-5); }
@media (max-width: 520px) { .contact-form .field-row { grid-template-columns: 1fr; } }
.contact-form label { display: block; margin-bottom: var(--sp-2); font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); }
.contact-form .req { color: var(--error); }
.contact-form input, .contact-form textarea { width: 100%; min-height: 48px; padding: var(--sp-3) var(--sp-4); border: 1px solid #c9cbcf; border-radius: var(--radius); background: var(--white); font: 400 16px/1.4 var(--font); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.contact-form textarea { resize: vertical; min-height: 128px; }
.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--gold-dark); box-shadow: 0 0 0 3px rgba(241, 194, 50, .35); }
.contact-form [aria-invalid="true"] { border-color: var(--error); }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form .btn { min-height: 56px; margin-top: var(--sp-2); font-size: 15px; }
.contact-form .btn[disabled] { opacity: .65; cursor: wait; transform: none; }
.form-status { margin: 0 0 var(--sp-4); font-size: 15px; font-weight: 400; }
.form-status:empty { display: none; }
.form-status.is-error { color: var(--error); }
.contact-form__privacy { margin: var(--sp-4) 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.contact-success { padding: var(--sp-5) 0 var(--sp-2); text-align: center; }
.contact-success svg { margin-bottom: var(--sp-4); color: #2e7d32; }
.contact-success p { margin-bottom: var(--sp-6); font-size: 18px; }
/* Inline form on the Spanish contact page */
.entry-content .contact-form { margin-top: var(--sp-6); }

/* ==========================================================================
   Homepage greeting hero
   ========================================================================== */
.home-hero--greeting { align-items: center; min-height: max(680px, min(100svh, 980px)); padding: calc(var(--header-h) + var(--sp-8)) 0 var(--sp-8); }
/* Background by time of day. One photo: each part of the day gets its own tint.
   Separate photos (Customizer): they cross-fade, with a light shared overlay. */
.home-hero--greeting > .hero-bg { --hs: 1.08; opacity: 0; filter: blur(3px) var(--tone, none); transition: opacity 1.2s ease, filter 1.2s ease; }
.home-hero--greeting > .hero-bg.is-active { opacity: 1; }
.home-hero--greeting::before { transition: background 1.2s ease; background: linear-gradient(180deg, rgba(12, 12, 22, .55) 0%, rgba(12, 12, 22, .7) 100%); }

/* Morning: warmer and lighter, a sunrise glow along the top */
.home-hero--greeting[data-daypart="morning"] { --tone: hue-rotate(-28deg) saturate(1.1) brightness(1.12); }
.home-hero--greeting[data-daypart="morning"]::before { background: radial-gradient(120% 70% at 70% 0%, rgba(255, 176, 102, .28) 0%, rgba(255, 176, 102, 0) 60%), linear-gradient(180deg, rgba(28, 22, 34, .38) 0%, rgba(20, 16, 28, .62) 100%); }

/* Afternoon: clearer, cooler daylight */
.home-hero--greeting[data-daypart="afternoon"] { --tone: hue-rotate(-62deg) saturate(.85) brightness(1.18); }
.home-hero--greeting[data-daypart="afternoon"]::before { background: linear-gradient(180deg, rgba(14, 28, 48, .42) 0%, rgba(10, 18, 32, .66) 100%); }

/* Evening: the original dusk purple, deeper */
.home-hero--greeting[data-daypart="evening"] { --tone: saturate(1) brightness(.92); }
.home-hero--greeting[data-daypart="evening"]::before { background: linear-gradient(180deg, rgba(12, 10, 26, .58) 0%, rgba(8, 8, 18, .74) 100%); }

/* With separate photos, keep each photo's own colors */
.home-hero--greeting.has-daypart-photos { --tone: none; }
.home-hero--greeting.has-daypart-photos::before { background: linear-gradient(180deg, rgba(12, 12, 22, .45) 0%, rgba(12, 12, 22, .66) 100%); }

.greet { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(var(--sp-7), 6vw, 96px); align-items: center; color: var(--white); }
.greet__hello { margin: 0; font-size: clamp(2.75rem, 1.6rem + 4.2vw, 5rem); font-weight: 600; line-height: 1.02; letter-spacing: -.02em; color: var(--white); }
.greet__clock { margin: var(--sp-4) 0 0; min-height: 1.6em; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 300; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; }

.greet__cta { max-width: 560px; margin-top: var(--sp-7); padding-top: var(--sp-6); border-top: 1px solid rgba(255, 255, 255, .25); }
.greet__eyebrow { margin: 0 0 var(--sp-3); font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); line-height: 1.5; }
.greet__cta.is-late .greet__eyebrow { color: var(--late); }
.greet__head { margin: 0 0 var(--sp-3); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem); font-weight: 600; line-height: 1.2; color: var(--white); }
.greet__text { margin: 0; font-size: 17px; color: rgba(255, 255, 255, .85); }
.greet__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-6); }
.greet__actions [hidden] { display: none; }

/* "On the horizon": thin borders, no background */
.horizon { padding: clamp(var(--sp-5), 2.6vw, var(--sp-6)); border: 1px solid rgba(255, 255, 255, .35); border-radius: var(--radius); background: transparent; }
.horizon[hidden] { display: none; }
.horizon__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-5); }
.horizon__title { margin: 0; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .9); }
.horizon__filters { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip { min-height: 32px; padding: 0 var(--sp-3); font: 400 12.5px/1 var(--font); color: rgba(255, 255, 255, .85); background: transparent; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; cursor: pointer; transition: border-color .15s, color .15s; }
.chip:hover { border-color: rgba(255, 255, 255, .7); color: var(--white); }
.chip[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }

.horizon__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.deadline { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5) var(--sp-4) var(--sp-4); border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--radius); background: transparent; transition: border-color .15s; }
.deadline:hover { border-color: rgba(255, 255, 255, .6); }
.deadline.is-today { border-color: var(--gold); }
.deadline.is-late { border-color: rgba(255, 180, 162, .7); }
.deadline__date { display: grid; justify-items: center; gap: 2px; padding-right: var(--sp-4); border-right: 1px solid rgba(255, 255, 255, .2); line-height: 1.05; }
.deadline__mon { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.deadline__day { font-size: 24px; font-weight: 600; color: var(--white); }
.deadline__wd { font-size: 11px; color: rgba(255, 255, 255, .65); text-transform: capitalize; }
.deadline__title { margin: 0; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--white); }
.deadline__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-1) var(--sp-2); margin: 6px 0 0; font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.deadline__when { font-weight: 500; color: rgba(255, 255, 255, .9); }
.deadline.is-late .deadline__when { color: var(--late); }
.deadline.is-today .deadline__when { color: var(--gold); }
.deadline__tag { padding: 1px var(--sp-2); border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; font-size: 11.5px; }
.deadline__link { font-size: 13px; font-weight: 500; color: var(--gold); text-decoration: none; white-space: nowrap; }
.deadline__link:hover { color: var(--white); text-decoration: underline; }
.deadline.is-late .deadline__link { color: var(--late); }
.horizon__empty { padding: var(--sp-4); border: 1px dashed rgba(255, 255, 255, .28); border-radius: var(--radius); font-size: 14px; color: rgba(255, 255, 255, .8); }
.horizon__note { margin: var(--sp-5) 0 0; font-size: 12px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

@media (max-width: 999.98px) {
	.home-hero--greeting { min-height: 0; }
	.greet { grid-template-columns: 1fr; gap: var(--sp-7); }
	.greet__cta { max-width: none; }
}
@media (max-width: 600px) {
	.home-hero--greeting { padding: calc(var(--header-h) + var(--sp-7)) 0 var(--sp-7); }
	.greet__cta { margin-top: var(--sp-6); padding-top: var(--sp-5); }
	.greet__actions .btn { flex: 1 1 100%; }
	.horizon { padding: var(--sp-5) var(--sp-4); }
	.deadline { grid-template-columns: 48px minmax(0, 1fr); gap: var(--sp-3) var(--sp-4); padding: var(--sp-4); }
	.deadline__date { padding-right: var(--sp-3); }
	.deadline__link { grid-column: 2; justify-self: start; }
}

/* ==========================================================================
   Preview settings (admins only): cog next to EN | ES with a dropdown
   ========================================================================== */
.header-inner:has(.preview-menu) { gap: var(--sp-4); }
.preview-menu { order: 2; position: relative; display: flex; }
.preview-menu__cog { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; background: transparent; color: rgba(255, 255, 255, .85); cursor: pointer; transition: border-color .15s, color .15s, transform .3s; }
.preview-menu__cog:hover { border-color: var(--gold); color: var(--gold); }
.preview-menu__cog[aria-expanded="true"] { border-color: var(--gold); color: var(--gold); transform: rotate(45deg); }

.preview-menu__panel { position: absolute; top: calc(100% + var(--sp-3)); right: 0; z-index: 70; width: 300px; max-width: calc(100vw - var(--sp-6)); max-height: calc(100dvh - var(--header-h) - var(--sp-6)); overflow-y: auto; display: grid; gap: var(--sp-2); padding: var(--sp-4); font: 400 13px/1.4 var(--font); color: var(--ink); background: var(--white); border-top: 3px solid var(--gold); border-radius: 0 0 6px 6px; box-shadow: 0 16px 40px rgba(0, 0, 0, .3); }
.preview-menu__panel[hidden] { display: none; }
@media (max-width: 600px) { .preview-menu__panel { position: fixed; top: var(--header-h); left: var(--sp-4); right: var(--sp-4); width: auto; max-width: none; } }

.preview-panel__label { margin: var(--sp-2) 0 0; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.preview-panel__label:first-child { margin-top: 0; }
.preview-menu__panel input, .preview-menu__panel select { width: 100%; padding: var(--sp-2); border: 1px solid #c9cbcf; border-radius: var(--radius); font: 400 13px var(--font); color: var(--ink); background: var(--white); }
.preview-panel__seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #c9cbcf; border-radius: var(--radius); overflow: hidden; }
.preview-panel__seg a { padding: var(--sp-2); text-align: center; text-decoration: none; color: var(--ink); }
.preview-panel__seg a[aria-current] { background: var(--ink); color: var(--white); }
.preview-panel__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.preview-panel__row--steps { grid-template-columns: auto 30px 30px auto 30px 30px; align-items: center; gap: 6px; }
.preview-panel__row--steps span { font-size: 12px; color: var(--muted); }
.preview-menu__panel button { min-height: 30px; padding: 6px; border: 1px solid #c9cbcf; border-radius: var(--radius); background: var(--white); font: 500 12.5px/1 var(--font); color: var(--ink); cursor: pointer; }
.preview-menu__panel button:hover { border-color: var(--ink); }
.preview-panel__reset { margin-top: var(--sp-1); }
.preview-panel__hint { margin: var(--sp-1) 0 0; font-size: 11.5px; color: var(--muted); }