/* ========== Brand variables ========== */
:root{
  --dark-water:#224C74;       /* primary */
  --light-water:#4E7B9C;      /* secondary */
  --dark-wave:#8CB0C7;        /* support */
  --light-wave:#C5DBE6;       /* support (page bg) */
  --sand:#FFBC79;             /* accent */
  --font-dark:#183551;        /* body text */
  --font-light:#E8F1F5;       /* light text */
}

/* ========== Base / globals ========== */
*{ box-sizing:border-box; }
html, body{ height:100%; }

body{
  margin:0;
  font-family:'Anek Latin','Segoe UI',Tahoma,sans-serif;
  color:var(--font-dark);
  background:var(--light-wave);
}

/* Headings use Poppins across the site */
h1, h2, h3, h4{
  font-family:'Poppins','Segoe UI',Tahoma,sans-serif;
  font-weight:700;
  margin:0 0 .5rem 0;
}

/* Accessible focus */
a:focus, button:focus, input:focus, select:focus, textarea:focus{
  outline:2px solid var(--light-water);
  outline-offset:2px;
}

/* ========== Hero / header ========== */
header.hero{
  text-align:center;
  padding:3.5rem 1.5rem;
}

/* Optional CTA button style if you use it */
.cta-button{
  background:var(--sand);
  color:var(--font-dark);
  padding:.75rem 1.5rem;
  font-weight:600;
  text-decoration:none;
  border-radius:8px;
  display:inline-block;
  margin-top:1rem;
}

/* ========== Layout helpers ========== */
.wrap{ max-width:720px; margin:2rem auto; padding:0 1rem; }

.section{
  padding:3rem 2rem;
  max-width:1200px;
  margin:auto;
}

.card-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:2rem;
}

.card{
  background:#fff;
  border-radius:8px;
  padding:1.5rem;
  box-shadow:0 4px 8px rgba(0,0,0,.05);
}

/* ========== Theme utilities (bg + text) ========== */
.theme-224C74{ background:var(--dark-water); color:var(--font-light); }
.theme-183551{ background:var(--font-dark); color:var(--font-light); }
.theme-C5DBE6{ background:var(--light-wave); color:var(--font-dark); }
.theme-E8F1F5{ background:var(--font-light); color:var(--font-dark); }
.theme-4E7B9C{ background:var(--light-water); color:var(--font-light); }
.theme-8CB0C7{ background:var(--dark-wave); color:var(--font-dark); }

/* ========== Logo slot (CSS chooses file by theme) ========== */
.brand-logo{
  display:inline-block;
  width:180px; height:48px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
}

/* Map each theme to its tuned SVG */
.theme-224C74 .brand-logo{ background-image:url("images/logo-on-224C74.svg"); }
.theme-183551 .brand-logo{ background-image:url("images/logo-on-183551.svg"); }
.theme-C5DBE6 .brand-logo{ background-image:url("images/logo-on-C5DBE6.svg"); }
.theme-E8F1F5 .brand-logo{ background-image:url("images/logo-on-E8F1F5.svg"); }
.theme-4E7B9C .brand-logo{ background-image:url("images/logo-on-4E7B9C.svg"); }
.theme-8CB0C7 .brand-logo{ background-image:url("images/logo-on-8CB0C7.svg"); }

/* Fallback if no theme class present */
.brand-logo{ background-image:url("images/logo-on-183551.svg"); }

/* ========== Contact form ========== */
.contact{ display:block; }
.contact .grid{ display:grid; gap:.75rem; }

@media (min-width:700px){
  .contact .grid{ grid-template-columns:1fr 1fr; }
  .contact textarea, .contact select{ grid-column:1 / -1; }
}

.contact input,
.contact select,
.contact textarea{
  width:100%;
  padding:.75rem .9rem;
  border:1px solid var(--dark-wave);
  border-radius:10px;
  background:#fff;
  color:var(--font-dark);
}

.contact input:focus,
.contact select:focus,
.contact textarea:focus{
  outline:2px solid var(--light-water);
  border-color:transparent;
}

.hp{ display:none; } /* honeypot anti-spam */

button{
  margin-top:.5rem;
  background:var(--sand);
  color:var(--font-dark);
  border:none;
  border-radius:999px;
  padding:.8rem 1.2rem;
  font-weight:600;
  cursor:pointer;
}
button:hover{ filter:brightness(1.05); }

/* ========== Footer ========== */
.foot{
  text-align:center;
  color:var(--font-dark);
  padding:2rem 1rem 3rem;
}

/* === DROP-IN: Header logo sizing (paste at end of style.css) === */
.hero.theme-224C74 {
  text-align: center;
  padding-block: clamp(1.5rem, 6vw, 3rem) !important; /* header height follows logo */
}

.hero.theme-224C74 .brand-logo {
  display: block !important;
  margin: 0 auto !important;
  width: min(33vw, 420px) !important;  /* ≈ one-third of the window, capped */
  min-width: 200px !important;
  aspect-ratio: 547 / 162.65 !important;  /* your SVG's proportions */
  height: auto !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  background-position: center !important;
}
/* Footer theme + tiny logo */
.foot.theme-8CB0C7 {
  background: var(--dark-water);
  color: var(--font-light);
}

.foot .brand-logo--tiny {
  display: block;
  margin: .75rem auto 0;
  width: 120px;                 /* tweak as you like */
  aspect-ratio: 547 / 162.65;   /* matches your SVG */
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}


/* Footer: Dark Wave theme with tiny logo */
.foot.theme-8CB0C7 {
  background: var(--dark-wave) !important;  /* #8CB0C7 */
  color: var(--font-dark) !important;       /* #183551 for good contrast */
  text-align: center;
  padding: 2rem 1rem 2.5rem;
}

.foot.theme-8CB0C7 .brand-logo--tiny {
  display: block;
  margin: .75rem auto 0;
  width: 120px;                /* tweak as needed */
  aspect-ratio: 547 / 162.65;  /* your SVG proportions */
  height: auto;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}