/* ============================================================
   Direct Booking — shared blog article styles
   Matches the main site: blue / red / gold palette, premium feel
   ============================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html {
    font-size: 16px;
    scroll-behavior: smooth;
    scroll-padding-top: 72px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (min-width: 320px) { html { font-size: clamp(14px, 0.875rem + 0.25vw, 18px); } }

img, svg, video { max-width: 100%; height: auto; display: block; }

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    min-height: 100dvh;
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    background-size: 400% 400%;
    animation: bgshift 18s ease infinite;
    background-attachment: fixed;
    color: #1c1c22;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}
@keyframes bgshift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important } }

.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ---- Top bar ---- */
/* ==== Navbar — light frosted, matches homepage + segment pages ==== */
.blog-nav {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding: clamp(7px, 1.2vw, 11px) clamp(16px, 4vw, 48px);
    background: rgba(255,255,255,0.96);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    position: sticky; top:0; z-index:100;
    border-bottom: 1px solid rgba(26,42,108,0.08);
}
.blog-nav a.brand { display:flex; align-items:center; line-height:0; }
.blog-nav a.brand img { width: clamp(122px, 14vw, 176px); height:auto; display:block; object-fit:contain; }

.blog-nav .nav-links { display:flex; align-items:center; gap:clamp(4px,1.2vw,14px); flex-wrap:wrap; justify-content:flex-end; }
.blog-nav .nav-links a {
    position:relative; color:#1a2a6c; text-decoration:none;
    font-size:clamp(.82rem,1vw,.9rem); font-weight:600; letter-spacing:.6px;
    text-transform:uppercase; padding:7px 14px; border-radius:8px;
    transition:color .25s, background .25s; display:inline-block; white-space:nowrap;
}
.blog-nav .nav-links a::after {
    content:""; position:absolute; left:14px; right:14px; bottom:3px; height:2px; border-radius:2px;
    background:#ff9933; transform:scaleX(0); transform-origin:center; transition:transform .28s ease;
}
.blog-nav .nav-links a:hover, .blog-nav .nav-links a:focus-visible,
.blog-nav .nav-links a[aria-current="page"] { color:#b21f1f; background:rgba(26,42,108,.05); outline:none; }
.blog-nav .nav-links a:hover::after, .blog-nav .nav-links a:focus-visible::after,
.blog-nav .nav-links a[aria-current="page"]::after { transform:scaleX(1); }
.blog-nav .nav-links a:focus-visible { outline:2px solid #ff9933; outline-offset:2px; }

.blog-nav .nav-links a.cta { color:#fff; background:#1a2a6c; }
.blog-nav .nav-links a.cta::after { display:none; }
.blog-nav .nav-links a.cta:hover, .blog-nav .nav-links a.cta:focus-visible { background:#b21f1f; color:#fff; }

/* Hamburger toggle (mobile) */
.blog-nav .menu-toggle {
    display:none; background:none; border:none; color:#1a2a6c; font-size:1.6rem; cursor:pointer;
    padding:8px 12px; min-width:44px; min-height:44px; border-radius:8px;
}
.blog-nav .menu-toggle:focus-visible { outline:2px solid #ff9933; outline-offset:2px; }

@media (max-width:768px) {
    .blog-nav { position:relative; }
    .blog-nav .nav-links {
        position:absolute; top:100%; left:0; right:0; flex-direction:column;
        background:rgba(255,255,255,0.97);
        -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
        padding:14px 18px 18px; gap:4px; display:none;
        max-height:calc(100dvh - 70px); overflow-y:auto;
        border-bottom:4px solid transparent;
        border-image:linear-gradient(to right,#ff9933 33.33%,#fff 33.33% 66.66%,#138808 66.66%) 1;
        box-shadow:0 12px 24px rgba(26,42,108,.12);
    }
    .blog-nav .nav-links.open { display:flex; }
    .blog-nav .nav-links a { display:block; width:100%; padding:14px 16px; text-align:center; }
    .blog-nav .nav-links a::after { display:none; }
    .blog-nav .nav-links a.cta { margin-top:6px; }
    .blog-nav .menu-toggle { display:flex; align-items:center; justify-content:center; }
}

/* Tricolour signature stripe under the navbar */
.blog-tricolor {
    height:3px; width:100%;
    background:linear-gradient(to right,#ff9933 0%,#ff9933 33.33%,#fff 33.33%,#fff 66.66%,#138808 66.66%,#138808 100%);
    position:sticky; top:0; z-index:99;
    box-shadow:0 2px 8px rgba(26,42,108,.15);
}

/* ---- Article shell ---- */
.article-wrap { max-width: 820px; margin: clamp(20px,4vw,44px) auto; padding: 0 clamp(16px,4vw,24px); }

.breadcrumb { font-size:.82rem; color:rgba(255,255,255,.85); margin-bottom:16px; }
.breadcrumb a { color:#fff; text-decoration:none; }
.breadcrumb a:hover { text-decoration:underline; }
.breadcrumb span[aria-current] { color:#fdbb2d; }

.article-hero {
    background: rgba(0,0,0,.28); border:1px solid rgba(255,255,255,.14);
    border-radius: 18px 18px 0 0; padding: clamp(26px,5vw,48px) clamp(20px,5vw,52px) clamp(22px,4vw,36px);
    color:#fff;
}
.article-tag {
    display:inline-block; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:2px;
    color:#1a2a6c; background:#fdbb2d; padding:5px 14px; border-radius:30px; margin-bottom:16px;
}
.article-hero h1 { font-size: clamp(1.7rem, 4.6vw, 2.9rem); line-height:1.15; letter-spacing:.3px; margin-bottom:14px; }
.article-meta { font-size:.85rem; color:rgba(255,255,255,.75); display:flex; gap:16px; flex-wrap:wrap; }

/* ---- Article body (white reading card) ---- */
.article-body {
    background:#fff; border-radius:0 0 18px 18px;
    padding: clamp(26px,5vw,54px) clamp(20px,5vw,56px) clamp(30px,5vw,56px);
    box-shadow: 0 24px 60px rgba(0,0,0,.32);
}
.article-body > .lead { font-size:clamp(1.05rem,1.6vw,1.22rem); color:#33333b; margin-bottom:26px; line-height:1.6; }
.article-body h2 { font-size:clamp(1.35rem,2.6vw,1.85rem); color:#1a2a6c; margin:34px 0 14px; line-height:1.2; letter-spacing:.2px; }
.article-body h3 { font-size:clamp(1.08rem,1.9vw,1.32rem); color:#b21f1f; margin:24px 0 10px; }
.article-body p { margin-bottom:16px; color:#2c2c34; }
.article-body ul, .article-body ol { margin:0 0 18px 1.3em; }
.article-body li { margin-bottom:9px; color:#2c2c34; }
.article-body strong { color:#1a2a6c; }
.article-body a { color:#b21f1f; font-weight:600; }
.article-body a:hover { text-decoration:underline; }

.keytake {
    background: linear-gradient(135deg, rgba(26,42,108,.06), rgba(253,187,45,.12));
    border-left: 4px solid #fdbb2d; border-radius: 10px;
    padding: 18px 22px; margin: 24px 0; font-size:.98rem;
}
.keytake strong { display:block; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; color:#b21f1f; margin-bottom:6px; }

/* Comparison table */
.cmp-table { width:100%; border-collapse:collapse; margin:20px 0; font-size:.94rem; }
.cmp-table th, .cmp-table td { padding:12px 14px; text-align:left; border-bottom:1px solid #e6e6ee; }
.cmp-table th { background:#1a2a6c; color:#fff; font-weight:600; }
.cmp-table tr:nth-child(even) td { background:#f7f8fc; }
.cmp-table .win { color:#1a7a3c; font-weight:700; }
.cmp-scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* FAQ */
.faq { margin-top:14px; }
.faq details {
    border:1px solid #e2e2ec; border-radius:12px; margin-bottom:12px; padding:2px 18px; background:#fafbff;
}
.faq summary { cursor:pointer; font-weight:700; color:#1a2a6c; padding:14px 0; list-style:none; font-size:1.02rem; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; float:right; color:#b21f1f; font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:'\2013'; }
.faq details p { padding-bottom:16px; margin:0; color:#3a3a44; }

/* CTA band inside article */
.article-cta {
    margin-top:36px; text-align:center; background:linear-gradient(135deg,#1a2a6c,#2a3f8f);
    border-radius:16px; padding:clamp(26px,4vw,40px) 24px; color:#fff;
}
.article-cta h3 { color:#fff; font-size:clamp(1.2rem,2.4vw,1.6rem); margin-bottom:10px; }
.article-cta p { color:rgba(255,255,255,.88); margin-bottom:20px; }
.article-cta .btn-row { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.article-cta a {
    display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:700;
    padding:14px 30px; border-radius:50px; min-height:48px; letter-spacing:.5px; transition:transform .2s, box-shadow .2s;
}
.article-cta a.primary { background:#fdbb2d; color:#1a2a6c; box-shadow:0 10px 26px rgba(253,187,45,.35); }
.article-cta a.ghost { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.5); }
.article-cta a:hover { transform:translateY(-2px); }

/* Related posts */
.related { max-width:820px; margin:0 auto clamp(30px,5vw,50px); padding:0 clamp(16px,4vw,24px); }
.related h2 { color:#fff; font-size:1.3rem; margin:30px 0 16px; }
.related-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:14px; }
.related-grid a {
    display:block; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16);
    border-radius:12px; padding:16px 18px; text-decoration:none; color:#fff; transition:background .3s, transform .2s;
}
.related-grid a:hover { background:rgba(255,255,255,.18); transform:translateY(-3px); }
.related-grid .r-tag { font-size:.66rem; text-transform:uppercase; letter-spacing:1.5px; color:#fdbb2d; font-weight:700; }
.related-grid .r-title { font-size:1rem; font-weight:600; margin-top:6px; line-height:1.3; }

/* ============================================================
   Full Site Footer — identical to homepage (brand consistency)
   ============================================================ */
.site-footer {
    background: rgba(0,0,0,.55);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    color:#fff;
    padding: clamp(40px,7vw,60px) clamp(16px,4vw,40px) clamp(16px,3vw,24px);
    padding-bottom: max(clamp(16px,3vw,24px), env(safe-area-inset-bottom));
    border-top: 1px solid rgba(255,255,255,.1);
    margin-top: clamp(20px,4vw,40px);
}
.footer-container {
    max-width: min(1400px,100%); margin:0 auto;
    display:grid; grid-template-columns: repeat(auto-fit, minmax(min(220px,100%),1fr));
    gap: clamp(24px,4vw,40px); text-align:left;
}
.footer-col h4 { font-size:clamp(.9rem,1.2vw,1rem); text-transform:uppercase; letter-spacing:clamp(1px,.25vw,2px); margin-bottom:clamp(12px,2vw,18px); color:#fdbb2d; }
.footer-col p, .footer-col a { font-size:clamp(.85rem,1.1vw,.92rem); line-height:1.8; color:rgba(255,255,255,.8); text-decoration:none; display:block; overflow-wrap:break-word; }
.footer-col a { transition:padding-left .2s, color .2s; min-height:28px; }
.footer-col a:hover, .footer-col a:focus-visible { color:#fff; padding-left:4px; outline:none; }
.footer-brand p { margin-top:12px; }
.footer-brand .footer-logo { display:inline-block; background:#fff; padding:14px 22px; border-radius:12px; box-shadow:0 6px 18px rgba(0,0,0,.25); margin-bottom:14px; max-width:100%; }
.footer-brand .footer-logo img { width:clamp(220px,18vw,300px); height:auto; max-width:100%; display:block; object-fit:contain; }
.social-icons { display:flex; gap:12px; margin-top:18px; flex-wrap:wrap; }
.social-icons a { width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.15); color:#fff; transition:background .3s, transform .2s, color .3s, border-color .3s; padding:0; }
.social-icons a svg { width:18px; height:18px; }
.social-icons a:hover, .social-icons a:focus-visible { background:#fdbb2d; color:#1a2a6c; border-color:#fdbb2d; transform:translateY(-3px); outline:none; }
.footer-contact .contact-item { display:flex; align-items:flex-start; gap:10px; margin-bottom:10px; font-size:clamp(.85rem,1.1vw,.92rem); color:rgba(255,255,255,.8); line-height:1.5; word-break:break-word; }
.footer-contact .ci-icon { width:17px; height:17px; flex:0 0 auto; margin-top:2px; color:#fdbb2d; }
.footer-bottom { max-width:min(1400px,100%); margin:clamp(24px,5vw,40px) auto 0; padding-top:clamp(16px,3vw,20px); border-top:1px solid rgba(255,255,255,.1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; font-size:clamp(.75rem,1vw,.85rem); color:rgba(255,255,255,.6); }
.footer-bottom-links { display:flex; gap:clamp(12px,2vw,20px); flex-wrap:wrap; }
.footer-bottom-links a { color:rgba(255,255,255,.6); text-decoration:none; transition:color .2s; }
.footer-bottom-links a:hover, .footer-bottom-links a:focus-visible { color:#fff; outline:none; }

@media (max-width:480px) {
    .footer-container { grid-template-columns:1fr; gap:28px; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .footer-bottom-links { justify-content:center; }
}
@media (min-width:481px) and (max-width:768px) {
    .footer-container { grid-template-columns:repeat(2,1fr); }
}