/* ===========================
   Golden Field Capital — Styles
   =========================== */

/* Always hide elements with [hidden] attribute */
[hidden] { display: none !important; }

/* ---- Root / Base ---- */
:root {
  /* Brand palette */
  --black:#0b0b0b;
  --dark-gray:#2e2e2e;
  --dark-green:#314024;
  --sage:#96a684;       /* sage panel */
  --sage-cta:#98A68D;   /* CTA button sage */
  --gold:#d8ae5e;       /* top bar */
  --offwhite:#f6f4f2;   /* background */
  --focus:#0ea5e9;
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

html, body {
  background: var(--offwhite);
  color: var(--black);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

/* Flex layout to pin footer to bottom on short pages */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main { flex: 1 0 auto; }
footer { flex-shrink: 0; }

a { color: inherit; text-decoration: none; }
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Helpful general fix (one img rule only) */
img { max-width: 100%; height: auto; display: block; }

/* ---- Layout ---- */
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { padding: 24px 0; }

/* ---- Top phone bar ---- */
.topbar { background: var(--gold); color: #1b1b1b; }
.topbar .wrap {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  letter-spacing: .01em;
}

/* ---- Header / Nav ---- */
/* Mobile nav visibility defaults */
.mobile-nav { display: none; }              /* desktop: hidden */
.desktop-nav { display: flex; }             /* desktop: show */

header { background: #fff; }
header .bar {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: 96px;
}

.brand { flex: 0 0 auto; }
.brand img { height: 68px; width: auto; object-fit: contain; display: block; }

.nav {
  display: flex;
  gap: 38px;
  align-items: center;
  justify-content: center;
  flex: 1;
}
.nav a {
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #161616;
  opacity: .9;
}
.nav a:hover { opacity: 1; }

/* Compact header like inner pages */
header .bar { min-height: 74px; gap: 16px; }
.brand img { height: 48px; }
.nav { gap: 22px; flex-wrap: nowrap; }
.nav a {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  line-height: 1.2;
}

/* Force white text for the Make Payment button in the header */
header .btn-pay { color: #fff !important; }

/* Responsive header & nav */
@media (max-width: 900px){
  header .bar{ min-height: 64px; gap: 12px; }
  .brand img{ height: 40px; }
  .nav{ gap: 14px; }
  .nav a{ font-size: .95rem; }
}
@media (max-width: 680px){
  header .bar{ min-height: 60px; }
  .brand img{ height: 34px; }
  .nav{
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .nav::-webkit-scrollbar{ display: none; }
  .nav a{
    white-space: nowrap;
    font-size: .92rem;
    line-height: 1;
    padding: 6px 0;
  }
  .topbar .wrap{ min-height: 38px; font-size: .95rem; }
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .06s ease, filter .15s ease, background-color .2s ease;
}
.btn:active { transform: translateY(1px); }

/* === Dark Green Buttons (Pay buttons, etc.) === */
.btn-pay,
.btn[data-variant="dark-green"],
button[data-bg="dark-green"],
a[data-bg="dark-green"] {
  background: var(--dark-green);
  color: #fff;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color .2s ease, filter .15s ease, transform .06s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}

/* Unified subtle brighten hover for all dark green buttons */
.btn-pay:hover,
.btn[data-variant="dark-green"]:hover,
button[data-bg="dark-green"]:hover,
a[data-bg="dark-green"]:hover {
  filter: brightness(1.08);
}

/* Active press feel for all dark green buttons */
.btn-pay:active,
.btn[data-variant="dark-green"]:active,
button[data-bg="dark-green"]:active,
a[data-bg="dark-green"]:active {
  transform: translateY(1px);
}

/* Header version (ensure white text) */
header .btn-pay { color: #fff; }

/* --- Ghost Buttons --- */
.btn.ghost {
  background: transparent;
  border: 1px solid rgba(0,0,0,.15);
  color: #1b1b1b;
  padding: 10px 14px;
  transition: background-color .15s ease, transform .06s ease;
}
.btn.ghost:hover { background: rgba(0,0,0,.05); }
.btn.ghost:active { transform: translateY(1px); }

/* --- Sage CTA Buttons (used on forms & pages) --- */
.btn-cta {
  background: var(--sage-cta);
  color: #0f1a0c;
  padding: 12px 18px;
  font-size: 1rem;
  border-radius: 999px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: transform .06s ease, filter .1s ease, box-shadow .12s ease;
  box-shadow: 0 1px 0 rgba(0,0,0,.08);
}
.btn-cta:hover { filter: brightness(.97); }
.btn-cta:active { transform: translateY(1px); }

/* ---- Hero ---- */
.hero { padding: 14px 0 40px; }
.hero-grid {
  display: grid;
  gap: 26px;
  align-items: stretch;
}
@media (min-width: 960px) { .hero-grid { grid-template-columns: 1.1fr 1fr; } }

/* Left sage panel */
.headline-panel {
  background: var(--sage);
  border-radius: 22px;
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 420px;
}
.headline-panel h1 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 1.6rem + 2vw, 2.8rem);
  font-weight: 800;
  line-height: 1.2;
}
.headline-panel p {
  margin: 0 0 24px;
  font-size: 1.2rem;
  line-height: 1.7;
}
.cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Right image */
.hero-photo {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Small-screen hero tweaks */
@media (max-width: 680px){
  .headline-panel{ padding: 28px 22px; border-radius: 18px; }
  .headline-panel h1{ font-size: clamp(1.6rem, 4.5vw + 1rem, 2.1rem); }
  .hero-photo{ border-radius: 18px; }
}

/* ---- Cards / Grids ---- */
.grid { display: grid; gap: 16px; }
@media (min-width: 760px){ .grid.cols-4 { grid-template-columns: repeat(4,1fr); } }

.card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.muted { color: #4a4a4a; }
.fine { font-size: .92rem; color: #666; }

/* ---- Forms (polished) ---- */
.form.card {
  max-width: 680px;
  margin: 24px auto;
  padding: 32px 28px;
  border-radius: 18px;
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}

.form .field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}

.form label {
  font-weight: 600;
  color: var(--dark-gray);
  font-size: .95rem;
}

.form input,
.form textarea,
.form select {
  border: 1px solid rgba(0,0,0,.15);
  border-radius: 12px;
  padding: 12px 14px;
  font: inherit;
  background: #fff;
  color: var(--black);
  transition: border-color .15s, box-shadow .15s;
}
.form textarea { resize: vertical; }

.form input:focus,
.form textarea:focus,
.form select:focus {
  border-color: var(--focus);
  box-shadow: 0 0 0 3px rgba(14,165,233,.2);
  outline: none;
}

.form .hint {
  font-size: .85rem;
  color: #666;
  margin-top: -4px;
}

.form .actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 12px;
}

@media (max-width: 600px){
  .form .actions { flex-direction: column; }
  .form .actions .btn-cta,
  .form .actions .btn.ghost { width: 100%; }
}

/* Consent checkboxes */
.consent { display: flex; gap: 10px; align-items: flex-start; font-size: .95rem; margin-top: 8px; }
.consent input { transform: translateY(2px); }

/* ---- Popup (success modals) ---- */
.popup {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.popup[hidden] { display: none; }

.popup-content {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  max-width: 420px;
  text-align: center;
  box-shadow: 0 10px 25px rgba(0,0,0,.2);
}
.popup-content h2 {
  margin: 0 0 12px;
  font-size: 1.4rem;
  font-weight: 800;
}
.popup-content p {
  margin: 0 0 18px;
  font-size: 1rem;
  color: #444;
}

/* ---- Footer (consolidated) ---- */
footer {
  background: var(--black);
  color: #e9e9e9;
  margin-top: 40px;
}
footer .wrap {
  padding: 28px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
footer p { margin: 4px 0; line-height: 1.5; }

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  font-weight: 600;
}
.footer-nav a {
  color: #e9e9e9;
  opacity: .85;
  transition: opacity .15s ease;
}
.footer-nav a:hover {
  opacity: 1;
  text-decoration: underline;
}
footer .fine { color: #cfcfcf; }

/* === Cookie Banner === */
.cookie-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(17,17,17,.98);
  color: #e9e9e9;
  z-index: 10000; /* above other UI */
  box-shadow: 0 -6px 18px rgba(0,0,0,.2);
}
.cookie-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
}
.cookie-text p { margin: 6px 0 0; color: #cfcfcf; }

.cookie-actions {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}
.cookie-actions .btn { background: #2a2a2a; color: #fff; padding: 10px 14px; }
.cookie-actions .btn:hover { filter: brightness(1.05); }

/* === Cookie Preferences Modal === */
.cookie-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
}
.cookie-modal[hidden] { display: none; }

.cookie-modal__content {
  background: #fff;
  color: var(--black);
  border-radius: 18px;
  padding: 24px;
  width: min(680px, calc(100vw - 32px));
  box-shadow: 0 12px 28px rgba(0,0,0,.25);
}
.cookie-modal__content h2 { margin: 0 0 10px; }

.cookie-option {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin-top: 14px; padding: 14px 16px;
}
.chip {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: #e7e7e7; color: #333; font-weight: 600; font-size: .85rem;
}

.cookie-modal__actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
}

/* --- Toggle Switch --- */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
  position: absolute; cursor: pointer; inset: 0; background: #c9c9c9; border-radius: 999px;
  transition: background .2s ease;
}
.slider:before {
  content: ""; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px;
  background: #fff; border-radius: 50%; transition: transform .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
}
.switch input:checked + .slider { background: var(--sage-cta); }
.switch input:checked + .slider:before { transform: translateX(20px); }

@media (max-width: 680px){
  .cookie-wrap { grid-template-columns: 1fr; }
  .cookie-actions { justify-content: flex-start; }
}

/* === Mobile Menu (finalized) === */
.menu-toggle {
  display: none; /* hidden on desktop by default */
  appearance: none;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
}
.menu-toggle:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.menu-icon {
  width: 22px;
  height: 2px;
  background: #222;
  display: block;
  position: relative;
}
.menu-icon::before,
.menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #222;
}
.menu-icon::before { top: -7px; }
.menu-icon::after  { top: 7px; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  z-index: 999;
  display: none;
}

/* Desktop — hide mobile elements */
@media (min-width: 901px) {
  .menu-toggle { display: none !important; }
  .mobile-nav { display: none !important; }
  .nav-backdrop { display: none !important; }
}

/* Mobile — show menu toggle and panel */
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  .desktop-nav { display: none !important; }

  .mobile-nav {
    position: fixed;
    left: 0; right: 0;
    top: var(--navTop, 64px); /* set via JS to header height */
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    display: grid;
    gap: 12px;
    padding: 14px 16px;
    transform: translateY(-130%);
    transition: transform .2s ease;
    z-index: 1000;
  }

  body.menu-open .mobile-nav { transform: translateY(0); }
  body.menu-open .nav-backdrop { display: block; }
  body.menu-open { overflow: hidden; }

  /* header layout on mobile: brand | hamburger */
  header .bar { justify-content: space-between; }
}

/* Hamburger -> X animation */
body.menu-open .menu-icon { background: transparent; }
body.menu-open .menu-icon::before { transform: translateY(7px) rotate(45deg); }
body.menu-open .menu-icon::after  { transform: translateY(-7px) rotate(-45deg); }