/* Little Prince Lodge #79 — Simple Modern Theme (HTML/CSS only) */

:root{

  --bg:#0b1220;

  --card:#0f1a30;

  --text:#e9eefc;

  --muted:#b7c3e6;

  --brand:#f6c343;   /* gold */

  --brand2:#d23b3b;  /* red accent */

  --line:rgba(255,255,255,.12);

  --shadow: 0 14px 35px rgba(0,0,0,.35);

  --radius: 18px;

  --max: 1120px;

}



*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  background: radial-gradient(1200px 700px at 20% -10%, rgba(246,195,67,.18), transparent 60%),

              radial-gradient(900px 600px at 90% 10%, rgba(210,59,59,.14), transparent 55%),

              var(--bg);

  color:var(--text);

  line-height:1.6;

}
.notice-banner { padding: 14px 0; border: 1px solid rgba(255,255,255,.10); border-radius: 16px; margin: 18px auto; }
.notice-banner-inner { display:flex; gap:14px; align-items:center; justify-content:space-between; }

.modal-backdrop { position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.55); z-index:9999; }
.modal-backdrop.open { display:flex; }
.modal { width:min(560px, 100%); padding:18px; border-radius:18px; border:1px solid rgba(255,255,255,.12); background:rgba(20,22,30,.96); }
.modal-actions { display:flex; gap:10px; justify-content:flex-end; margin-top:12px; }

/* SuperBowl squares remaining */
.sb-status .sb-status-row { display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.sb-big { display:flex; flex-direction:column; gap:4px; font-size:2rem; font-weight:800; line-height:1; }
.sb-sub { font-size:0.95rem; font-weight:500; opacity:.85; }
.sb-note { opacity:.95; max-width:420px; }


a{color:inherit;text-decoration:none}

a:hover{opacity:.92}

img{max-width:100%;display:block}



.container{max-width:var(--max);margin:0 auto;padding:0 18px}

.small{font-size:.95rem;color:var(--muted)}

.badge{

  display:inline-flex;gap:8px;align-items:center;

  padding:7px 12px;border:1px solid var(--line);

  border-radius:999px;background:rgba(255,255,255,.04);

  color:var(--muted);font-weight:600;

}



header{

  position:sticky;top:0;z-index:50;

  backdrop-filter: blur(10px);

  background: rgba(11,18,32,.72);

  border-bottom:1px solid var(--line);

}



.nav{

  display:flex;align-items:center;justify-content:space-between;

  padding:12px 0;

  gap:14px;

}

.brand{

  display:flex;gap:12px;align-items:center;

}

.brand-mark{

  width:42px;height:42px;border-radius:12px;

  background: linear-gradient(135deg, rgba(246,195,67,.95), rgba(210,59,59,.90));

  box-shadow: var(--shadow);

}

.brand h1{font-size:1.05rem;margin:0;line-height:1.1}

.brand span{display:block;font-size:.82rem;color:var(--muted);font-weight:600}



.nav-links{

  display:flex;gap:14px;align-items:center;flex-wrap:wrap;

}

.nav-links a{

  padding:8px 10px;border-radius:10px;

  color:var(--muted);font-weight:650;

}

.nav-links a.active, .nav-links a:hover{

  background:rgba(255,255,255,.06);

  color:var(--text);

}



.btn{

  display:inline-flex;align-items:center;justify-content:center;

  gap:8px;

  padding:11px 14px;border-radius:12px;

  border:1px solid var(--line);

  background:rgba(255,255,255,.06);

  color:var(--text);font-weight:750;

}

.btn.primary{

  background: linear-gradient(135deg, rgba(246,195,67,.95), rgba(210,59,59,.90));

  border:none;color:#141414;

}

.btn.primary:hover{filter:saturate(1.04) brightness(1.02)}

.btn.ghost{background:transparent}

.btn.small{padding:9px 12px;font-size:.95rem}



.hero{

  padding:42px 0 28px;

}

.hero-grid{

  display:grid;grid-template-columns: 1.25fr .85fr;gap:22px;align-items:stretch;

}

.hero-card{

  border:1px solid var(--line);

  border-radius: var(--radius);

  background: rgba(255,255,255,.04);

  box-shadow: var(--shadow);

  overflow:hidden;

}

.hero-left{padding:26px}

.kicker{color:var(--muted);font-weight:700;letter-spacing:.02em}

.hero h2{margin:10px 0 10px;font-size:2rem;line-height:1.15}

.hero p{margin:0 0 16px;color:var(--muted);max-width:62ch}

.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}



.hero-right{

  display:grid;grid-template-rows:auto 1fr;

}

.hero-photo{

  border-bottom:1px solid var(--line);

  min-height:180px;

  background:

    linear-gradient(180deg, rgba(11,18,32,.35), rgba(11,18,32,.88)),

    url("assets/img/hero.jpg") center/cover no-repeat;

}

.hero-right .hero-right-inner{padding:18px}

.list{

  display:grid;gap:10px;margin:10px 0 0;padding:0;list-style:none;

}

.list li{

  padding:12px 12px;border:1px solid var(--line);

  border-radius:14px;background:rgba(255,255,255,.03);

  color:var(--muted)

}



.section{padding:22px 0 44px}

.section h3{margin:0 0 10px;font-size:1.45rem}

.grid{

  display:grid;gap:16px;

  grid-template-columns:repeat(12,1fr);

}

.card{

  grid-column: span 6;

  border:1px solid var(--line);

  border-radius: var(--radius);

  background: rgba(255,255,255,.04);

  box-shadow: var(--shadow);

  padding:18px;

}

.card h4{margin:0 0 8px}

.card p{margin:0;color:var(--muted)}

.card .meta{margin-top:12px;color:var(--muted);font-size:.95rem}

.card.full{grid-column: span 12}

.card.third{grid-column: span 4}

.card.twoThird{grid-column: span 8}



.hr{height:1px;background:var(--line);margin:16px 0}



.gallery{
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

.gallery a{
  display: block;
  height: 200px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.03);
}

.gallery img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}



.donate-blurb {

  background: #f8f9fb;

  border-top: 1px solid #e5e7eb;

  border-bottom: 1px solid #e5e7eb;

}



.table{

  width:100%;

  border-collapse:separate;border-spacing:0;

  overflow:hidden;border-radius:16px;

  border:1px solid var(--line);

}

.table th,.table td{

  padding:12px 12px;

  border-bottom:1px solid var(--line);

}

.table th{color:var(--muted);text-align:left;background:rgba(255,255,255,.04)}

.table tr:last-child td{border-bottom:none}



.footer{

  border-top:1px solid var(--line);

  padding:26px 0;color:var(--muted);

  background: rgba(255,255,255,.02);

}

.footer-grid{display:grid;gap:14px;grid-template-columns: 1.2fr .8fr .8fr}

.footer a{color:var(--muted);text-decoration:underline;text-underline-offset:3px}

.footer strong{color:var(--text)}



@media (max-width: 900px){

  .hero-grid{grid-template-columns: 1fr}

  .gallery{grid-template-columns: repeat(2, 1fr)}

  .card.third{grid-column: span 6}

  .card.twoThird{grid-column: span 12}

  .footer-grid{grid-template-columns: 1fr}

}

@media (max-width: 520px){

  .gallery{grid-template-columns: 1fr}

  .card{grid-column: span 12}

}

.card-flex {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

}



.card-text {

  max-width: 65%;

}



.card-action {

  display: flex;

  align-items: center;

  justify-content: center;

}



/* Stripe Button */

.stripe-btn {

  padding: 16px 22px;

  background: linear-gradient(135deg, #caa23c, #f2d16b); /* gold */

  color: #1a1a1a;

  font-weight: bold;

  text-align: center;

  text-decoration: none;

  border-radius: 10px;

  box-shadow: 0 6px 14px rgba(0,0,0,0.35);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.stripe-btn:hover {

  transform: translateY(-2px);

  box-shadow: 0 10px 22px rgba(0,0,0,0.45);

}

/* ===== History page add-ons (uses your theme variables) ===== */

.history-feature-inner{

  display:grid;

  grid-template-columns: 1.15fr .85fr;

  gap:16px;

  align-items:start;

}



.history-figure{

  margin:0;

  border:1px solid var(--line);

  border-radius:16px;

  background: rgba(255,255,255,.03);

  overflow:hidden;

}



.history-figure img{width:100%;height:auto;display:block}



.history-figure figcaption{

  margin:0;

  padding:10px 12px;

  border-top:1px solid var(--line);

}



.history-gallery a{display:block}



@media (max-width: 900px){

  .history-feature-inner{grid-template-columns: 1fr;}

}