/* Shared styles — Desmond Tutu / Cape Town site
   (page-specific rules stay in each page's own <style> block) */

@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

/* the scattered notes/Polaroids sit in the page margins and may poke past the
   viewport edge on narrower windows — clip rather than show a sideways scrollbar.
   (overflow:clip doesn't create a scroll container, so the sticky header is fine.) */
body { overflow-x: clip; }

.page-bg {
    background-image: linear-gradient(rgba(251, 249, 244, 0.5), rgba(251, 249, 244, 0.72)), url('./page-bg.jpeg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

.section-card {
    background: #ffffff;
    border: 1px solid rgba(119, 90, 25, 0.15);
    border-radius: 0.5rem;
    box-shadow: 0 14px 34px rgba(46, 0, 82, 0.13), 0 4px 12px rgba(46, 0, 82, 0.07);
}

.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px 0 rgba(46, 0, 82, 0.15);
}

.accent-tag {
    color: #785a1a;
    background: #fed488;
    padding: 4px 12px;
    border-radius: 9999px;
    font-family: "Lexend", sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gold-divider {
    height: 2px;
    width: 56px;
    background: linear-gradient(90deg, #e9c176, transparent);
    margin: 12px 0 16px;
}

.pull-quote {
    border-left: 4px solid #e9c176;
    padding: 8px 24px;
    font-family: "Newsreader", serif;
    font-style: italic;
    color: #2e0052;
    font-size: 1.5rem;
    line-height: 1.4;
}

/* Translucent info panel beside the hero image (interior pages) */
.info-panel {
    box-shadow: 0 18px 45px rgba(46, 0, 82, 0.20), 0 5px 14px rgba(46, 0, 82, 0.12);
}

/* ── Scattered quote "post-its" + Polaroid photos in the page margins ──────────
   Positions and rotations are assigned at runtime by assets/scatter.js. */
.postit {
    position: absolute;
    margin: 0;
    width: 180px;
    padding: 20px 18px 22px;
    background: #fdee9b;
    color: #5b4a07;
    font-family: "Newsreader", serif;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.45;
    box-shadow: 0 10px 22px rgba(46, 0, 82, 0.20), 0 2px 5px rgba(0, 0, 0, 0.10);
    transform: rotate(var(--rot, -3deg));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: 5;
}
.postit::before {            /* a strip of "tape" at the top */
    content: "";
    position: absolute;
    top: -11px;
    left: 50%;
    width: 70px;
    height: 22px;
    background: rgba(255, 255, 255, 0.45);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transform: translateX(-50%) rotate(-2deg);
}
.postit cite {
    display: block;
    margin-top: 10px;
    font-size: 0.72rem;
    font-style: normal;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.65;
}
.postit:hover { transform: rotate(0deg) scale(1.05); z-index: 20; box-shadow: 0 18px 32px rgba(46, 0, 82, 0.28); }

/* Polaroid size/pull adapt to the window so the photos keep peeking in as it narrows.
   Defaults here are the big desktop size; the media queries below shrink them. */
:root {
    --pol-w: 343px;       /* frame width            */
    --pol-h: 294px;       /* photo height           */
    --pol-pad: 18px;      /* white border           */
    --pol-cap: 1.65rem;   /* handwritten caption    */
    --pol-pull: -270px;   /* how far it reaches into the gutter (scatter.js adds a small per-photo --hjit) */
}
.polaroid {
    position: absolute;
    margin: 0;
    width: var(--pol-w);
    padding: var(--pol-pad) var(--pol-pad) 0;
    background: #fffdf6;
    box-shadow: 0 14px 30px rgba(46, 0, 82, 0.22), 0 4px 10px rgba(0, 0, 0, 0.12);
    transform: rotate(var(--rot, 3deg)) scale(var(--scl, 1));
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    z-index: -1;          /* tucked behind the content cards (see main { isolation } in scatter.js) */
}
.polaroid::before {          /* a strip of "tape" at the top */
    content: "";
    position: absolute;
    top: -14px;
    left: 50%;
    width: 100px;
    height: 26px;
    background: rgba(255, 255, 255, 0.40);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transform: translateX(-50%) rotate(-3deg);
}
.polaroid.plain::before { width: 78px; height: 20px; top: -10px; }   /* smaller tape for the unlabelled prints */
.polaroid img {
    display: block;
    width: 100%;
    height: var(--pol-h);
    object-fit: cover;
    filter: saturate(0.96) contrast(1.02);
}
.polaroid figcaption {
    font-family: "Caveat", "Newsreader", cursive;
    font-size: var(--pol-cap);
    line-height: 1.12;
    text-align: center;
    color: #3a3320;
    padding: 13px 9px 20px;
    min-height: 2.4rem;
}
/* unlabelled prints: just a slim, even white border instead of the chunky Polaroid bottom */
.polaroid figcaption.blank { min-height: 0; padding: 0 8px 14px; }
.polaroid:hover { transform: rotate(0deg) scale(calc(var(--scl, 1) * 1.06)); box-shadow: 0 22px 40px rgba(46, 0, 82, 0.30); }   /* stays behind the text — no z-index bump */

/* left / right margin anchoring — scatter.js adds one of these to every note */
.scatter-left  { left: -150px; }
.scatter-right { right: -150px; }
.polaroid.scatter-left  { left: calc(var(--pol-pull) + var(--hjit, 0px)); }
.polaroid.scatter-right { right: calc(var(--pol-pull) + var(--hjit, 0px)); }

@media (max-width: 1439px) {                   /* medium screens: smaller frames, less pull */
    :root { --pol-w: 248px; --pol-h: 208px; --pol-pad: 13px; --pol-cap: 1.25rem; --pol-pull: -188px; }
    .polaroid figcaption { padding: 9px 7px 14px; }
}
@media (max-width: 1199px) {                   /* tighter still */
    :root { --pol-w: 188px; --pol-h: 156px; --pol-pad: 9px; --pol-cap: 1.05rem; --pol-pull: -140px; }
    .polaroid figcaption { padding: 6px 6px 11px; min-height: 1.7rem; }
}
@media (max-width: 1279px) {
    .postit { display: none; }                 /* the post-its don't shrink; hide them on narrow screens */
}
@media (max-width: 1023px) {
    .polaroid { display: none; }               /* the content column now fills the screen — no gutter left */
}

/* ── Dropdown navigation — hover a menu item to see / jump to that page's sections ── */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
:target { scroll-margin-top: 110px; }          /* clear the sticky header when jumping to a section */

.nav-item { position: relative; display: inline-flex; align-items: center; }
.nav-caret { margin-left: 3px; font-size: 0.7em; line-height: 1; opacity: 0.5; transition: opacity 0.15s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { opacity: 1; }
.nav-item::after {                              /* invisible bridge so hover survives the gap to the dropdown */
    content: ""; position: absolute; left: -10px; right: -10px; top: 100%; height: 14px;
}
.nav-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    min-width: 244px;
    max-width: 340px;
    max-height: 76vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid rgba(119, 90, 25, 0.18);
    border-radius: 0.6rem;
    box-shadow: 0 16px 40px rgba(46, 0, 82, 0.20), 0 4px 12px rgba(0, 0, 0, 0.10);
    padding: 7px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
    z-index: 70;
}
.nav-dropdown-l { left: 0; }
.nav-dropdown-r { right: 0; }
.nav-item:hover > .nav-dropdown,
.nav-item:focus-within > .nav-dropdown {
    opacity: 1; visibility: visible; transform: translateY(0);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.nav-dropdown a {
    display: block;
    padding: 7px 11px;
    border-radius: 0.4rem;
    font-family: "Lexend", sans-serif;
    font-size: 0.8rem;
    line-height: 1.3;
    color: #4c4451;
    text-decoration: none;
    white-space: normal;
    transition: background 0.12s ease, color 0.12s ease;
}
.nav-dropdown a + a { margin-top: 1px; }
.nav-dropdown a:hover, .nav-dropdown a:focus { background: #fed488; color: #2e0052; outline: none; }
.nav-dropdown a.is-here { font-style: italic; }   /* sections on the page you're already viewing */

@media (max-width: 700px) {
    .nav-caret { display: none; }
    .nav-dropdown { display: none; }              /* on phones just use the plain page links */
}