/* ==========================================================================
   Coming To The UK — main stylesheet
   Loaded asynchronously (preload + onload swap) — see includes/head-meta.php
   ========================================================================== */

:root {
    --accent-1: #CF142B;      /* red */
    --accent-2: #FFCE00;      /* yellow */
    --link-color: #0056B3;
    --link-hover: #CF142B;
    --btn-bg: #283246;
    --btn-text: #FFFFFF;
    --menu-bg: #283246;
    --menu-link: #FFFFFF;
    --footer-bg: #283246;
    --footer-text: #FFFFFF;
    --footer-link: #FFCE00;
    --accordion-bg: #FFCE00;
    --accordion-text: #283246;
    --icon-color: #CF142B;
    --card-header-bg: #CF142B;
    --outline-primary: #CF142B;
    --text-primary: #CF142B;
    --font-base: 'Montserrat', Arial, Helvetica, sans-serif;
}

/* ---------- Base ---------- */
body {
    font-family: var(--font-base);
    font-weight: 400;
    color: #2a2a2a;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-base);
    font-weight: 700;
}

a { color: var(--link-color); text-decoration: none; transition: color .2s ease; }
a:hover, a:focus { color: var(--link-hover); }

.text-primary { color: var(--text-primary) !important; }

.skip-link {
    position: absolute;
    left: -999px;
    top: 0;
    background: var(--btn-bg);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 2000;
}
.skip-link:focus { left: 0; }

.fw-100 { font-weight: 100 !important; }
.fw-200 { font-weight: 200 !important; }
.fw-300 { font-weight: 300 !important; }
.fw-400 { font-weight: 400 !important; }
.fw-500 { font-weight: 500 !important; }
.fw-600 { font-weight: 600 !important; }
.fw-700 { font-weight: 700 !important; }
.fw-800 { font-weight: 800 !important; }
.fw-900 { font-weight: 900 !important; }

img { max-width: 100%; height: auto; }

/* ---------- Buttons ---------- */
.btn-primary {
    background-color: var(--btn-bg);
    border-color: var(--btn-bg);
    color: var(--btn-text);
    font-weight: 600;
    padding: .7rem 1.6rem;
    border-radius: .35rem;
    transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease;
}
.btn-primary:hover, .btn-primary:focus {
    background-color: var(--accent-1);
    border-color: var(--accent-1);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,.15);
}
.btn-outline-primary {
    color: var(--outline-primary);
    border-color: var(--outline-primary);
    font-weight: 600;
    border-radius: .35rem;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--outline-primary);
    border-color: var(--outline-primary);
    color: #fff;
}
.btn-accent2 {
    background-color: var(--accent-2);
    border-color: var(--accent-2);
    color: var(--btn-bg);
    font-weight: 700;
}
.btn-accent2:hover { background-color: #e6b800; border-color: #e6b800; color: var(--btn-bg); }

/* ---------- Site Header (logo + contact bar) ---------- */
.site-header {
    background: #ffffff;
    padding: .9rem 0;
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
}
.site-logo img { display: block; width: 100%; max-width: 290px; height: auto; }
.site-header-contact {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-weight: 600;
    font-size: .95rem;
}
.site-header-contact a { color: var(--btn-bg); display: inline-flex; align-items: center; gap: .5rem; }
.site-header-contact a:hover { color: var(--accent-1); }
.site-header-contact i { color: var(--icon-color); }

/* ---------- Navbar (Top Menu) ---------- */
.site-navbar {
    background-color: var(--menu-bg);
    min-height: 40px;
}
.site-navbar .container { min-height: 56px; display: flex; align-items: center; }
.site-navbar .navbar-nav { align-items: center; }
.site-navbar .nav-link {
    color: var(--menu-link) !important;
    font-weight: 600;
    padding: .9rem 1rem !important;
    position: relative;
    transition: color .2s ease, background-color .2s ease;
}
.site-navbar .nav-link::after {
    content: "";
    position: absolute;
    left: 1rem;
    right: 1rem;
    bottom: .5rem;
    height: 2px;
    background: var(--accent-2);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-link.active {
    color: var(--accent-2) !important;
    background-color: rgba(255,255,255,.06);
}
.site-navbar .nav-link:hover::after,
.site-navbar .nav-link.active::after { transform: scaleX(1); }

.site-navbar .dropdown-menu {
    border: none;
    border-radius: .4rem;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
    padding: .6rem;
    margin-top: .25rem;
}
.site-navbar .dropdown-item {
    color: var(--btn-bg);
    font-weight: 500;
    border-radius: .3rem;
    padding: .5rem .75rem;
    white-space: normal;
}
.site-navbar .dropdown-item:hover, .site-navbar .dropdown-item:focus {
    background-color: var(--accent-2);
    color: var(--btn-bg);
}
.dropdown-menu-columns {
    columns: 2;
    min-width: 480px;
}
.dropdown-menu-columns li { break-inside: avoid; }
.navbar-toggler {
    background-color: rgba(255,255,255,.15);
    border-color: rgba(255,255,255,.3);
}
.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(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
@media (max-width: 991.98px) {
    .dropdown-menu-columns { columns: 1; min-width: auto; }
    .site-navbar .nav-link::after { display: none; }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumb-bar {
    background-color: #f4f5f7;
    padding: .65rem 0;
    border-bottom: 1px solid #e6e8ec;
}
.breadcrumb { font-size: .9rem; margin-bottom: 0; }
.breadcrumb-item.active { color: var(--accent-1); font-weight: 600; }
.breadcrumb-item a { color: var(--link-color); }

/* ---------- Hero ---------- */
.hero {
    position: relative;
    min-height: 500px;
    max-height: 500px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
    animation: heroKenBurns 22s ease-in-out infinite alternate;
}
@keyframes heroKenBurns {
    0%   { transform: scale(1) translate(0, 0); }
    100% { transform: scale(1.12) translate(-1%, -1%); }
}
@media (prefers-reduced-motion: reduce) {
    .hero-bg { animation: none; }
}
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(20,24,34,.55) 0%, rgba(20,24,34,.72) 100%);
    z-index: 1;
}
.hero-content {
    position: relative;
    z-index: 2;
    color: #fff;
    max-width: 100%;
    animation: heroFadeUp .9s ease both;
}
@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-content h1 {
    text-shadow: 2px 3px 10px rgba(0,0,0,.55);
    font-weight: 800;
}
.hero-content p {
    text-shadow: 1px 2px 6px rgba(0,0,0,.5);
}
@media (min-width: 992px) {
    .hero-content { max-width: 1000px; min-width: 1000px; }
}
@media (max-width: 991.98px) {
    .hero { min-height: 500px; max-height: none; }
}

/* Page hero (interior pages) — shorter variant */
.page-hero {
    position: relative;
    min-height: 260px;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.page-hero .hero-bg { animation: heroKenBurns 26s ease-in-out infinite alternate; }
.page-hero .hero-content { color: #fff; }

/* ---------- Sections ---------- */
.section { padding: 4.5rem 0; }
.section-alt { background-color: #f4f5f7; }
.section-navy { background-color: var(--btn-bg); color: #fff; }
.section-title {
    font-weight: 800;
    margin-bottom: 1rem;
}
.section-lead {
    font-size: 1.05rem;
    color: #555;
    margin-bottom: 2rem;
}
.section-badge {
    display: inline-block;
    color: var(--accent-1);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem;
    margin-bottom: .5rem;
}

/* ---------- 2-column split sections ---------- */
.split-media img {
    border-radius: .5rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.12);
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.split-text h2 { margin-bottom: 1rem; }
.split-text p { line-height: 1.75; }

/* ---------- 3-column feature cards ---------- */
.feature-card {
    background: #fff;
    border-radius: .6rem;
    padding: 2rem 1.5rem;
    text-align: center;
    height: 100%;
    box-shadow: 0 10px 26px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
}
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 16px 34px rgba(0,0,0,.12); }
.feature-icon {
    width: 66px; height: 66px;
    border-radius: 50%;
    background: rgba(207,20,43,.1);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 1.1rem;
    font-size: 1.6rem;
    color: var(--icon-color);
}

/* ---------- 4-column benefits ---------- */
.benefit-col { text-align: center; padding: 1.5rem 1rem; }
.benefit-col i {
    font-size: 2.1rem;
    color: var(--icon-color);
    margin-bottom: .85rem;
    display: inline-block;
}
.benefit-col h3 { font-size: 1.05rem; font-weight: 700; }

/* ---------- Parallax CTA ---------- */
.parallax-section {
    position: relative;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    padding: 6rem 0;
    color: #fff;
}
@media (max-width: 767.98px) {
    .parallax-section { background-attachment: scroll; }
}
.parallax-overlay {
    position: absolute; inset: 0;
    background: rgba(20,24,34,.68);
}
.parallax-content { position: relative; z-index: 1; text-align: center; }
.parallax-content h2 { font-weight: 800; text-shadow: 1px 2px 8px rgba(0,0,0,.5); }

/* ---------- Tiles (tours / destinations / tips / gallery) ---------- */
.tile-card {
    background: #fff;
    border-radius: .6rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(0,0,0,.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .25s ease, box-shadow .25s ease;
}
.tile-card:hover { transform: translateY(-6px); box-shadow: 0 18px 36px rgba(0,0,0,.14); }
.tile-img-wrap { position: relative; overflow: hidden; height: 210px; }
.tile-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.tile-card:hover .tile-img-wrap img { transform: scale(1.08); }
.tile-badge {
    position: absolute; top: .75rem; right: .75rem;
    background: var(--accent-1); color: #fff;
    font-weight: 700; font-size: .8rem;
    padding: .3rem .7rem; border-radius: 2rem;
}
.tile-body { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.tile-body h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }
.tile-body p { color: #5a5a5a; font-size: .93rem; flex: 1; }
.tile-price { font-weight: 800; color: var(--accent-1); font-size: 1.15rem; margin-bottom: .75rem; }
.tile-meta { font-size: .82rem; color: #777; margin-bottom: .5rem; }
.tile-meta i { color: var(--icon-color); margin-right: .3rem; }

.dest-card { position: relative; border-radius: .6rem; overflow: hidden; height: 260px; }
.dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.dest-card:hover img { transform: scale(1.1); }
.dest-card-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(20,24,34,0) 40%, rgba(20,24,34,.85) 100%);
    display: flex; align-items: flex-end; padding: 1.25rem;
}
.dest-card-overlay h3 { color: #fff; font-weight: 700; margin: 0; font-size: 1.1rem; }

/* ---------- Accordion ---------- */
.accordion-button {
    background-color: var(--accordion-bg);
    color: var(--accordion-text);
    font-weight: 700;
}
.accordion-button:not(.collapsed) {
    background-color: var(--accordion-bg);
    color: var(--accordion-text);
    box-shadow: inset 0 -3px 0 var(--accent-1);
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(207,20,43,.25); }
.accordion-button::after {
    filter: none;
}
.accordion-item { border-color: #eee; margin-bottom: .6rem; border-radius: .4rem !important; overflow: hidden; }

/* ---------- Card header (Bootstrap .card-header) ---------- */
.card-header {
    background-color: var(--card-header-bg);
    color: #fff;
    font-weight: 700;
}

/* ---------- Tables ---------- */
.table-itinerary th { background-color: var(--btn-bg); color: #fff; font-weight: 600; width: 160px; }
.table-itinerary td, .table-itinerary th { vertical-align: top; padding: .85rem 1rem; }
.table-included td { padding: .5rem .75rem; }

/* ---------- Gallery ---------- */
.gallery-grid img {
    border-radius: .5rem;
    width: 100%;
    height: 230px;
    object-fit: cover;
    transition: transform .35s ease, box-shadow .35s ease;
    cursor: pointer;
}
.gallery-grid a:hover img { transform: scale(1.04); box-shadow: 0 14px 30px rgba(0,0,0,.18); }

/* ---------- Footer ---------- */
.footer, .site-footer {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 3.5rem 0 1.5rem;
    margin-top: 0 !important;
}
.footer-logo-box {
    display: inline-block;
    background: #fff;
    padding: .5rem .75rem;
    border-radius: .35rem;
    margin-bottom: .85rem;
}
.footer-logo-box img { display: block; }
.footer-tagline { font-weight: 500; opacity: .9; margin-bottom: .5rem; }
.footer-company { font-size: .85rem; opacity: .75; }
.footer-heading { font-size: 1rem; font-weight: 700; color: #fff; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: .04em; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: .65rem; font-size: .92rem; }
.footer-list a { color: var(--footer-link); }
.footer-list i { color: var(--footer-link); width: 1.2rem; }
.footer-cookies { font-size: .82rem; opacity: .85; line-height: 1.6; margin-top: 1rem; }
.footer-divider { border-color: rgba(255,255,255,.15); margin: 2rem 0 1.25rem; }
.footer-copy { font-size: .82rem; opacity: .7; text-align: center; margin-bottom: 0; }

/* ---------- Misc ---------- */
.badge-price {
    background: var(--accent-2);
    color: var(--btn-bg);
    font-weight: 800;
    font-size: 1.1rem;
    padding: .5rem 1rem;
    border-radius: .4rem;
    display: inline-block;
}
.fact-list { list-style: none; padding: 0; }
.fact-list li { position: relative; padding-left: 1.9rem; margin-bottom: .7rem; }
.fact-list.list-check li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: #1c8a4b;
    position: absolute; left: 0; top: .1rem;
}
.fact-list.list-cross li::before {
    content: "\f00d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--accent-1);
    position: absolute; left: 0; top: .1rem;
}

.map-embed { border-radius: .5rem; overflow: hidden; box-shadow: 0 10px 26px rgba(0,0,0,.1); }

/* ---------- Tour subpage theme accents (visual variety per tour) ---------- */
.tour-theme-royal .section-badge, .tour-theme-royal .tile-price { color: #1a3d8f; }
.tour-theme-royal .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #1a3d8f; }

.tour-theme-highlands .section-badge, .tour-theme-highlands .tile-price { color: #2f5233; }
.tour-theme-highlands .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #2f5233; }

.tour-theme-coastal .section-badge, .tour-theme-coastal .tile-price { color: #0e7c86; }
.tour-theme-coastal .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #0e7c86; }

.tour-theme-literary .section-badge, .tour-theme-literary .tile-price { color: #7a4b1e; }
.tour-theme-literary .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #7a4b1e; }

.tour-theme-welsh .section-badge, .tour-theme-welsh .tile-price { color: #6d1f2b; }
.tour-theme-welsh .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #6d1f2b; }

.tour-theme-magical .section-badge, .tour-theme-magical .tile-price { color: #5b3a8e; }
.tour-theme-magical .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #5b3a8e; }

.tour-theme-culinary .section-badge, .tour-theme-culinary .tile-price { color: #c1651b; }
.tour-theme-culinary .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #c1651b; }

.tour-theme-historic .section-badge, .tour-theme-historic .tile-price { color: #5c4a36; }
.tour-theme-historic .accordion-button:not(.collapsed) { box-shadow: inset 0 -3px 0 #5c4a36; }

.tour-theme-grand .section-badge, .tour-theme-grand .tile-price { color: var(--btn-bg); }

@media (max-width: 767.98px) {
    .section { padding: 3rem 0; }
    .hero-content { text-align: center; }
}

/* ---------- Back to top ---------- */
#backToTop {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 900;
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--btn-bg);
    color: #fff;
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
    box-shadow: 0 8px 20px rgba(0,0,0,.2);
}
#backToTop.show { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTop:hover { background: var(--accent-1); }

/* ---------- Lightbox modal ---------- */
#lightboxModal .modal-content { background: transparent; border: none; }
#lightboxModal .modal-body { padding: 0; text-align: center; }
#lightboxModal img { max-height: 82vh; border-radius: .4rem; }
#lightboxModal .lightbox-caption { color: #fff; margin-top: .75rem; font-weight: 500; }
#lightboxModal .btn-close { filter: invert(1); position: absolute; top: -2.5rem; right: 0; }