/* =====================================================================
   home-public.css — public homepage: header + contact section
   All header classes are prefixed "cvh-" so the legacy rules in
   style.css (.public-header, .lang-switch ...) can never interfere.
   ===================================================================== */

/* ---------- Smooth anchor scrolling, offset for the sticky header ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
@media (min-width: 860px) { html { scroll-padding-top: 80px; } }

/* ---------- Colour tokens (light theme) ---------- */
.cvh {
  --h-bg: rgba(255, 255, 255, .88);   /* header background (translucent, blurred) */
  --h-menu: #ffffff;                  /* language dropdown background (opaque) */
  --h-text: #1c3326;                  /* main text */
  --h-muted: #5a7062;                 /* motto text */
  --h-brand: #1f6b3a;                 /* brand name colour */
  --h-line: rgba(42, 125, 70, .18);   /* borders */
  --h-chip: #eef6f1;                  /* chip / button background */
  --h-chip-hover: #dff0e5;
  --h-accent: #2a7d46;                /* login button + highlights */
  --h-accent-text: #ffffff;
}
/* ---------- Colour tokens (dark theme) ---------- */
html[data-theme="dark"] .cvh {
  --h-bg: rgba(13, 21, 16, .88);
  --h-menu: #15221a;
  --h-text: #e4f2e9;
  --h-muted: #9db3a5;
  --h-brand: #7fd6a0;
  --h-line: rgba(255, 255, 255, .10);
  --h-chip: rgba(255, 255, 255, .06);
  --h-chip-hover: rgba(255, 255, 255, .12);
  --h-accent: #46b676;
  --h-accent-text: #07140c;
}

/* ---------- Header shell: sticky + blurred ---------- */
.cvh {
  position: sticky; top: 0; z-index: 100;
  background: var(--h-bg);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--h-line);
}

/* Mobile layout (2 rows):
     row 1 = brand | login
     row 2 = links + language + theme                                   */
.cvh-inner {
  max-width: 1200px; margin: 0 auto; padding: 10px 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "brand login" "tools tools";
  column-gap: 12px; row-gap: 8px; align-items: center;
}

/* ---------- Brand ---------- */
.cvh-brand { grid-area: brand; display: flex; align-items: center; gap: 10px; min-width: 0; text-decoration: none; color: var(--h-text); }
.cvh-logo  { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: none; }
.cvh-name  { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.cvh-name strong { font-family: var(--police-display, Georgia, serif); font-size: 1.05rem; font-weight: 600; color: var(--h-brand); white-space: nowrap; }
.cvh-name small  { font-size: .66rem; letter-spacing: .04em; color: var(--h-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Login button ---------- */
.cvh-login {
  grid-area: login; white-space: nowrap; text-decoration: none;
  padding: 9px 18px; border-radius: 999px;
  background: var(--h-accent); color: var(--h-accent-text);
  font-size: .85rem; font-weight: 700;
  transition: transform .15s ease, filter .15s ease;
}
.cvh-login:hover { transform: translateY(-1px); filter: brightness(1.08); text-decoration: none; }

/* ---------- Row 2: links (left) + language & theme (right) ---------- */
.cvh-tools { grid-area: tools; display: flex; align-items: center; gap: 8px; }
.cvh-nav   { display: flex; gap: 6px; flex: 1; min-width: 0; }   /* flex:1 pushes language/theme to the right */
.cvh-link {
  padding: 7px 14px; border-radius: 999px; white-space: nowrap; text-decoration: none;
  background: var(--h-chip); color: var(--h-text);
  font-size: .85rem; font-weight: 600; border: 1px solid transparent;
  transition: background .15s ease;
}
.cvh-link:hover { background: var(--h-chip-hover); text-decoration: none; }
.cvh-link.is-contact { border-color: var(--h-accent); }          /* makes "Contact" stand out */
.cvh .theme-toggle-public { flex: none; }                         /* keep the existing theme button as is */

/* ---------- Language dropdown (native <details>, no framework) ---------- */
.cvh-lang { position: relative; }
.cvh-lang summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 999px; border: 1px solid var(--h-line);
  background: var(--h-chip); color: var(--h-text); font-size: .8rem; font-weight: 700;
}
.cvh-lang summary::-webkit-details-marker { display: none; }
.cvh-lang summary::after {                                        /* small chevron */
  content: ""; width: 6px; height: 6px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s ease;
}
.cvh-lang[open] summary::after { transform: rotate(225deg) translateY(-2px); }
.cvh-lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); min-width: 170px; padding: 6px;
  background: var(--h-menu); border: 1px solid var(--h-line); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .25); z-index: 5;
}
.cvh-lang-menu a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px;
  color: var(--h-text); text-decoration: none; font-size: .9rem;
}
.cvh-lang-menu a b { width: 26px; font-size: .75rem; letter-spacing: .05em; color: var(--h-muted); }
.cvh-lang-menu a:hover { background: var(--h-chip-hover); text-decoration: none; }
.cvh-lang-menu a.active { background: var(--h-accent); color: var(--h-accent-text); }
.cvh-lang-menu a.active b { color: inherit; }

/* Very small phones: slightly tighter chips so row 2 never wraps */
@media (max-width: 380px) {
  .cvh-link { padding: 7px 10px; font-size: .8rem; }
  .cvh-lang summary { padding: 7px 9px; }
}

/* Desktop: single row  [ brand | links (centered) + language + theme | login ] */
@media (min-width: 860px) {
  .cvh-inner { grid-template-columns: auto 1fr auto; grid-template-areas: "brand tools login"; padding: 12px 24px; column-gap: 24px; }
  .cvh-nav   { justify-content: center; }
}

/* ======================= CONTACT SECTION ======================= */
.contact-section { max-width: 1100px; margin: 0 auto; padding: 56px 20px 64px; }
.contact-head    { text-align: center; margin-bottom: 28px; }
.contact-eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #2a7d46; margin-bottom: 8px; }
.contact-head h2 { margin: 0 0 8px; }
.contact-head p  { margin: 0 auto; max-width: 560px; opacity: .8; }
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.contact-card {
  display: flex; align-items: center; gap: 16px; padding: 20px; border-radius: 16px;
  border: 1px solid rgba(42, 125, 70, .25); background: rgba(42, 125, 70, .06);
  color: inherit; text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.contact-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0, 0, 0, .12); border-color: #2a7d46; text-decoration: none; }
.contact-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: #2a7d46; color: #fff; }
.contact-icon svg { width: 24px; height: 24px; }
.contact-card.wa .contact-icon { background: #25d366; }
.contact-text  { min-width: 0; }
.contact-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.contact-value { font-weight: 700; font-size: 1.05rem; overflow-wrap: anywhere; }
.contact-hint  { font-size: .85rem; opacity: .75; }
html[data-theme="dark"] .contact-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
html[data-theme="dark"] .contact-card:hover { border-color: #3fae6a; }