/* Ari — neutral modern theme (high contrast, readable) */
:root{
  /* Gainesville PD-ish: clean canvas + navy/blue accents */
  --bg0:#F4F7FB;
  --bg1:#FFFFFF;
  --panel:#FFFFFF;
  --panel2: rgba(255,255,255,0.86);
  --border: rgba(0, 12, 71, 0.12);

  --text:#0A1430;
  --muted: rgba(10,20,48,0.74);
  --muted2: rgba(10,20,48,0.55);

  --navy:#000C47;
  --blue:#1F6FFF;
  --sky:#6AA2C7;

  --accent1: var(--navy);
  --accent2: var(--blue);
  --accent3: var(--sky);

  --shadow: 0 18px 40px rgba(18, 34, 70, 0.10);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  font-family: Roboto, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
  margin:0;
  color: var(--text);
  background:
    radial-gradient(1100px 520px at 8% 0%, rgba(106,162,199,0.26), transparent 60%),
    radial-gradient(1000px 520px at 92% 0%, rgba(31,111,255,0.18), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* soft header band like OpenCities */
body:before{
  content:"";
  position:fixed;
  inset:0 0 auto 0;
  height:340px;
  z-index:-1;
  background:
    linear-gradient(180deg, rgba(106,162,199,0.60), rgba(244,247,251,0.0));
}


.wrap{max-width:1040px;margin:0 auto;padding:26px;}

/* NAV */
.site-header{position:sticky;top:0;z-index:30;}

.topbar{
  background: linear-gradient(135deg, rgba(11,31,59,0.96), rgba(31,111,255,0.88));
  color:#fff;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:10px;padding-bottom:10px;}
.topbar-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-chip{font-size:12px;font-weight:700;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,0.14);}
.topbar-muted{font-size:12px;opacity:0.9}
.topbar-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.topbar-link{color:#fff;text-decoration:none;font-size:12px;font-weight:700}
.topbar-link:hover{text-decoration:underline}
.topbar-sep{opacity:0.8}

.nav-shell{
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 25px rgba(18, 34, 70, 0.08);
  position:relative;
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;}

.lang-float{
  position:fixed;
  right:12px;
  top:10px;
  display:flex;
  gap:8px;
  z-index:80;
}
.lang-float .lang{
  text-decoration:none;
  font-size:12px;
  font-weight:900;
  letter-spacing:0.2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.92);
  color:var(--navy);
}
.lang-float .lang.active{background:linear-gradient(135deg, rgba(11,31,59,0.95), rgba(31,111,255,0.92));color:#fff;border-color:transparent;}
.brand{display:flex;flex-direction:column;gap:4px;text-decoration:none;color:var(--text)}
.brand-logo{height:34px;width:auto;display:block}
.brand-sub{font-family:Roboto, ui-sans-serif, system-ui, -apple-system, Segoe UI, Arial, sans-serif;font-size:11px;letter-spacing:0.2px;color:var(--muted2)}

.nav{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

/* CSS-only mobile hamburger */
.nav-check{position:absolute;left:-9999px;}
.nav-toggle{display:none;align-items:center;justify-content:center;border:1px solid var(--border);background:#fff;border-radius:12px;padding:10px 12px;cursor:pointer;font-size:14px;font-weight:800;color:var(--navy);user-select:none;}
.nav a{
  color: var(--muted);
  text-decoration:none;
  font-size:14px;
  padding:10px 10px;
  border-radius:12px;
}
.nav a:hover{color:var(--navy);background:rgba(106,162,199,0.16)}
.nav-cta{
  color:#fff !important;
  background: linear-gradient(135deg, rgba(11,31,59,0.95), rgba(31,111,255,0.92));
  font-weight:800;
  box-shadow: 0 12px 26px rgba(31,111,255,0.18);
}
.nav-cta:hover{filter:brightness(1.03)}

/* HERO */
.hero{border:1px solid var(--border);border-radius:20px;background:var(--panel2);box-shadow:var(--shadow);backdrop-filter: blur(12px)}

/* Full-width hero band (container is full bleed, inner content is wrapped) */
.hero-full{
  padding:18px 0 0 0;
}
.hero-wrap{padding-top:22px;padding-bottom:6px;}
.hero-split{display:grid;grid-template-columns:1.1fr 0.9fr;overflow:hidden;position:relative;
  /* Full-bleed hero image behind entire block.
     Left side stays very light for readability; right side shows more image. */
  background:
    /* Left side: almost white for text readability.
       Right side: fade to fully clear so the image is strong where there's no text. */
    linear-gradient(90deg,
      rgba(255,255,255,0.97) 0%,
      rgba(255,255,255,0.92) 48%,
      rgba(255,255,255,0.55) 70%,
      rgba(255,255,255,0.18) 84%,
      rgba(255,255,255,0.00) 100%),
    url('/assets/hero.jpg');
  background-size: cover;
  background-position: center;
}
.hero-copy{padding:30px}
.pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border-radius:999px;
  font-size:12px;
  color: var(--muted);
  border:1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.hero h1{margin:14px 0 10px 0;font-size:42px;line-height:1.08;letter-spacing:-0.4px}
.lead{margin:0 0 12px 0;color:var(--muted);font-size:16px;line-height:1.55;max-width:42ch}

.cta-row{display:flex;gap:12px;margin:16px 0 8px 0;flex-wrap:wrap;}
.btn{display:inline-block;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg, rgba(11,31,59,0.95), rgba(31,111,255,0.92));color:#fff;text-decoration:none;font-weight:800;box-shadow:0 16px 34px rgba(18, 34, 70, 0.14);}
.btn.secondary{background:#ffffff;color:var(--navy);border:1px solid var(--border);box-shadow:none;font-weight:700;}

.hero-meta{display:flex;gap:16px;flex-wrap:wrap;margin-top:10px}
.hero-meta .k{display:block;font-size:11px;color:var(--muted2)}
.hero-meta .v{display:block;font-size:14px;color:var(--text);font-weight:700}

.hero-media{position:relative;min-height:280px}
/* let the background show through on the right */
.hero-media{background:transparent}
.hero-photo{
  height:100%;
  /* Image now lives on .hero-split as a full-width background. Keep right panel transparent. */
  background: transparent;
}
.hero-photo-overlay{display:none;}

.small{font-size:12px;color:var(--muted2)}

/* CARDS */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px;}
.card{padding:18px;border:1px solid var(--border);border-radius:16px;background:#fff;box-shadow: 0 12px 30px rgba(18, 34, 70, 0.08);}
.card h2{margin:0 0 8px 0;font-size:15px;color:var(--text);}
.card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

.notice{margin-top:14px;padding:16px;border-radius:16px;border:1px dashed rgba(0,12,71,0.18);background:rgba(106,162,199,0.10);}

/* FOOTER */
.site-footer{border-top:1px solid var(--border);margin-top:26px;}
.footer-links{display:flex;gap:14px;flex-wrap:wrap;}
.footer-links a{color:var(--muted);text-decoration:none;font-size:14px;}
.footer-links a:hover{color:var(--text);}

input,textarea{width:min(520px,100%);padding:12px 12px;border-radius:14px;border:1px solid rgba(0,12,71,0.14);background:#fff;color:var(--text);outline:none}
textarea{min-height:120px}

@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;}
  .hero-media{min-height:220px}
  .hero h1{font-size:30px}

  .topbar-inner{flex-direction:column;align-items:flex-start}

  /* keep language switch visible on mobile */
  .lang-float{top:10px;}

  /* mobile nav: collapsed by default */
  .nav-toggle{display:flex;}
  .nav-inner{flex-direction:row;align-items:center;}
  .nav-menu{display:none;width:100%;order:3;margin-top:10px;padding:10px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,0.96);box-shadow:0 12px 26px rgba(18,34,70,0.08);}
  .nav-menu a{width:100%;padding:12px 12px;}
  .nav-menu a.nav-cta{width:100%;text-align:center;}
  .nav-check:checked ~ .nav-menu{display:flex;flex-direction:column;align-items:stretch;}
}
@media (max-width:800px){.grid{grid-template-columns:1fr;}}