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

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


/* ─── BODY LEAF BACKGROUND ────────────────────────────────────────────── */
body {
    background-image: url('/assets/img/leaf-tile.png');
    background-repeat: repeat;
    background-position: center top;
    background-size: auto; /* lg / xl / xxl — natural PNG size */
}
@media (max-width: 991.98px)  { body { background-size: 1350px 1920px; } } /* md  */
@media (max-width: 767.98px)  { body { background-size: 990px 1408px;  } } /* sm  */
@media (max-width: 575.98px)  { body { background-size: 720px 1024px;  } } /* xs  */



/* ─── 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);
}




/* ─── 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; }














/* ─── 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: clamp(32px, 6.25vw, 90px);  transform: rotate(25deg); }
.tsd-leaf--tr-2 { top: 5%;    right: 5%;  width: clamp(42px, 8.33vw, 120px); transform: rotate(-15deg); }
.tsd-leaf--tl-1 { top: 8%;    left: 1%;   width: clamp(28px, 5.56vw, 80px);  transform: rotate(140deg) scaleX(-1); }
.tsd-leaf--br-1 { bottom: 20px; right: 3%; width: clamp(35px, 6.94vw, 100px); transform: rotate(60deg); }
.tsd-leaf--bl-1 { bottom: 10px; left: 2%;  width: clamp(30px, 5.9vw, 85px);  transform: rotate(-40deg) scaleX(-1); }
.tsd-leaf--mr-1 { top: 40%;   right: -20px; width: clamp(38px, 7.64vw, 110px); transform: rotate(80deg); }
.tsd-leaf--ml-1 { top: 35%;   left: -15px;  width: clamp(33px, 6.6vw, 95px);  transform: rotate(-70deg) scaleX(-1); }
.tsd-leaf--tr-efa { top: 2%;  right: 12%;   width: clamp(18px, 3.47vw, 90px); transform: rotate(-20deg); }


/* ─── 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;
}


/* ─── 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;
}


/* ─── 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;
}


/* ─── 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;
}


/* ─── 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;
}


/* ─── 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;
}


/* ─── 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;
}


/* ─── 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);
}


/* ─── 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);
}


/* ─── 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%;
}