/* ==========================================================================
   Travel Spark - home page header & footer
   Header styling follows portfolio26 (Archivo Narrow brand, uppercase
   Roboto menu, white bar). Sticky via CSS only - no JavaScript.
   Only loaded when Home.cshtml sets ViewBag.NewHomeStyle = true
   ========================================================================== */

.ts-wrap {
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* step the width exactly like Bootstrap 3's .container so the header,
   footer and page content always share the same left and right edges */
@media (min-width: 768px)  { .ts-wrap { width: 750px; } }
@media (min-width: 992px)  { .ts-wrap { width: 970px; } }
@media (min-width: 1200px) { .ts-wrap { width: 1170px; } }

/* home page (Pics template): undo the old nested-container offsets so
   the content box lines up exactly with the header */
.pageType_Pics .body-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.pageType_Pics .site-content .container .bodySection {
    width: auto;
    margin-left: 0;
    margin-right: 0;
}

/* ---------- header ---------- */

/* some sub-site stylesheets give every link a white background
   (e.g. Photo Trips: "body, a { background-color: white }") */
.ts-header a,
.ts-footer a {
    background-color: transparent !important;
}

.ts-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: #3a7fd0; /* sea / sky blue from the home page images */
    border-bottom: 1px solid transparent;
}

.ts-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 110px;
    padding-top: 22px;
    padding-bottom: 22px;
}

.ts-header .ts-brand-title {
    display: block;
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    text-decoration: none;
}

.ts-header .ts-brand-strap {
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 19px;
    line-height: 1.3;
    letter-spacing: 0.3px;
    color: rgba(255, 255, 255, 0.85);
    margin: 4px 0 0 2px;
}

.ts-header .ts-nav ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-header .ts-nav li {
    list-style: none;
    margin: 0 0 0 30px;
    padding: 0;
}

.ts-header .ts-nav a {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s ease;
}

.ts-header a:hover,
.ts-header a:focus {
    color: #fff;
    text-decoration: none;
    outline: none;
}

/* Soft shadow fades in once the page scrolls (CSS scroll-driven animation,
   no JS). Browsers without support just keep the hairline border. */
@supports (animation-timeline: scroll()) {
    .ts-header {
        animation: ts-header-stuck linear both;
        animation-timeline: scroll(root);
        animation-range: 0 80px;
    }

    @keyframes ts-header-stuck {
        from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); }
        to   { box-shadow: 0 2px 14px rgba(0, 0, 0, 0.18); }
    }
}

/* ---------- page typography ----------
   One scale for the page content, matched to the header:
   headings  - Archivo Narrow, uppercase (like the site title)
   body text - Roboto Light 17px / 1.7 (like the menu)               */

.ts-home .homepage {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    color: #333;
}

.ts-home .homepage h1,
.ts-home .homepage h2 {
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1f3550;
    margin: 0 0 20px;
    padding: 0;
}

.ts-home .homepage > h1:first-of-type {
    padding-top: 30px;
}

.ts-home .homepage p,
.ts-home .homepage li,
.ts-home .homepage td {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
}

.ts-home .homepage p {
    max-width: none;
}

.ts-home .homepage ul {
    margin: 0 0 30px 20px;
    padding: 0;
}

.ts-home .homepage li {
    margin-bottom: 6px;
}

.ts-home .ts-band .ts-band-text p {
    color: #1f3550;
}

@media (max-width: 767px) {
    .ts-home .homepage h1,
    .ts-home .homepage h2 {
        font-size: 28px;
    }

    .ts-home .homepage p,
    .ts-home .homepage li,
    .ts-home .homepage td {
        font-size: 16px;
    }
}

/* ---------- three link images ---------- */

.ts-home .ts-photos {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin: 30px 0 0;
}

.ts-home .ts-photos a {
    display: block;
}

.ts-home .ts-photos img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

@media (max-width: 767px) {
    .ts-home .ts-photos {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* ---------- colour bands ----------
   Full-width band behind a content section. The box-shadow + clip-path
   trick paints the colour edge to edge without causing horizontal scroll,
   while the content stays aligned with the page.                         */

.ts-band {
    position: relative;
    background-color: #e6f0fb;
    box-shadow: 0 0 0 100vmax #e6f0fb;
    clip-path: inset(0 -100vmax);
    padding: 70px 0;
    margin: 50px 0;
    clear: both;
}

.ts-band .ts-band-row {
    display: flex;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
}

.ts-band .ts-band-text {
    padding-left: 0 !important;
    padding-right: 40px;
}

.ts-band .ts-band-label {
    display: inline-block;
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #3a7fd0;
    margin-bottom: 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #3a7fd0;
}

.ts-band .ts-band-text p {
    margin: 0 !important;
}

.ts-band .ts-band-image {
    padding-right: 0;
}

.ts-band .ts-band-image img {
    display: block;
    width: 100%;
    max-width: 100%;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- sub-sites (Guides, Photo Trips) ----------
   Body class "ts-sub" is added by those sites' layouts.                */

/* line the content box up with the header (sub-sites and the Top 50 /
   location pages, which share this container structure) */
.ts-home .page-details > .body-content {
    width: auto !important;
    padding-left: 15px !important;
    padding-right: 15px !important;
}

.ts-sub .blogpost > .container {
    width: auto !important;
}

/* Guides home: the extra fixed-width .container in Home.cshtml is wider
   than the space it sits in - let it fit so the card grid lines up */
.ts-sub.pageType_Home .body-content > .container {
    width: auto !important;
}

/* same gap above the page title as "Welcome" on the main home page:
   20px page margin + 30px heading padding */
.ts-sub #content {
    margin-top: 20px !important;
}

/* Top 50 location pages: undo the old 100.5% width hack so content
   keeps equal left and right edges (it ran to the screen edge on mobile) */
.ts-home.pageType_Standard .site-content .container .bodySection {
    width: auto;
}

/* page titles ("Top 50 Locations", "Guides", "Photo Trips") styled like the home headings */
.ts-home .entry-header .entry-title {
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1f3550;
    background: none;
    box-shadow: none;
    border-radius: 0;
    margin: 0;
    padding: 30px 0 20px;
}

.ts-home .entry-header .entry-title span {
    color: inherit;
    background: none;
    padding: 0;
}

/* body text matched to the home page */
.ts-sub .body-content p,
.ts-sub .body-content li {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 17px;
    font-weight: 300;
    line-height: 1.7;
    color: #333;
}

.ts-sub .body-content h1,
.ts-sub .body-content h2,
.ts-sub .body-content h3 {
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #1f3550;
}

.ts-sub .blogpost h1 {
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #1f3550;
    margin: 30px 0 20px;
    padding: 0;
}

.ts-sub .body-content a.back,
.ts-sub .body-content .backButton {
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    font-size: 15px;
    color: #3a7fd0;
}

@media (max-width: 767px) {
    .ts-home .entry-header .entry-title {
        font-size: 28px;
    }

    .ts-sub .body-content p,
    .ts-sub .body-content li {
        font-size: 16px;
    }

    .ts-sub .blogpost h1 {
        font-size: 28px;
    }
}

/* ---------- footer ---------- */

.ts-footer {
    background-color: #111;
    color: #aaa;
    margin-top: 60px;
    padding: 70px 0 30px;
    font-family: 'Roboto', Helvetica, Arial, sans-serif;
    clear: both;
}

.ts-footer a {
    color: #ddd;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ts-footer a:hover,
.ts-footer a:focus {
    color: #fff;
    text-decoration: none;
}

.ts-footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ts-footer li {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: 14px;
}

.ts-footer-top {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    padding-bottom: 50px;
}

.ts-footer-intro {
    flex: 0 1 420px;
}

.ts-footer .ts-footer-logo {
    display: inline-block;
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 24px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 20px;
}

.ts-footer-text {
    font-size: 14px;
    line-height: 1.7;
    margin: 0 0 20px;
}

.ts-newsletter {
    display: flex;
    gap: 10px;
    margin: 0 0 12px;
}

.ts-newsletter input {
    flex: 1 1 auto;
    min-width: 0;
    height: 44px;
    padding: 0 14px;
    font-size: 14px;
    color: #fff;
    background-color: transparent;
    border: 1px solid #444;
    border-radius: 0;
}

.ts-newsletter input::placeholder {
    color: #777;
}

.ts-newsletter input:focus {
    border-color: #aaa;
    outline: none;
}

.ts-newsletter button {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 22px;
    font-size: 13px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #111;
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 0;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ts-newsletter button:hover {
    background-color: transparent;
    color: #fff;
}

.ts-footer-small {
    font-size: 12px;
    color: #777;
    margin: 0;
}

.ts-footer-small a {
    text-decoration: underline;
}

.ts-footer-cols {
    display: flex;
    gap: 60px;
}

.ts-footer-col {
    min-width: 120px;
}

.ts-footer .ts-footer-col h4 {
    font-family: 'Archivo Narrow', Helvetica, Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 20px;
    padding: 0;
}

.ts-social .fa {
    width: 20px;
    margin-right: 8px;
    text-align: center;
}

.ts-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    border-top: 1px solid #2a2a2a;
    padding-top: 25px;
}

.ts-footer-bottom p {
    font-size: 12px;
    margin: 0;
}

.ts-footer-bottom ul {
    display: flex;
    gap: 25px;
}

.ts-footer-bottom li {
    font-size: 12px;
    margin: 0;
}

/* ---------- responsive ---------- */

@media (max-width: 991px) {
    .ts-band {
        padding: 50px 0;
    }

    .ts-band .ts-band-row {
        display: block;
    }

    .ts-band .ts-band-text {
        padding-right: 0;
        margin-bottom: 30px;
    }

    .ts-band .ts-band-image {
        padding-left: 0;
    }

    .ts-footer-top {
        flex-direction: column;
        gap: 45px;
    }

    .ts-footer-intro {
        flex-basis: auto;
        max-width: 480px;
    }
}

@media (max-width: 767px) {
    .ts-header-inner {
        flex-wrap: wrap;
        min-height: 0;
    }

    .ts-header .ts-brand-strap {
        display: none;
    }

    .ts-header .ts-nav li {
        margin: 0 0 0 18px;
    }

    .ts-header .ts-brand-title {
        font-size: 24px;
    }

    .ts-header .ts-nav a {
        font-size: 14px;
    }

    .ts-footer {
        padding-top: 50px;
    }

    .ts-footer-cols {
        flex-wrap: wrap;
        gap: 35px 50px;
    }
}

@media (max-width: 480px) {
    .ts-header-inner {
        flex-direction: column;
        align-items: flex-start;
    }

    .ts-header .ts-nav {
        margin-top: 8px;
    }

    .ts-header .ts-nav li {
        margin: 0 22px 0 0;
    }

    .ts-newsletter {
        flex-direction: column;
    }

    .ts-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}