/* ================================
   layout.css — Global layout + theme tokens
   Moonvale Meadow 
   ================================ */

/* ----------------
   Theme tokens
   ---------------- */
:root{
  /* Background */
  --bg-image: url("moonvale.png");

  /* Core palette */
  --c-deep: #093944;                 /* deep teal */
  --c-deep-alpha: rgba(9, 57, 68, .85);

  --c-accent: #9ed3e3;               /* ice blue */
  --c-accent-soft: #c9e9f9;          /* mist blue */
  --c-sage: #2a6f66;

  /* Text */
  --text: #173a35;
  --text-soft: #1d4a44;

  /* Surfaces (boxes) */
  --surface: rgba(230, 248, 246, .68);
  --surface-strong: rgba(230, 248, 246, .80);

  /* Effects */
  --shadow: 0 0 20px rgba(0,0,0,.30);

  /* Glows */
  --glow-active: 0 0 4px #fff, 0 0 6px var(--c-accent-soft), 0 0 10px var(--c-accent-soft);
  --glow-hover: 0 0 2px #fff, 0 0 4px var(--c-accent-soft);

  /* Scrollbars */
  --scroll-thumb: #7fd0cc;
  --scroll-track: rgba(230, 248, 246, .85);

  /* Dropdown */
  --dropdown-bg: rgba(4, 38, 42, .96);
  --dropdown-border: rgba(127, 208, 204, .55);
  --dropdown-hover: rgba(127, 208, 204, .22);

  /* Layout sizing */
  --site-width: 950px;
  --box-radius: 1rem;
  --box-pad: .5rem;
  --box-pad-columns: 0rem 1rem 0rem 1rem;
  --nav-font: 'IM Fell English SC', serif;

  --mv-surface: rgba(244,239,255,0.65);
  --mv-shadow: 0 0 20px rgba(0,0,0,0.3);
  --mv-ink: #062930a9;
  --mv-deep-teal: #093944;
}

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

html, body{ height:100%; }

/* prevent whole-page scrollbar */
html, body{ overflow:hidden; }

body{
  margin:0;
  background: var(--bg-image) no-repeat top center fixed;
  background-size:cover;

  font-family:sans-serif;
  color:var(--text);

  overflow-x:hidden;
}

/* ----------------
   Header row (top)
   ---------------- */
.header-row{
  position:relative;
  width:var(--site-width);
  margin:10px auto 5px;

  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:center;

  font-family:var(--nav-font);
  font-size:56px;
  color:var(--c-accent);
  text-shadow:3px 3px 6px #000000aa;
  white-space:nowrap;
}

.site-header .star{
  font-size:28px;
  color:var(--scroll-thumb);
  text-shadow:1px 1px 3px #00000066;
  margin:0 10px;
}

.header-row .top-link{
  position:absolute;
  right:0;
  bottom:0;

  font-family:var(--nav-font);
  font-size:18px;
  font-weight:bold;

  white-space:nowrap;
  text-decoration:none;
  color:var(--c-accent);
}

.header-row .top-link:hover{
  color:var(--c-accent-soft);
  text-shadow:var(--glow-hover);
}

/* --------------
   Sticky Nav Bar
   -------------- */
#global-nav-wrapper{
  position:sticky;
  top:0;
  z-index:100;

  width:var(--site-width);
  margin:0 auto;
}

#global-nav{
  background:var(--c-deep-alpha);
  padding:4px 16px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:16px;

  border-radius:6px;
  box-shadow:0 0 10px rgba(0,0,0,.50);

  font-family:var(--nav-font);
  font-size:22px;
}

/* Desktop nav spacing */
#global-nav .nav-links{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
}

#global-nav a{
  color:var(--c-accent);
  text-decoration:none;
  transition:color .15s, text-shadow .15s;
}
#global-nav a:hover{
  color:var(--c-accent-soft);
  text-shadow:var(--glow-hover);
}
#global-nav a.active{
  color:var(--c-accent-soft);
  text-shadow:var(--glow-active);
}

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

.dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  min-width:120px;

  background:var(--dropdown-bg);
  border:1px solid var(--dropdown-border);
  box-shadow:0 0 12px rgba(127,208,204,.35);

  display:none;
  z-index:999;
}

.dropdown-menu a{
  display:block;
  padding:6px 10px;
  white-space:nowrap;
  text-decoration:none;
  color:var(--c-accent);
}
.dropdown-menu a:hover{
  background:var(--dropdown-hover);
}
.nav-dropdown:hover .dropdown-menu{
  display:block;
}

/* ------------------------
   Main stack + content box
   ------------------------ */
.content-stack{
  width:var(--site-width);
  margin:6px auto 0;
  position:relative;
  overflow:visible;
}

/* Base content box (all pages) */
.content-box{
  width:100%;
  overflow:auto;
  overflow-x:hidden;

  background:var(--surface);
  padding:var(--box-pad);
  border-radius:var(--box-radius);
  box-shadow:var(--shadow);
}

/* Universal scrollbars for scrollable boxes */
.content-box::-webkit-scrollbar,
.sidebar-left::-webkit-scrollbar{
  width:8px;
}
.content-box::-webkit-scrollbar-thumb,
.sidebar-left::-webkit-scrollbar-thumb{
  background:var(--scroll-thumb);
  border-radius:6px;
  border:2px solid var(--scroll-track);
}

/* ==========================
   Two-column layout helpers
   ========================== */
.columns{
  display:flex;
  gap:16px;
  align-items:stretch;

  height:100%;
  min-height:0;
}
.columns > *{ min-height:0; }

/* Main box behaves as a flex child ONLY inside columns */
.columns .content-box{
  flex:1 1 auto;
  height:100%;
  padding:var(--box-pad-columns);
}

/* Sidebar */
.sidebar-left{
  flex:0 0 160px;
  flex-shrink:0;

  background:var(--surface);
  padding:1rem;
  border-radius:var(--box-radius);

  font-family:var(--nav-font);
  font-size:18px;

  overflow-y:auto;
  box-shadow:0 0 10px rgba(0,0,0,.20);
  max-height:100%;
}

.sidebar-left a{
  display:block;
  margin:6px 0;

  color:var(--text);      
  text-decoration:none;
  text-align:center;
  font-weight:600;
}
.sidebar-left a:hover{
  color:var(--c-accent-soft);
  text-shadow:var(--glow-hover);
}
.sidebar-left a.active{
  color:var(--c-accent-soft);
  text-shadow:var(--glow-active);
  font-weight:700;
}

/* Sidebar team year header */
.sidebar-year{
  text-align:center;
  font-family:var(--nav-font);
  font-size:20px;
  font-weight:700;
  margin:6px 0 10px;

  color:var(--c-sage);
  text-shadow:
    0 0 6px rgba(201,233,249,.75),
    0 0 12px rgba(127,208,204,.35);
  letter-spacing:.5px;
}

/* Divider under team header */
.sidebar-year-divider{
  border:none;
  height:1px;
  background:rgba(127,208,204,.55);
  margin:6px 0 12px;
}

/* Mascot */
.content-stack .mascot{
  position:absolute;
  right:0;
  bottom:-30px;
  transform: translateX(50%);
  width:auto;
  height:auto;
  pointer-events:none;
  z-index:50;
}

.mobile-nav-toggle,
.scroll-top-btn{
  display:none;
}

@media (max-width:1024px){

  html, body{
    height:auto;
    overflow:auto;
  }

  body{
    background-attachment:scroll;
    background-position:top center;
    background-size:cover;
  }

  .header-row,
  #global-nav-wrapper,
  .content-stack{
    width:92%;
  }

  .header-row{
    display:block;
    text-align:center;
  }

  .site-header{
    font-size:34px;
    white-space:normal;
  }

  .header-row .top-link{
    position:static;
    display:block;
    margin-top:6px;
  }

  #global-nav-wrapper{
    position:relative;
    top:auto;
  }

  #global-nav{
    display:block;
    width:100%;
    padding:8px 10px;
  }

  .mobile-nav-toggle{
    display:block;
    width:100%;
    padding:10px 12px;
    font-family:var(--nav-font);
    font-size:22px;
    background:var(--c-deep-alpha);
    border:1px solid rgba(127,208,204,.55);
    border-radius:6px;
    color:var(--c-accent);
    cursor:pointer;
    box-shadow:0 0 10px rgba(0,0,0,.35);
  }

  #global-nav .nav-links{
    display:none;
    margin-top:8px;
    background:var(--c-deep-alpha);
    border-radius:6px;
    box-shadow:0 0 10px rgba(0,0,0,.35);
    padding:6px 0;
  }

  #global-nav .nav-links.open{
    display:block;
  }

  #global-nav .nav-links > a,
  #global-nav .nav-dropdown > a{
    display:block;
    width:100%;
    text-align:left;
    padding:10px 14px;
  }

  .nav-dropdown{
    display:block;
    position:static;
  }

  .dropdown-menu{
    position:static;
    display:block;
    min-width:0;
    margin:0;
    padding:0 0 6px 16px;
    border:none;
    box-shadow:none;
    background:none;
  }

  .dropdown-menu a{
    display:block;
    text-align:left;
    padding:6px 14px;
    white-space:normal;
  }

  .content-stack{
    margin:6px auto 16px;
  }

  .columns{
    display:flex;
    flex-direction:column;
    gap:12px;
    height:auto !important;
    min-height:0;
  }

  .sidebar-left{
    flex:none;
    width:100%;
    max-height:none;
    overflow:visible;
  }

  .content-box,
  .columns .content-box{
    width:100%;
    height:auto !important;
    max-height:none;
    overflow:visible;
    padding:.75rem;
  }

  .content-stack .mascot{
    display:none;
  }

  .litter-images{
    display:flex;
    flex-direction:column;
  }

  .litter-images img{
    width:100%;
    max-width:100%;
  }

  .scroll-top-btn{
    display:block;
    position:fixed;
    right:14px;
    bottom:14px;
    z-index:9999;
    padding:10px 12px;
    border:1px solid rgba(127,208,204,.55);
    border-radius:999px;
    background:rgba(8,22,26,.9);
    color:var(--c-accent);
    font-family:var(--nav-font);
    font-size:18px;
    cursor:pointer;
    opacity:0;
    pointer-events:none;
    transform:translateY(8px);
    transition:opacity .2s ease, transform .2s ease;
  }

  .scroll-top-btn.show{
    opacity:1;
    pointer-events:auto;
    transform:translateY(0);
  }
  .litter-images{
    display:flex !important;
    flex-direction:column !important;
    gap:12px;
  }

  .litter-images img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    min-width:100% !important;
    flex:none !important;
    height:auto !important;
    object-fit:contain;
  }
  [id]{
  scroll-margin-top:110px;
}
}