/* =========================================================
   Ocean Liner Curator — theme.css (extracted from index.html)
   House style: dark museum plate, lattice glow, curator nav
   ========================================================= */

/* ---------- Base Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { text-rendering: optimizeLegibility; }

h1, h2, h3 { letter-spacing: -0.02em; }

/* ---------- Theme Tokens (from your :root) ---------- */
:root{
  --bg:#0a1110;
  --panel:rgba(15,27,25,0.78);
  --text:#e6dfcf;
  --muted:#b6ae9c;
  --accent:#bfa46a;
  --border:rgba(191,164,106,0.28);
  --shadow:rgba(0,0,0,0.60);
  --link:rgba(209,187,134,0.95);
  --font-sans:"Spectral", Georgia, "Times New Roman", serif;
}

/* ---------- Body / Page Background ---------- */
body{
  margin:0;
  font-family:var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  font-size:17px;
  line-height:1.55;
  letter-spacing:-0.01em;
  color:var(--text);

  background:
    radial-gradient(900px 600px at 50% 18%, rgba(24,40,38,0.95) 0%, rgba(10,17,16,1) 62%),
    radial-gradient(1200px 900px at 50% 110%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 60%);

  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;

  /* spacing controlled by header + container margin */
  padding: 0 0 2.25rem;
}

/* =========================================================
   TOP MENU BAR (alignment + stacking)
   ========================================================= */
.site-header{
  width:100%;
  margin:0;
  padding:0.75rem 0;
  background:rgba(15,27,25,0.55);
  border-bottom:1px solid rgba(191,164,106,0.22);
  position:relative;
  z-index:5000;
}

.header-inner{
  width:min(780px, calc(100% - 1.5rem));
  margin:0 auto;
  padding:0 2.75rem; /* match container padding */
}

.site-nav{
  display:flex;
  align-items:center;
  gap:1.1rem;
  flex-wrap:wrap;
  font-size:0.95rem;
}

.nav-link{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid rgba(191,164,106,0.35);
  padding-bottom:2px;
}
.nav-link:hover{ border-bottom-color: rgba(191,164,106,0.65); }

/* Dropdown */
.nav-dropdown{ position:relative; }

.nav-dropdown summary{
  cursor:pointer;
  list-style:none;
  display:inline-block; /* iOS click target */
  -webkit-tap-highlight-color: transparent;
}
.nav-dropdown summary::-webkit-details-marker{ display:none; }

.dropdown-panel{
  position:absolute;
  top:1.8rem;
  left:0;
  min-width:240px;
  background:rgba(15,27,25,0.95);
  border:1px solid rgba(191,164,106,0.28);
  border-radius:12px;
  padding:0.75rem;
  display:flex;
  flex-direction:column;
  gap:0.35rem;
  z-index:6000;
  box-shadow:0 18px 45px rgba(0,0,0,0.45);
}

.dropdown-panel a{
  color:var(--link);
  text-decoration:none;
  border-bottom:1px solid rgba(191,164,106,0.25);
  padding:0.2rem 0;
}
.dropdown-panel a:hover{ border-bottom-color: rgba(191,164,106,0.55); }

/* =========================================================
   MAIN CONTAINER (card + lattice + glow + compass/grain)
   ========================================================= */
.container{
  width:min(780px, calc(100% - 1.5rem));
  margin:1.1rem auto 0;
  text-align:center;

  background-color:rgba(15,27,25,0.78);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'%3E%3Cg fill='none' stroke='rgba(191,164,106,0.03)' stroke-width='1'%3E%3Cpath d='M0.5 0.5H79.5V79.5H0.5Z'/%3E%3Cpath d='M0.5 0.5L79.5 79.5M79.5 0.5L0.5 79.5'/%3E%3C/g%3E%3C/svg%3E");
  background-size:92px 92px;
  background-position:center 38%;
  background-repeat:repeat;

  border:1px solid var(--border);
  border-radius:16px;
  padding:3.5rem 2.75rem;

  box-shadow:
    0 26px 70px rgba(0,0,0,0.60),
    0 0 0 1px rgba(191,164,106,0.08),
    0 0 80px rgba(191,164,106,0.06);

  position:relative;
  overflow:hidden;
  z-index:1;
}

/* Soft inner lighting */
.container::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(800px 500px at 50% 18%, rgba(255,255,255,0.07) 0%, rgba(0,0,0,0) 55%),
    radial-gradient(900px 700px at 50% 120%, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 55%);
  pointer-events:none;
  z-index:0;
}

/* Grain/sparkle + compass overlay */
.container::after{
  content:"";
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,0.03), transparent 38%),
    radial-gradient(circle at 70% 35%, rgba(255,255,255,0.02), transparent 44%),
    radial-gradient(circle at 50% 80%, rgba(255,255,255,0.015), transparent 55%),

    radial-gradient(circle at center,
      rgba(191,164,106,0.095) 0%,
      rgba(191,164,106,0.075) 20%,
      rgba(191,164,106,0.045) 26%,
      transparent 34%),

    linear-gradient(45deg,
      transparent 47.5%,
      rgba(191,164,106,0.065) 49%,
      rgba(191,164,106,0.065) 51%,
      transparent 52.5%),
    linear-gradient(-45deg,
      transparent 47.5%,
      rgba(191,164,106,0.065) 49%,
      rgba(191,164,106,0.065) 51%,
      transparent 52.5%);
  pointer-events:none;
  z-index:0;
  opacity:0.95;
}

.container > *{ position:relative; z-index:1; }

/* =========================================================
   BRAND / LOGO MOUNT
   ========================================================= */
.logo-mount{
  width:108px;
  height:108px;
  margin:0 auto 0.95rem auto;
  padding:10px;
  border-radius:16px;
  border:1px solid rgba(191,164,106,0.55);
  background:linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.10));
  box-shadow:0 14px 34px rgba(0,0,0,0.42);
  position:relative;
}

.logo-mount::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:12px;
  border:1px solid rgba(191,164,106,0.22);
  pointer-events:none;
}

.logo{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  border-radius:12px;
  background:rgba(230,223,207,0.06);

  /* ensure logo stays above background but below wreath */
  position:relative;
  z-index:1;
}

/* =========================================================
   Typography + Rules
   ========================================================= */
h1{
  margin:0 0 0.8rem 0;
  font-weight:600;
  font-feature-settings:"kern" 1, "liga" 1;
  font-size:2.55rem;
  letter-spacing:0.6px;
}

.rule{
  width:140px;
  height:2px;
  margin:1.1rem auto 1.7rem auto;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity:0.85;
}

p{
  margin:0 auto 1.55rem auto;
  max-width:64ch;
  font-size:1.06rem;
  line-height:1.72;
}

/* Tip block */
.tip{
  margin:0 0 2.2rem 0;
  font-size:0.96rem;
  color:var(--muted);
}
.tip strong{ color:var(--text); font-weight:600; }
.tip-modes{ display:block; margin-top:0.25rem; }

/* =========================================================
   Buttons + Links
   ========================================================= */
a.button{
  display:inline-block;
  padding:0.95rem 1.9rem;
  font-size:1rem;
  letter-spacing:0.4px;
  text-decoration:none;
  color:#0a1110;
  background:linear-gradient(180deg, #d7c08a 0%, var(--accent) 100%);
  border:1px solid rgba(0,0,0,0.35);
  border-radius:12px;
  box-shadow:0 12px 26px rgba(0,0,0,0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

a.button:hover{
  transform:translateY(-1px);
  filter:brightness(1.03);
  box-shadow:0 14px 34px rgba(0,0,0,0.38);
}

a.button:focus-visible{
  outline:2px solid rgba(191,164,106,0.75);
  outline-offset:3px;
}

/* About link blocks (used for multiple simple links) */
.about-link{
  margin-top:1.1rem;
  font-size:0.9rem;
  color:var(--muted);
}

a.button + .about-link{ margin-top:1.8rem; }

.about-link a{
  color:rgba(209,187,134,0.9);
  text-decoration:none;
  border-bottom:1px solid rgba(191,164,106,0.35);
}
.about-link a:hover{ border-bottom-color:rgba(191,164,106,0.65); }

/* =========================================================
   Footer
   ========================================================= */
footer{
  margin-top:2.8rem;
  font-size:0.82rem;
  line-height:1.6;
  color:rgba(230,223,207,0.72);
  max-width:74ch;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}

.flags-footer{
  display:block;
  width:108px;
  height:auto;
  margin:1.1rem auto -0.2rem;
  opacity:0.42;
  filter:saturate(0.85) contrast(0.95) brightness(0.95);
  pointer-events:none;
}

.copyright{
  font-size:0.72rem;
  opacity:0.55;
  margin-top:1.2rem;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:520px){
  .site-header{ padding:0.65rem 0; }

  .header-inner{
    width:calc(100% - 1.5rem);
    padding:0 1.25rem;
  }

  .container{
    width:calc(100% - 1.5rem);
    margin:1.05rem auto 0;
    padding:1.9rem 1.25rem;
    border-radius:14px;
    background-size:54px 54px;
  }

  .logo-mount{
    width:88px;
    height:88px;
    padding:8px;
    margin-bottom:0.75rem;
    border-radius:14px;
  }

  .logo-mount::after{ inset:6px; border-radius:11px; }
  .logo{ border-radius:11px; }

  h1{
    font-size:1.9rem;
    letter-spacing:0.4px;
    margin-bottom:0.6rem;
  }

  .rule{
    width:110px;
    margin:0.9rem auto 1.25rem auto;
  }

  p{
    font-size:0.98rem;
    line-height:1.65;
    margin-bottom:1.15rem;
  }

  .tip{
    font-size:0.9rem;
    margin-bottom:1.55rem;
  }

  a.button{
    width:100%;
    padding:0.95rem 1.1rem;
  }

  footer{
    margin-top:1.8rem;
    font-size:0.78rem;
  }

  .flags-footer{
    width:92px;
    margin:0.9rem auto 0;
    opacity:0.35;
  }
}

@media (prefers-reduced-motion: reduce){
  a.button{ transition:none; }
}

/* =========================================================
   OPTIONAL / SEASONAL (homepage currently uses these)
   You can keep these in theme.css, or move later to seasonal.css
   ========================================================= */

/* Holiday wreath overlay (safe, removable) */
.wreath-wrap{ position:relative; }

.logo-wreath{
  position:absolute;
  inset:-14px;                 /* controls how much larger than logo */
  width:calc(100% + 28px);
  height:calc(100% + 28px);
  object-fit:contain;
  pointer-events:none;
  z-index:2;
  transform: scale(1.50);
}

@media (max-width:520px){
  .logo-wreath{ inset:-10px; }
}

/* Engraved holly divider (image-based, stable) */
.holly-engraved-img{
  display:block;
  width:min(320px, 92%);
  height:auto;
  margin:0.35rem auto 1.1rem;
  opacity:0.9;
  filter: contrast(0.95) saturate(0.85);
}