/* ==========================================================================
   Driven Destinations page (page-drivendestinations.php)
   Standalone stylesheet, enqueued only on this page.
   ========================================================================== */

/* Outer page background: the solid color shows in the left/right margins.
   The horizontal padding guarantees a blue gutter (and keeps the image's
   edges visible) at every screen width, not just above the column max-width. */
body.dd-driven-destinations {
    background: #1a3c5e !important;
    padding-left: clamp(16px, 4vw, 80px);
    padding-right: clamp(16px, 4vw, 80px);
}

/* Main background image, centered with side margins so the #1a3c5e shows
   through on the left and right. Fills the full vertical space of the page. */
.dd-text {
    font-family: 'Puritan', sans-serif;
    font-size: 18px;
    line-height: 23px;
    padding-left: 32px;
}

.dd-logo-container {
    height: 349px;
    margin-top: 16px;
    padding-right: 60px;
}

.dd-menu-img {
    width: 410px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

.dd-cta-img {
    width: 66.666%;
}

/* Premiere CTA card — translucent white panel with a blue border that grows
   and glows on hover. */
.dd-cta-card {
    display: block;
    background-color: #1a3c5e;
    border-radius: 10px;
    padding: 16px 6px;
    font-family: 'Puritan', sans-serif;
    font-size: 20px;
    line-height: 1.3;
    color: white;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    font-weight: bold;
    width: 777px;
    /* Cap at the container width so the fixed 700px never overflows on smaller
       screens; box-sizing keeps the padding inside that width. */
    max-width: 100%;
    box-sizing: border-box;
    justify-self: center;
}

.dd-cta-card:hover {
    transform: scale(1.02);
    box-shadow: 0 0 16px rgba(13, 48, 81, 0.65);
}

/* Intro line above the air dates table — centered to pair with the (centered)
   table; the "Circle Country channel" link is the brand blue. */
.dd-airdates-intro {
    font-family: 'Puritan', sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: #000000;
    padding-left: 32px;
    max-width: 700px;
}

.dd-airdates-intro a {
    color: #0d3051;
    font-weight: bold;
    text-decoration: underline;
}

.dd-airdates-intro a:hover {
    opacity: 0.75;
}

/* Air dates table — centered below the description, filling the column width to
   match the text (capped so it stays reasonable on very wide screens). The auto
   side margins center it once it hits the max-width. Translucent white body with
   a dark-blue header row; overflow:hidden clips the rounded corners. */
.dd-airdates-wrap {
    width: 100%;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

.dd-airdates {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Puritan', sans-serif;
    color: #0d3051;
    background-color: rgba(255, 255, 255, 0.651);
}

.dd-airdates th,
.dd-airdates td {
    padding: 10px 24px;
    text-align: center;
    white-space: nowrap;
}

.dd-airdates thead th {
    background-color: #0d3051;
    color: #ffffff;
    font-size: 17px;
    font-weight: bold;
}

.dd-airdates tbody td {
    font-size: 16px;
}

/* Thin divider between rows, but not after the last one. */
.dd-airdates tbody tr:not(:last-child) td {
    border-bottom: 1px solid rgba(13, 48, 81, 0.18);
}

.dd-right-col {
    margin-right: 33px;
}

.dd-section-heading {
    font-size: 2rem;
    font-weight: 700;
    color: #000000;
    margin-bottom: 1rem;
    text-align: left;
}

.dd-sponsor-ribbon {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 2rem;
}

.dd-sponsor-logo {
    max-width: 220px;
    height: auto;
}

.dd-attractions-grid {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 4rem;
    flex-wrap: wrap;
    padding-left: 32px;
    padding-right: 32px;
}

/* Columns size to their content and are centered as a group (no flex-grow),
   so they sit together in the middle rather than spread to the page edges. */
.dd-attractions-grid ul {
    list-style: disc;
    padding-left: 1.25rem;
}

.dd-attractions-grid ul li a {
    color: #000000;
    text-decoration: underline;
}

.dd-attractions-grid ul li a:hover {
    color: #333333;
}

/* ── Nav card ──────────────────────────────────────────────────────────── */
.dd-nav-card {
    width: 410px;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.651);
    padding: 16px;
    box-sizing: border-box;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}

/* The card's dropdown is IN-FLOW (one box → one background, one normal
   box-shadow: no seam, no tint, fully visible). To keep the growing card from
   pushing the Sponsored By section down, its wrapper has a FIXED height equal to
   the collapsed card (≈284px: 16 + 52 + 44 + 60 + 44 + 52 + 16) and lets the
   open card overflow visibly — the card floats down over the area below instead
   of growing the column. */
.dd-menu-wrapper {
    height: 284px;
    overflow: visible;
}

.dd-nav-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* HOME / GATLINBURG rows are links — keep them looking like the plain rows. */
a.dd-nav-item {
    text-decoration: none;
    color: inherit;
}

a.dd-nav-item:hover .dd-nav-label,
.dd-accordion-trigger:hover .dd-nav-label {
    opacity: 0.75;
}

.dd-nav-bubble-col {
    width: 60px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 18;
}

.dd-nav-bubble-img {
    max-width: 52px;
    height: auto;
}

.dd-nav-label {
    font-family: 'Puritan', sans-serif;
    font-size: 23.85pt;
    color: #0d3051;
    line-height: 1.1;
    font-weight: bolder;
}

/* Connector between bubble rows:
   ::before = vertical segment, centered in the 60px bubble column
   (16px card padding + 30px = 46px from left)
   ::after  = full-width horizontal rule at midpoint */
.dd-nav-separator {
    position: relative;
    height: 44px;
}

.dd-nav-separator::before {
    content: '';
    position: absolute;
    left: 30px;
    top: -8px;
    bottom: -10px;
    width: 4px;
    background-color: #acabab;
    z-index: 1;
}

.dd-nav-separator::after {
    content: '';
    position: absolute;
    left: 30px;
    right: 0;
    top: 50%;
    height: 4px;
    background-color: #acabab;
    transform: translateY(-50%);
}

/* ── Accordion ─────────────────────────────────────────────────────────── */
/* The accordion is the third bubble row. Its dropdown is in-flow, so the card
   grows as one cohesive box when open; the fixed-height .dd-menu-wrapper keeps
   that growth from pushing the Sponsored By section below. */
.dd-nav-accordion {
    margin: 0;
    border: 0;
    padding: 0;
}

/* Trigger matches a .dd-nav-item row: bubble column, label, then the arrow
   pushed to the far right. */
.dd-accordion-trigger {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    user-select: none;
}

.dd-accordion-trigger::-webkit-details-marker {
    display: none;
}

.dd-accordion-arrow {
    /* Sit a fixed distance after the "Attractions" text rather than pinning to
       the card's right edge — keeps the gap constant as the card narrows. */
    font-size: 16pt;
    color: #0d3051;
    position: relative;
    top: 2px;
    transition: transform 0.3s ease;
}

.dd-nav-accordion[open] .dd-accordion-arrow {
    transform: rotate(180deg);
}

/* In-flow dropdown — genuinely part of the card, so the card grows as a single
   box with one background and one shadow. It sits right under the trigger inside
   the card's padding, so the tree line aligns with the bubble with no offsets. */
.dd-accordion-body {
    padding-top: 0;
}

.dd-accordion-body ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
}

/* File-tree rows: no bullets. Each item gets a continuous vertical stem (::before)
   at x=30px — the same x as the bubble centers / separators, so it reads as
   stemming down from the Attractions bubble — plus a horizontal branch (::after)
   reaching across to the text. */
.dd-accordion-body li {
    position: relative;
    padding: 6px 0 6px 60px;
    color: #0d3051;
}

.dd-accordion-body li::before {
    content: '';
    position: absolute;
    left: 30px;
    top: 0;
    bottom: 0;
    width: 4px;
    background-color: #acabab;
}

/* Last row: the stem stops at the elbow rather than running past it. */
.dd-accordion-body li:last-child::before {
    bottom: auto;
    height: 50%;
}

.dd-accordion-body li::after {
    content: '';
    position: absolute;
    left: 30px;
    top: 50%;
    width: 24px;
    height: 4px;
    background-color: #acabab;
    transform: translateY(-50%);
}

.dd-accordion-body li a {
    font-family: 'Puritan', sans-serif;
    font-size: 16pt;
    color: #0d3051;
    text-decoration: underline;
}

.dd-accordion-body li a:hover {
    opacity: 0.75;
}

body.dd-driven-destinations .site-footer {
    margin-left: calc(-1 * clamp(16px, 4vw, 80px));
    margin-right: calc(-1 * clamp(16px, 4vw, 80px));
    background-color: #222222e6;
}

@media (max-width: 1024px) {
   .dd-logo-container {
      height: 205px;
   }
}

@media (max-width: 768px) {
    body.dd-driven-destinations {
        padding-left: 0;
        padding-right: 0;
    }
    .dd-menu-wrapper {
        display: none;
    }
    .dd-logo-container {
        padding-right: 0;
    }
    .dd-menu-img {
        max-width: 100%;
    }
    .dd-right-col {
        margin-right: 0;
    }
    .dd-text {
        padding-left: 11px;
    }
    body.dd-driven-destinations .site-footer {
        margin-left: 0;
        margin-right: 0;
    }
    .dd-attractions-grid {
        gap: 1rem;
    }
    .dd-attractions-grid ul {
        min-width: 140px;
    }
}

@media (max-width: 480px) {
    .dd-attractions-grid {
        flex-direction: column;
    }
    .dd-cta-card {
        font-size: 16px;
        padding: 12px 12px;
    }
    .dd-airdates th,
    .dd-airdates td {
        padding: 8px 16px;
    }
}

@media (max-width: 425px) {
    .dd-cta-img {
        width: auto;
    }
}

.dd-page {
    max-width: 1500px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #1a3c5e;
    background-image: url('../images/DD-page-background.png');
    background-repeat: no-repeat;
    background-position: center;
    /* background-attachment: fixed sizes the map to the viewport, NOT to this
       element's content height. That's the key to letting the accordion expand
       the card in-flow without the map ever re-stretching. background-size:
       cover keeps the 16:9 map's aspect ratio (no vertical distortion) while
       still filling the column. */
    background-attachment: fixed;
    background-size: cover;
}