/* =============================================================================
   THE SPIRIT DOG — site.css
   Site-specific styles: layout, components, page styles, and dev tools.
   Loads after overrides.css.
   =============================================================================*/

/* ─── 1. BASE LINKS ──────────────────────────────────────────────────────── */
a {
    color: var(--tsd-magenta);
}

a:hover {
    color: var(--tsd-magenta-dark);
}


/* ─── 2. NAVBAR ──────────────────────────────────────────────────────────── */
.navbar-tsd {
    background-color: var(--tsd-yellow);
    border-bottom: 1px solid var(--tsd-border-light);
}

/* Brand */
/* NAVBAR_EXPAND sync: if NAVBAR_EXPAND changes in config.php, update these breakpoints.
   sm=575.98  md=767.98  lg=991.98  xl=1199.98  xxl=1399.98 */
.navbar-tsd .navbar-brand img {
    height: 105px; /* xl + xxl */
}
@media (max-width: 1199.98px) {
    .navbar-tsd .navbar-brand img { height: 105px; } /* lg */
}
@media (max-width: 991.98px) {
    .navbar-tsd .navbar-brand img { height: 85px; } /* md */
}
@media (max-width: 767.98px) {
    .navbar-tsd .navbar-brand img { height: 60px; } /* sm and below */
}



/* Nav links */
.navbar-tsd .nav-link:hover,
.navbar-tsd .nav-link:focus,
.navbar-tsd .nav-link.active,
.navbar-tsd .dropdown-item:hover,
.navbar-tsd .dropdown-item:focus,
.navbar-tsd .dropdown-item.active {
    color: var(--tsd-magenta);
    text-decoration: underline;
    text-decoration-color: var(--tsd-magenta);
    text-underline-offset: 7px;
    text-decoration-thickness: 2px;
}

/* Dropdown */
.navbar-tsd .dropdown-menu {
    background-color: var(--tsd-yellow-pale);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.navbar-tsd .dropdown-item.active,
.navbar-tsd .dropdown-item:hover {
    background-color: var(--tsd-yellow-pale);
}


/* Hamburger — dark icon for light background */
.navbar-tsd .navbar-toggler {
    border-color: rgba(31, 31, 31, 0.3);
}

.navbar-tsd .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2831%2C31%2C31%2C0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}


/* ─── 3. SECTION THEMES ──────────────────────────────────────────────────────
   Add .section-white / .section-yellow / .section-magenta / .section-blue /
   .section-black to any wrapper element. All child text, headings, links
   and .tsd-card components inherit the theme automatically.
────────────────────────────────────────────────────────────────────────────── */

/* ── ON WHITE ─── */
.section-white {
    background-color: var(--tsd-white);
    color: var(--tsd-black);
}
.section-white a               { color: var(--tsd-magenta); }
.section-white a:hover         { color: var(--tsd-magenta-dark); }
.section-white h1, .section-white h2,
.section-white h3, .section-white h4,
.section-white h5, .section-white h6  { color: var(--tsd-black); }
.section-white hr              { border-color: var(--tsd-border-light); }
.section-white .tsd-card       { background-color: var(--tsd-white); border-color: var(--tsd-border-light); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }

/* ── ON YELLOW ─── */
.section-yellow {
    background-color: var(--tsd-yellow);
    color: var(--tsd-black);
}
.section-yellow a              { color: var(--tsd-magenta); }
.section-yellow a:hover        { color: var(--tsd-magenta-dark); }
.section-yellow h1, .section-yellow h2,
.section-yellow h3, .section-yellow h4,
.section-yellow h5, .section-yellow h6 { color: var(--tsd-black); }
.section-yellow hr             { border-color: rgba(0,0,0,0.15); }
.section-yellow .tsd-card      { background-color: #fff; border-color: rgba(0,0,0,0.10); }

/* ── ON MAGENTA ─── */
.section-magenta {
    background-color: var(--tsd-magenta);
    color: var(--tsd-white);
}
.section-magenta a             { color: var(--tsd-white); text-decoration: underline; }
.section-magenta a:hover       { color: var(--tsd-yellow); }
.section-magenta h1, .section-magenta h2,
.section-magenta h3, .section-magenta h4,
.section-magenta h5, .section-magenta h6 { color: var(--tsd-white); }
.section-magenta hr            { border-color: rgba(255,255,255,0.25); }
.section-magenta .tsd-card     { background-color: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.20); color: var(--tsd-white); }
.section-magenta .text-muted   { color: rgba(255,255,255,0.70) !important; }

/* ── ON DARK BLUE ─── */
.section-blue {
    background-color: var(--tsd-blue);
    color: var(--tsd-white);
}
.section-blue a                { color: var(--tsd-white); text-decoration: underline; }
.section-blue a:hover          { color: var(--tsd-yellow); }
.section-blue h1, .section-blue h2,
.section-blue h3, .section-blue h4,
.section-blue h5, .section-blue h6 { color: var(--tsd-white); }
.section-blue hr               { border-color: rgba(255,255,255,0.25); }
.section-blue .tsd-card        { background-color: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.20); color: var(--tsd-white); }
.section-blue .text-muted      { color: rgba(255,255,255,0.70) !important; }

/* ── ON BLACK ─── */
.section-black {
    background-color: var(--tsd-black);
    color: var(--tsd-white);
}
.section-black a               { color: var(--tsd-white); text-decoration: underline; }
.section-black a:hover         { color: var(--tsd-yellow); }
.section-black h1, .section-black h2,
.section-black h3, .section-black h4,
.section-black h5, .section-black h6 { color: var(--tsd-white); }
.section-black hr              { border-color: rgba(255,255,255,0.15); }
.section-black .tsd-card       { background-color: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--tsd-white); }
.section-black .text-muted     { color: rgba(255,255,255,0.55) !important; }


/* ─── 3. HOLDING PAGE ───────────────────────────────────────────────────── */
.holding-page {
    min-height: 100vh;
    background-color: var(--tsd-black);
    display: flex;
    align-items: center;
    padding: 4rem 1rem;
}

.holding-dog-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    filter: drop-shadow(0 8px 32px rgba(0,0,0,0.6));
}

.holding-title {
    font-size: clamp(2rem, 6vw, 3.2rem);
    font-weight: 400;
    letter-spacing: 0.05em;
    color: var(--tsd-white);
    margin-bottom: 0.4rem;
    text-transform: uppercase;
    word-spacing: 0.15em;
}

.holding-sub {
    font-size: 1.1rem;
    color: var(--tsd-yellow);
    font-style: italic;
    margin-bottom: 0;
}

.holding-divider {
    width: 48px;
    height: 1px;
    background: var(--tsd-magenta);
    margin: 1.75rem 0;
}

@media (max-width: 767.98px) {
    .holding-divider { margin: 1.75rem auto; }
}

.holding-body {
    font-size: 1rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.8;
}

.holding-coming {
    font-size: 0.9rem;
    color: var(--tsd-yellow);
    font-style: italic;
    opacity: 0.7;
}

/* ─── 404 PAGE ───────────────────────────────────────────────────────────── */
.page-404 {
    min-height: 100vh;
    background-color: var(--tsd-black);
    padding: 3rem 1rem;
}

.page-404__inner {
    max-width: 520px;
    width: 100%;
}

.page-404__img {
    width: 160px;
    height: 160px;
    object-fit: contain;
    filter: drop-shadow(0 4px 24px rgba(0,0,0,0.5));
    opacity: 0.85;
}

.page-404__num {
    font-size: clamp(4rem, 12vw, 7rem);
    font-weight: 400;
    color: var(--tsd-magenta);
    font-family: var(--tsd-font-heading);
    letter-spacing: 0.1em;
    line-height: 1;
    margin-bottom: 0.25rem;
}

.page-404__title {
    font-size: clamp(1.4rem, 4vw, 2rem);
    font-weight: 400;
    color: var(--tsd-white);
    font-family: var(--tsd-font-heading);
    font-style: italic;
}

.page-404__body {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.8;
}


/* ─── 4. DECORATIVE LEAVES ───────────────────────────────────────────────── */
/*
 * Usage: add class="tsd-leaf-wrap" to any section, then place inside it:
 *   <img src="/assets/img/leaf1.png" class="tsd-leaf tsd-leaf--tr-1" aria-hidden="true">
 * The section needs position:relative (added via .tsd-leaf-wrap).
 * All presets below can be mixed freely across pages.
 */
.tsd-leaf-wrap {
    position: relative;
    overflow: hidden;
}

.tsd-leaf {
    position: absolute;
    pointer-events: none;
    user-select: none;
    opacity: 0.75;
}

/* ── Preset positions ── */
.tsd-leaf--tr-1 { top: -10px;  right: 2%;  width: 90px;  transform: rotate(25deg); }
.tsd-leaf--tr-2 { top: 5%;    right: 5%;  width: 120px; transform: rotate(-15deg); }
.tsd-leaf--tl-1 { top: 8%;    left: 1%;   width: 80px;  transform: rotate(140deg) scaleX(-1); }
.tsd-leaf--br-1 { bottom: 20px; right: 3%; width: 100px; transform: rotate(60deg); }
.tsd-leaf--bl-1 { bottom: 10px; left: 2%;  width: 85px;  transform: rotate(-40deg) scaleX(-1); }
.tsd-leaf--mr-1 { top: 40%;   right: -20px; width: 110px; transform: rotate(80deg); }
.tsd-leaf--ml-1 { top: 35%;   left: -15px;  width: 95px;  transform: rotate(-70deg) scaleX(-1); }

@media (max-width: 767.98px) {
    .tsd-leaf { width: 60px !important; }
}


/* ─── 5. FOOTER ──────────────────────────────────────────────────────────── */
.footer {
    background-color: var(--tsd-black) !important;
    border-top: 3px solid var(--tsd-magenta);
    font-size: 0.875rem;
}

.footer a {
    color: rgba(255,255,255,0.70);
    text-decoration: none;
}

.footer a:hover {
    color: var(--tsd-yellow);
    text-decoration: underline;
}

.footer-heading {
    color: rgba(255,255,255,0.45);
    letter-spacing: 0.08em;
}

.footer-border {
    border-color: rgba(255,255,255,0.15) !important;
}


/* ─── 6. DEV BANNER ──────────────────────────────────────────────────────── */
.dev-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    font-family: monospace;
    font-size: 0.75rem;
    padding: 5px 14px;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: center;
}

.dev-banner--dev {
    background: #f59e0b;
    color: #000;
}

.dev-banner--soft-launch {
    background: #3b82f6;
    color: #fff;
}

.dev-banner__desc {
    opacity: 0.65;
    font-style: italic;
}

.dev-banner__bp {
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    opacity: 0.9;
}


/* ─── 7. CARDS & SHARED COMPONENTS ──────────────────────────────────────── */
.tsd-card {
    background-color: var(--tsd-white);
    border: 1px solid var(--tsd-border-light);
    border-radius: 6px;
}

.border-tsd {
    border-color: var(--tsd-border-light) !important;
}

.tsd-quote {
    border-left: 3px solid var(--tsd-magenta);
    padding: 0.75rem 1.25rem;
    background-color: var(--tsd-yellow);
    border-radius: 0 4px 4px 0;
    margin: 1.5rem 0;
}

.tsd-quote p {
    margin-bottom: 0.25rem;
    font-style: italic;
    color: var(--tsd-black);
}

.tsd-quote footer {
    font-size: 0.875rem;
    color: #555;
}


/* ─── 8. PAGE HEADINGS ───────────────────────────────────────────────────── */
.tsd-page-title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    color: var(--tsd-black);
}

.tsd-section-subtitle {
    color: #555;
    font-weight: 400;
    font-style: italic;
}


/* ─── 9. HOME HERO ───────────────────────────────────────────────────────── */
.tsd-hero {
    background-color: var(--tsd-yellow);
    padding: 4rem 0;
}

.tsd-eyebrow {
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-size: 0.8rem;
    color: var(--tsd-blue);
    margin-bottom: 0.25rem;
}

.tsd-display-title {
    font-size: clamp(2rem, 6vw, 4rem);
    font-weight: 400;
    color: var(--tsd-magenta);
    letter-spacing: 0.04em;
}

.tsd-book-placeholder {
    background-color: rgba(0,0,0,0.06);
    border: 1px solid var(--tsd-border-light);
    width: 280px;
    max-width: 100%;
    aspect-ratio: 2 / 3;
    margin: 0 auto;
    color: #888;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}


/* ─── 10. MUSIC PAGE ────────────────────────────────────────────────────── */
.tsd-track-title {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--tsd-magenta);
    letter-spacing: 0.02em;
}

.tsd-soundcloud-embed {
    border-radius: 4px;
    overflow: hidden;
}


/* ─── 11. RECIPES ───────────────────────────────────────────────────────── */
.tsd-recipe h2 {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--tsd-magenta);
}

.tsd-recipe-meta {
    color: #666;
    font-style: italic;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.tsd-recipe-quote {
    border-left: 3px solid var(--tsd-magenta);
    padding: 0.5rem 1rem;
    background-color: var(--tsd-yellow);
    color: var(--tsd-black);
    font-style: italic;
    font-size: 0.95rem;
    margin: 1rem 0 0;
}

.tsd-recipe-quote p {
    margin: 0;
}


/* ─── 12. ACTIVITIES — DOWNLOAD TILES ───────────────────────────────────── */
.tsd-download-tile {
    background-color: var(--tsd-white);
    border: 1px solid var(--tsd-border-light);
    color: var(--tsd-black);
    transition: border-color 0.2s, background-color 0.2s, color 0.2s;
    min-height: 90px;
    border-radius: 6px;
}

.tsd-download-tile:hover {
    border-color: var(--tsd-magenta);
    background-color: var(--tsd-yellow);
    color: var(--tsd-magenta);
}

.tsd-pdf-icon {
    font-size: 1.4rem;
}

.tsd-dl-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #888;
    margin-top: 0.2rem;
}


/* ─── 13. GALLERY / VIDEO PLACEHOLDERS ─────────────────────────────────── */
.tsd-gallery-placeholder {
    min-height: 80px;
    background-color: var(--tsd-yellow);
    border: 1px dashed rgba(0,0,0,0.15);
    border-radius: 4px;
}

.tsd-video-placeholder {
    min-height: 300px;
    background-color: var(--tsd-black);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 6px;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.5);
}


/* ─── 14. ROLL OF HONOUR ────────────────────────────────────────────────── */
.tsd-honour-name {
    padding: 0.35rem 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--tsd-border-light);
    color: var(--tsd-black);
}


/* ─── 15. CREATIVE TEAM ─────────────────────────────────────────────────── */
.tsd-avatar-placeholder {
    width: 100px;
    height: 100px;
    background-color: var(--tsd-yellow);
    border: 1px solid var(--tsd-border-light);
    font-size: 0.7rem;
    color: #888;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}