/* ═══════════════════════════════════════════════════════
   shared.css — Tolleration shared styles
   Include in every page: <link rel="stylesheet" href="shared.css"/>
   ═══════════════════════════════════════════════════════ */

:root {
  --cream:      #f1e8d4;
  --cream-dark: #e6d9c0;
  --ox:         #8a2818;
  --ox-faint:   rgba(138,40,24,0.18);
  --ox-ghost:   rgba(138,40,24,0.06);
  --ink:        #1e130a;
  --ink-mid:    #3d2b1a;
  --ink-soft:   #5a4a3a;
  --gold:       #b8913a;
}

/* DARK MODE */
:root[data-theme="dark"] {
  --cream:      #f0e6cc;
  --cream-dark: #1e1812;
  --ox:         #c8a84a;
  --ox-faint:   rgba(200,168,74,0.22);
  --ox-ghost:   rgba(200,168,74,0.07);
  --ink:        #f0e6cc;
  --ink-mid:    #d4c8a8;
  --ink-soft:   #b8a888;
  --gold:       #c8a84a;
}
:root[data-theme="dark"] body      { background:#1a1410; color:#f0e6cc; }
:root[data-theme="dark"] body::before { opacity:0.35; }

/* BASE */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--cream); color:var(--ink);
  font-family:'Cormorant Garamond',Georgia,serif;
  font-size:18px; line-height:1.75;
}
body::before {
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  background-size:200px 200px; opacity:0.55;
}
.page { position:relative; z-index:1; min-height:100vh; display:flex; flex-direction:column; }

/* TOPBAR */
.topbar { position:fixed;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:46px;background:rgba(241,232,212,0.97);backdrop-filter:blur(6px);border-bottom:1px solid var(--ox-faint);z-index:900; }
.topbar-name { font-family:'IM Fell English',Georgia,serif;font-size:13px;letter-spacing:0.22em;color:var(--ink);text-transform:uppercase;text-decoration:none; }
.topbar-right { display:flex;align-items:center; }
.theme-toggle { background:none;border:1px solid var(--ox-faint);width:32px;height:32px;cursor:pointer;display:flex;align-items:center;justify-content:center;margin-right:12px;transition:border-color 0.2s;flex-shrink:0;padding:0; }
.theme-toggle:hover { border-color:var(--ox); }
.theme-toggle svg { width:15px;height:15px;display:block; }
.icon-sun  { display:none; }
.icon-moon { display:block; }
:root[data-theme="dark"] .icon-sun  { display:block; }
:root[data-theme="dark"] .icon-moon { display:none; }
:root[data-theme="dark"] .topbar { background:rgba(26,20,16,0.97);border-bottom-color:rgba(200,168,74,0.22); }
:root[data-theme="dark"] .topbar-name { color:#f0e6cc; }
.login-wrap { position:relative; }
.topbar-login { font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:0.18em;color:var(--ink-soft);opacity:0.32;cursor:not-allowed;border:1px solid var(--ox-faint);padding:6px 16px;user-select:none;display:block;margin-right:14px; }
.login-tooltip { position:absolute;top:calc(100% + 8px);right:0;font-size:10px;letter-spacing:0.1em;white-space:nowrap;background:var(--ink);color:var(--cream);padding:4px 10px;opacity:0;pointer-events:none;transition:opacity 0.2s;z-index:10; }
.login-wrap:hover .login-tooltip { opacity:1; }
:root[data-theme="dark"] .login-tooltip { background:#f0e6cc;color:#1a1410; }

:root[data-theme="dark"] .topbar-submit { background:var(--ox);color:#1a1410;border-color:var(--ox); }
:root[data-theme="dark"] .topbar-submit:hover { background:transparent;color:var(--ox); }

/* SITENAV */
.sitenav { display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;border-bottom:1px solid var(--ox-faint);background:rgba(241,232,212,0.97);backdrop-filter:blur(6px);position:fixed;top:46px;left:0;right:0;z-index:800;height:44px; }
.sitenav a { font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-soft);text-decoration:none;padding:0 20px;border-right:1px solid var(--ox-faint);transition:color 0.2s,background 0.2s;white-space:nowrap;display:flex;align-items:center; }
.sitenav a:last-child { border-right:none; }
.sitenav a:hover { color:var(--ox);background:var(--ox-ghost); }
.sitenav a.active { color:var(--ox);background:var(--ox-ghost);border-bottom:2px solid var(--ox); }
:root[data-theme="dark"] .sitenav { background:rgba(26,20,16,0.97);border-color:rgba(200,168,74,0.22); }
:root[data-theme="dark"] .sitenav a { color:#b8a888; }
:root[data-theme="dark"] .sitenav a:hover { color:var(--ox);background:rgba(200,168,74,0.07); }
:root[data-theme="dark"] .sitenav a.active { color:var(--ox);background:rgba(200,168,74,0.07);border-bottom-color:var(--ox); }

/* HOME ICON */
.nav-home { display:flex;align-items:center;padding:11px 16px;border-right:1px solid var(--ox-faint); }
.nav-home svg { width:14px;height:14px;stroke:var(--ink-soft);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke 0.2s; }
.nav-home:hover svg,.nav-home.active svg { stroke:var(--ox); }
:root[data-theme="dark"] .nav-home svg { stroke:#b8a888; }
:root[data-theme="dark"] .nav-home:hover svg { stroke:var(--ox); }

/* ABOUT DROPDOWN */
.nav-about { position:relative;display:flex;align-items:stretch; }
.nav-about>a { display:flex;align-items:center;gap:5px;padding:11px 20px;border-right:1px solid var(--ox-faint); }
.nav-about>a .caret { width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:inline-block;margin-top:-3px;transition:transform 0.2s; }
.nav-about:hover>a .caret { transform:rotate(-135deg);margin-top:2px; }
.nav-about::after { content:'';position:absolute;top:100%;left:0;right:0;height:6px;background:transparent;z-index:999; }
.nav-dropdown { position:absolute;top:100%;right:0;min-width:190px;background:var(--ink);border:1px solid rgba(200,168,74,0.18);border-top:3px solid var(--ox);z-index:1000;opacity:0;pointer-events:none; }
:root[data-theme="dark"] .nav-dropdown { background:var(--cream);border:1px solid rgba(30,19,10,0.18);border-top:3px solid var(--ox); }
.nav-about:hover .nav-dropdown { opacity:1;pointer-events:all; }
.nav-dropdown a { display:block;font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:#c8a84a;text-decoration:none;padding:11px 18px;border-bottom:1px solid rgba(200,168,74,0.1);transition:background 0.15s,color 0.15s;white-space:nowrap; }
:root[data-theme="dark"] .nav-dropdown a { color:var(--ink-mid); }
.nav-dropdown a:last-child { border-bottom:none; }
.nav-dropdown a:hover { background:rgba(200,168,74,0.18);color:#f5edd0; }
:root[data-theme="dark"] .nav-dropdown a:hover { background:rgba(30,19,10,0.1);color:var(--ink); }
.nav-dropdown a.active { background:rgba(200,168,74,0.12);color:#f5edd0; }
:root[data-theme="dark"] .nav-dropdown a.active { background:rgba(30,19,10,0.06);color:var(--ink); }

/* EMAIL OBFUSCATION */
.eml { display:inline-flex;align-items:center;cursor:pointer;color:var(--ox);text-decoration:none; }
.eml-decoy { display:none; }
.eml-domain { unicode-bidi:bidi-override;direction:rtl; }

/* FOOTER */
footer { background:var(--cream-dark);border-top:1px solid var(--ox-faint);text-align:center;padding:44px 32px 0;margin-top:auto;overflow-x:hidden; }
.footer-name { font-family:'IM Fell English',serif;font-size:15px;letter-spacing:0.2em;color:var(--ink);text-transform:uppercase;margin-bottom:4px; }
.footer-sub { font-size:12px;font-style:italic;color:var(--ink-soft);letter-spacing:0.12em;margin-bottom:18px; }
.footer-meta { font-size:13px;color:var(--ink-mid);letter-spacing:0.06em;line-height:2.4; }
.footer-meta a { color:var(--ox);text-decoration:none; }
.footer-dots { color:var(--ox);font-size:13px;letter-spacing:0.4em;margin:16px 0; }
.footer-sister { background:var(--ink);padding:34px 32px 40px;text-align:center;margin-top:32px;margin-left:-32px;margin-right:-32px; }
.footer-sister .sister-label { font-family:'IM Fell English',serif;font-size:11px;letter-spacing:0.3em;text-transform:uppercase;color:var(--gold);opacity:0.7;display:block;margin-bottom:18px; }
.footer-sister .sister-links { font-size:13px;line-height:3.2;color:rgba(241,232,212,0.45); }
.footer-sister .sister-links a { color:rgba(241,232,212,0.78);text-decoration:none;border-bottom:1px solid rgba(138,40,24,0.35);padding-bottom:1px;margin:0 8px;transition:color 0.2s,border-color 0.2s; }
.footer-sister .sister-links a:hover { color:#f1e8d4;border-color:var(--ox); }
:root[data-theme="dark"] footer { background:#111009;border-color:rgba(200,168,74,0.15); }
:root[data-theme="dark"] .footer-name { color:#f0e6cc; }
:root[data-theme="dark"] .footer-sub { color:#b8a888; }
:root[data-theme="dark"] .footer-meta { color:#b8a888; }
:root[data-theme="dark"] .footer-dots { color:var(--ox); }
:root[data-theme="dark"] .footer-sister { background:#0a0806; }

@media(max-width:640px) {
  .topbar { padding:10px 16px; }
  .sitenav a { padding:9px 10px;font-size:10px; }
  .footer-sister { padding-left:18px;padding-right:18px; }
}

/* ── RESPONSIVE TOPBAR ─────────────────────────────────── */
.topbar-submit {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.submit-short { display:none; }
.submit-full  { display:inline; }

@media(max-width:600px) {
  .submit-short { display:inline; }
  .submit-full  { display:none; }
  .topbar { padding:10px 12px; }
  .topbar-name { font-size:11px; letter-spacing:0.15em; }
  .topbar-login { padding:5px 10px; margin-right:8px; font-size:10px; }
  .topbar-submit { padding:5px 12px; font-size:10px; }
  .theme-toggle { width:28px; height:28px; margin-right:8px; }
  .access-toggle { width:28px; height:28px; margin-right:8px; }
}

/* ── ACCESSIBILITY TOGGLE BUTTON ───────────────────────── */
.access-toggle svg { stroke:var(--ink-soft); transition:stroke 0.2s; }
.access-toggle:hover svg { stroke:var(--ox); }
[data-access="high"] .access-toggle { border-color:var(--ox); }
[data-access="high"] .access-toggle svg { stroke:var(--ox); }

/* param-val dark mode fix */
:root[data-theme="dark"] .param-val { color:#d4c8a8; }
:root[data-theme="dark"] .param-list { border-color:rgba(200,168,74,0.2); }
:root[data-theme="dark"] .param-row { border-color:rgba(200,168,74,0.1); }
:root[data-theme="dark"] .param-key { border-right-color:rgba(200,168,74,0.15); }

/* ── ABOUT — click-triggered horizontal sub-bar ─────────── */
.nav-about{position:relative;display:flex;align-items:stretch;}
.nav-about>a{display:flex;align-items:center;gap:5px;padding:11px 20px;border-right:1px solid var(--ox-faint);cursor:pointer;}
.nav-about>a .caret{width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);display:inline-block;margin-top:-3px;transition:transform 0.2s;}
.nav-about.open>a .caret{transform:rotate(-135deg);margin-top:2px;}
.nav-dropdown{display:none !important;}
.nav-about::after{display:none;}
.nav-subbar{
  position:fixed;left:0;right:0;width:100%;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  background:var(--ox);
  border-bottom:1px solid rgba(138,40,24,0.4);
  z-index:1001;
  height:0;
  visibility:hidden;
  transition:height 0.2s ease,opacity 0.2s ease,visibility 0s 0.2s;
  opacity:0;pointer-events:none;
}
.nav-subbar.open{height:44px;visibility:visible;opacity:1;pointer-events:all;transition:height 0.2s ease,opacity 0.2s ease;}
:root[data-theme="dark"] .nav-subbar{background:var(--gold);border-bottom-color:rgba(184,145,58,0.4);}
.nav-subbar a{
  font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:0.18em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;padding:11px 20px;
  border-right:1px solid rgba(241,232,212,0.2);
  transition:background 0.15s,color 0.15s;white-space:nowrap;
}
:root[data-theme="dark"] .nav-subbar a{color:#1e130a;}
.nav-subbar a:last-child{border-right:none;}
.nav-subbar a:hover{background:rgba(0,0,0,0.15);color:#fff;}
:root[data-theme="dark"] .nav-subbar a:hover{background:rgba(0,0,0,0.12);color:#000;}
.nav-subbar a.active{background:rgba(0,0,0,0.2);color:#fff;}
:root[data-theme="dark"] .nav-subbar a.active{background:rgba(0,0,0,0.12);color:#000;}

/* ── ABOUT — click-triggered horizontal sub-bar ─────────── */
.nav-about.open>a .caret { transform:rotate(-135deg); margin-top:2px; }
.nav-dropdown { display:none !important; }
.nav-about::after { display:none; }

.nav-subbar {
  display:none;
  position:fixed;
  top:0; left:0; right:0; width:100%;
  flex-wrap:wrap; justify-content:center; align-items:center;
  background:var(--ox);
  border-bottom:2px solid rgba(138,40,24,0.4);
  z-index:9999;
  height:44px;
}
.nav-subbar.open { display:flex; }
:root[data-theme="dark"] .nav-subbar { background:var(--gold); border-bottom-color:rgba(184,145,58,0.4); }
.nav-subbar a {
  font-family:'Cormorant Garamond',serif; font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--cream); text-decoration:none; padding:11px 20px;
  border-right:1px solid rgba(241,232,212,0.2);
  white-space:nowrap; transition:background 0.15s;
}
:root[data-theme="dark"] .nav-subbar a { color:#1e130a; }
.nav-subbar a:last-child { border-right:none; }
.nav-subbar a:hover { background:rgba(0,0,0,0.15); }
:root[data-theme="dark"] .nav-subbar a:hover { background:rgba(0,0,0,0.1); }
.nav-subbar a.active { background:rgba(0,0,0,0.2); }

/* ── RESPONSIVE TOPBAR ──────────────────────────────────── */
.topbar-submit { display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.submit-short { display:none; }
.submit-full  { display:inline; }


/* ── ACCESSIBILITY TOGGLE ───────────────────────────────── */
.access-toggle svg { stroke:var(--ink-soft); transition:stroke 0.2s; }
.access-toggle:hover svg { stroke:var(--ox); }
[data-access="high"] .access-toggle { border-color:var(--ox); }
[data-access="high"] .access-toggle svg { stroke:var(--ox); }

/* ── DARK MODE EXTRAS ───────────────────────────────────── */
:root[data-theme="dark"] .param-val { color:#d4c8a8; }
:root[data-theme="dark"] .param-list { border-color:rgba(200,168,74,0.2); }
:root[data-theme="dark"] .param-row  { border-color:rgba(200,168,74,0.1); }
:root[data-theme="dark"] .param-key  { border-right-color:rgba(200,168,74,0.15); }

/* ── MOBILE NAV ──────────────────────────────────────────── */
@media(max-width:768px) {

  /* Hide Submit link in sitenav on mobile */
  .sitenav a[href="submit.php"], .sitenav a[href="submit.html"] { display:none !important; }

  /* About text hidden on mobile — hamburger only */
  .nav-about > a .about-text { display:none; }
  .nav-about > a .caret { display:none !important; }

  /* Hamburger icon — SVG for perfect uniform lines */
  .hamburger {
    display:block;
    width:18px; height:14px; flex-shrink:0;
    cursor:pointer;
  }

  /* 2nd nav vertical on mobile */
  .nav-subbar {
    flex-direction:column;
    height:auto !important;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease, opacity 0.2s ease;
    opacity:0;
    pointer-events:none;
  }
  .nav-subbar.open {
    max-height:300px;
    opacity:1;
    pointer-events:all;
    height:auto !important;
  }
  .nav-subbar a {
    padding:13px 24px;
    border-right:none;
    border-bottom:1px solid rgba(241,232,212,0.15);
    text-align:left;
    font-size:12px;
    letter-spacing:0.15em;
  }
  .nav-subbar a:last-child { border-bottom:none; }
}

@media(min-width:769px) {
  .hamburger { display:none; }
  .nav-about > a .about-text { display:inline; }
  .nav-subbar-announcements { display:none !important; }
}

/* ── MOBILE NAV ≤768px ──────────────────────────────────── */
@media(max-width:768px) {

  /* Hide Submit + Announcements in sitenav on mobile */
  .sitenav a[href="submit.php"],
  .sitenav a[href="submit.html"] { display:none !important; }
  .nav-announcements { display:none !important; }

  /* Hide About text and caret — hamburger replaces them */
  .nav-about > a .about-text { display:none; }
  .nav-about > a .caret { display:none !important; }

  /* Hamburger SVG */
  .hamburger { display:block; width:16px; height:12px; flex-shrink:0; }

  /* 2nd nav vertical on mobile */
  .nav-subbar {
    flex-direction: column;
    height: auto !important;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
    opacity: 0;
    pointer-events: none;
  }
  .nav-subbar.open {
    max-height: 300px;
    opacity: 1;
    pointer-events: all;
    height: auto !important;
  }
  .nav-subbar a {
    padding: 13px 24px;
    border-right: none;
    border-bottom: 1px solid rgba(241,232,212,0.15);
    text-align: left;
    font-size: 12px;
    letter-spacing: 0.15em;
  }
  .nav-subbar a:last-child { border-bottom: none; }
}

@media(min-width:769px) {
  .hamburger { display:none; }
  .nav-about > a .about-text { display:inline; }
  .nav-subbar-announcements { display:none !important; }
}

/* ── TOPBAR SUBMIT + MOBILE — exact match with index.html ── */
.topbar-submit{
  font-family:'Cormorant Garamond',serif;font-size:11px;letter-spacing:0.18em;
  color:var(--cream);background:var(--ox);padding:6px 18px;text-decoration:none;
  border:1px solid var(--ox);transition:background 0.3s,color 0.3s;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
}
.topbar-submit:hover{background:transparent;color:var(--ox);}
:root[data-theme="dark"] .topbar-submit{background:var(--ox);color:#1a1410;border-color:var(--ox);}
:root[data-theme="dark"] .topbar-submit:hover{background:transparent;color:var(--ox);}
.submit-short{display:none;}
.submit-full{display:inline;}
@media(max-width:600px){
  .submit-full{display:none;}
  .submit-short{display:inline;}
  .topbar{padding:10px 12px;}
  .topbar-name{font-size:11px;letter-spacing:0.15em;}
  .topbar-login{padding:5px 10px;margin-right:8px;font-size:10px;}
  .topbar-submit{padding:5px 12px;font-size:10px;}
  .theme-toggle{width:28px;height:28px;margin-right:8px;}
  .access-toggle{width:28px;height:28px;margin-right:8px;}
}

/* ── FOOTER SOCIAL ICONS ─────────────────────────────────── */
.footer-social {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 16px 0;
}
.footer-social-link {
  display: inline-flex;
  align-items: center;
  color: var(--ink-soft);
  transition: color 0.2s;
  opacity: 0.65;
}
.footer-social-link:hover { opacity: 1; }
.footer-social-link.bluesky:hover  { color: #0085ff; }
.footer-social-link.linkedin:hover { color: #0077b5; }
.footer-social-link.mastodon:hover { color: #6364ff; }
.footer-social-link svg { width: 17px; height: 17px; fill: currentColor; display: block; }
:root[data-theme="dark"] .footer-social-link { color: #b8a888; }
:root[data-theme="dark"] .footer-social-link.bluesky:hover  { color: #5bb8ff; }
:root[data-theme="dark"] .footer-social-link.linkedin:hover { color: #5aacdc; }
:root[data-theme="dark"] .footer-social-link.mastodon:hover { color: #a8a9ff; }
.footer-social-link.discord:hover { color: #5865f2; }
:root[data-theme="dark"] .footer-social-link.discord:hover { color: #8891f8; }