/* =====================================================
   Bruno's Aquariums — Ocean + Freshwater Theme (v22)
   • Deep Reef palette (balanced, pro)
   • Sand gradient page background
   • Clean, non-overlapping mobile menu
   • Room for FAQ tab in header
   • Phone-first spacing & tap targets
===================================================== */

/* ---------- Color system (Deep Reef) ---------- */
:root{
  /* Ocean core */
  --ocean-900:#032531;
  --ocean-800:#043341;
  --ocean-700:#074b60;
  --ocean-600:#0a6b84;
  --ocean-500:#0ea5e9;

  /* Freshwater accents */
  --fresh-700:#0c5b49;
  --fresh-600:#188a6b;

  /* Sand / light */
  --sand-10:#fffaf1;
  --sand-25:#fbf6e9;
  --sand-50:#f7f0df;

  /* Brand coral pop */
  --coral:#ff6f61;

  /* Text + surfaces */
  --ink:#0f1e24;
  --ink-80:#273940;
  --surface:#ffffff;
  --border: rgba(0,0,0,.12);
  --border-dark: rgba(255,255,255,.18);

  /* Shadows */
  --shadow: 0 8px 28px rgba(4, 35, 44, .14);
  --shadow-lg: 0 14px 38px rgba(4,35,44,.22);

  /* Type & tap target */
  --step-0: clamp(1rem, .95rem + .4vw, 1.125rem);
  --step-1: clamp(1.25rem, 1.05rem + 1.6vw, 1.7rem);
  --step-2: clamp(1.75rem, 1.3rem + 2.6vw, 2.4rem);
  --tap: 44px;

  /* Chip selection (high contrast) */
  --chip-bg:#d9efff;
  --chip-text:#062a3a;
  --chip-border:#0a6b84;
}

/* ---------- Base & background ---------- */
*{ box-sizing:border-box }
img,svg,video{ max-width:100%; height:auto; display:block }

body{
  margin:0;
  color:var(--ink);
  font:16px/1.7 system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  font-size:var(--step-0);
  background:
    radial-gradient(1000px 700px at 70% -10%, rgba(14,165,233,.15), transparent 60%),
    radial-gradient(900px 600px at 10% 120%, rgba(46,163,123,.11), transparent 60%),
    linear-gradient(180deg, var(--sand-10) 0%, var(--sand-25) 40%, var(--sand-50) 100%);
  background-blend-mode: multiply, multiply, normal;
  overflow-x:hidden;
}

/* ---------- Layout helpers ---------- */
.container{ width:min(1100px,92%); margin:0 auto; position:relative; z-index:1 }
.section{ padding:2.6rem 0 }
.section.narrow{ padding:2rem 0 }
h1{ font-size:var(--step-2); line-height:1.15; margin:.2rem 0 .7rem }
h2{ font-size:var(--step-1); line-height:1.2; margin:.2rem 0 .45rem }
h3{ font-size:1.1rem; margin:.2rem 0 .3rem }
.centered{ text-align:center }

/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky; top:0; z-index:100; color:#fff;
  background:linear-gradient(180deg, rgba(3,37,49,.95), rgba(10,107,132,.90));
  box-shadow:var(--shadow); backdrop-filter:saturate(1.1) blur(3px);
}
.header-inner{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.85rem 0;
}

/* Brand */
.brand{ display:flex; align-items:center; gap:.65rem; color:#fff; text-decoration:none }
.logo-img{ height:36px }
.brand-text{
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  font-weight:700;
  font-size:1.18rem;
  letter-spacing:.3px;
  white-space:nowrap;
  line-height:1.2;
}

/* Nav – desktop defaults */
.nav-toggle{
  display:none; background:transparent; border:1px solid rgba(255,255,255,.6); color:#fff;
  padding:.55rem .85rem; border-radius:.6rem; min-height:var(--tap);
}
.site-nav{ flex:1; display:flex; justify-content:flex-end }
.site-nav ul{ list-style:none; margin:0; padding:0; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap }
.site-nav a, .site-nav .btn, .site-nav .btn-ghost{
  color:#fff; text-decoration:none; padding:.6rem .75rem; border-radius:.6rem; white-space:nowrap;
}
.site-nav a:hover, .site-nav a.active{ background:rgba(255,255,255,.14) }

/* Make room for one more tab (FAQ) on medium widths */
@media (max-width:1180px){
  .site-nav ul{ gap:.35rem }
  .site-nav a, .site-nav .btn, .site-nav .btn-ghost{ padding:.55rem .65rem; font-size:.98rem }
}

/* Mobile menu — NON overlapping dropdown */
@media (max-width:1060px){
  .brand-text{ font-size:1.05rem }
  .nav-toggle{ display:inline-flex; align-items:center; z-index:110 }
  .site-nav{ position:static; width:100%; justify-content:flex-end }
  .site-nav ul{
    position:static;
    width:100%;
    display:none;
    flex-direction:column;
    gap:.5rem;
    background: linear-gradient(180deg, var(--ocean-900), var(--ocean-700));
    border-top:1px solid var(--border-dark);
    padding:1rem .8rem;
    box-shadow:var(--shadow);
    margin-top:.6rem;
    border-radius:.8rem;
  }
  .site-nav ul.open{ display:flex }
  .site-nav a, .site-nav .btn, .site-nav .btn-ghost{
    width:100%; padding:1rem; font-weight:700; font-size:1rem; text-align:center;
  }
}

/* Hide brand text on extra-small screens for space */
@media (max-width:420px){ .brand-text{ display:none } }

/* ---------- Buttons & links ---------- */
a.btn, .btn{
  display:inline-block; min-height:var(--tap);
  background: linear-gradient(90deg, var(--ocean-600), var(--fresh-600));
  color:#fff; text-decoration:none; padding:.85rem 1.1rem;
  border-radius:18px; font-weight:800; border:none; box-shadow:0 1px 0 rgba(0,0,0,.08);
}
a.btn:hover{ filter:brightness(.95) }
.btn-outline{
  display:inline-block; min-height:var(--tap);
  border:2px solid var(--ocean-600); color:var(--ocean-600);
  background:transparent; padding:.8rem 1.1rem; border-radius:18px; font-weight:800;
}
.btn-outline:hover{ background:var(--ocean-600); color:#fff }
.btn-ghost{
  display:inline-block; min-height:var(--tap);
  border:1px dashed var(--fresh-600); color:var(--fresh-600);
  background:rgba(24,138,107,.08); padding:.75rem 1.05rem; border-radius:18px; font-weight:800;
}
a.link{ color: var(--ocean-600); font-weight:800; text-decoration:none; position:relative }
a.link::after{
  content:""; position:absolute; left:0; bottom:-2px; height:6px; width:100%;
  background:linear-gradient(90deg, var(--coral), var(--ocean-500)); opacity:.28; border-radius:6px;
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; border-radius:24px; color:#fff;
  background:
    radial-gradient(1200px 600px at 60% -10%, rgba(14,165,233,.28), transparent 55%),
    linear-gradient(180deg, var(--ocean-700) 0%, var(--ocean-800) 65%, var(--ocean-900) 100%);
  padding:3.2rem 1rem; text-align:center; box-shadow:var(--shadow);
}
.hero p{ margin:.25rem auto 1.2rem; max-width:58ch; color:#e6fbff; opacity:.92 }
.hero-cta{ display:flex; gap:.85rem; flex-wrap:wrap; justify-content:center }

/* Curved wave divider beneath hero */
.wave-sep{ display:block; width:100%; height:90px; fill:var(--ocean-700); margin:-28px 0 0 }

/* ---------- Cards & grids ---------- */
.cards{ display:grid; gap:1rem; grid-template-columns:repeat(12,1fr) }
.cards > .card{ grid-column:span 3 }
@media (max-width:1100px){ .cards > .card{ grid-column:span 4 } }
@media (max-width:800px){ .cards > .card{ grid-column:span 6 } }
@media (max-width:560px){ .cards > .card{ grid-column:1 / -1 } }
.card{
  background:var(--surface); border-radius:18px; padding:1.25rem;
  box-shadow:var(--shadow); transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg) }

/* ---------- Banners ---------- */
.banner{
  background:linear-gradient(180deg, #ffffffee, #fffffffa);
  border:1px solid var(--border); border-radius:18px; text-align:center; padding:1.1rem;
  box-shadow:var(--shadow);
}
.banner .container{ display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; justify-content:center }

/* ---------- Forms & chips ---------- */
input,select,textarea,button{ font:inherit; color:inherit }
input,select,textarea{
  width:100%; min-height:var(--tap); padding:.75rem .9rem;
  border-radius:.7rem; border:1px solid var(--border); background:#fff;
}
label.required::after{ content:" *"; color:var(--coral); font-weight:800 }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
@media (max-width:700px){ .two-col{ grid-template-columns:1fr } }

/* Chip group */
.chips{ display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center }

/* Chip base */
.chip{
  --b: var(--chip-border);
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.05rem; border-radius:999px;
  border:1.5px solid var(--b);
  background:#fff;
  color:var(--ink);
  cursor:pointer; user-select:none; transition:.15s ease; font-weight:600;
  position:relative;
}
.chip > input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none }
.chip input:checked + .other-input,
.chip.selected .other-input,
.chip.other-active .other-input{ display:inline-block }
.chip input:checked ~ *, .chip.selected{ color:var(--chip-text) }
.chip:has(input:checked), .chip.selected{
  background:var(--chip-bg);
  border-color:var(--chip-border);
  box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--chip-border) 35%, white);
}
.chip .other-input{
  display:none; flex:0 1 auto; background:#fff; color:var(--ink);
  border:1px solid var(--chip-border); border-radius:.5rem; padding:.4rem .55rem;
  width:min(22ch, 60vw); margin-left:.2rem;
}
.chip .other-input:focus{ display:inline-block }
.chip:focus-within{ outline:3px solid color-mix(in oklab, var(--chip-border) 55%, white); outline-offset:2px }

/* Summary (contact page) */
.summary{
  margin-top:1rem; padding:1rem; border:1px solid var(--border);
  border-radius:18px; background:#fff; box-shadow:var(--shadow);
}
.summary h3{ margin:.2rem 0 .6rem; text-align:center }
.summary dl{ display:grid; grid-template-columns:auto 1fr; gap:.4rem 1rem; margin:0 }
.summary dt{ opacity:.8 }
.summary dd{ margin:0 }

/* ---------- Simple gallery tiles (livestock) ---------- */
.gallery{
  --min: 200px;
  display:grid; grid-template-columns: repeat(auto-fit, minmax(var(--min),1fr));
  gap:1rem; align-items:start; justify-items:center;
}
.tile{
  width:100%; max-width:360px; position:relative; overflow:hidden;
  border-radius:.9rem; border:1px solid var(--border);
  background: linear-gradient(180deg, var(--ocean-900), var(--ocean-800));
  box-shadow:var(--shadow);
}
.tile a{ display:block; line-height:0 }
.tile img{ width:100%; height:180px; object-fit:cover; transition:transform .25s ease }
.tile:hover img{ transform:scale(1.04) }
.cap{ padding:.6rem .7rem; font-size:.96rem; border-top:1px solid var(--border-dark); color:#e6f6fb }
.badge{
  position:absolute; left:.6rem; top:.6rem;
  background:linear-gradient(90deg, #7dd3fc, #99f6e4); color:#063346; font-weight:900;
  border-radius:.55rem; padding:.22rem .5rem; font-size:.8rem
}
@media (max-width:420px){ .gallery{ --min:160px } .tile img{ height:160px } }

/* Lightbox */
dialog.lightbox{ border:none; padding:0; background:transparent }
.lightbox::backdrop{ background:rgba(0,0,0,.78) }
.lightbox .wrap{ position:relative; margin:0 }
.lightbox img{ max-width:90vw; max-height:85vh; border-radius:.8rem; display:block }
.lightbox .meta{ margin-top:.5rem; color:#e2e8f0; text-align:center }
.lightbox .close{
  position:absolute; top:.75rem; right:.75rem;
  background:rgba(15,23,42,.95); border:1px solid #334155;
  border-radius:.5rem; color:#e2e8f0; padding:.38rem .65rem; cursor:pointer
}

/* ---------- Pills (maintenance) ---------- */
.pill-row{ display:flex; gap:.55rem; flex-wrap:wrap; justify-content:center; margin-top:.8rem }
.pill{ border:1px solid var(--border); border-radius:999px; padding:.4rem .85rem; font-size:.96rem; background:#fff }

/* ---------- Footer ---------- */
.site-footer{
  margin-top:2rem; color:#fff; padding-top:1.2rem;
  background:
    radial-gradient(900px 500px at -10% 0%, rgba(24,138,107,.22), transparent 60%),
    linear-gradient(180deg, var(--ocean-900), var(--ocean-800));
}
.footer-grid{
  display:grid; gap:1rem; align-items:flex-start;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.legal{ border-top:1px solid rgba(255,255,255,.18); margin-top:1rem; padding:.85rem 0; text-align:center; opacity:.88 }
.site-footer a{ color:#fff; text-decoration:none }
.site-footer a:hover{ text-decoration:underline }

/* ---------- Utility ---------- */
.table-wrap{ overflow-x:auto }
.space-y-3 > * + *{ margin-top:.75rem }
.space-y-4 > * + *{ margin-top:1rem }

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
}

/* ---------- Phone polish ---------- */
@media (max-width:480px){
  body{ font-size:15.5px; line-height:1.75 }
  .section{ padding:2rem 1rem }
  h1{ font-size:1.75rem }
  h2{ font-size:1.38rem }
  h3{ font-size:1.16rem }
  .cards{ grid-template-columns:1fr; gap:1.15rem }
  .card{ padding:1rem }
  .btn, .btn-outline, .btn-ghost{ width:100%; text-align:center; padding:1rem 1.2rem }
  input,select,textarea{ font-size:1rem; padding:.75rem .9rem }
  .footer-grid{ grid-template-columns:1fr; text-align:center }
}