/*
Theme Name: Airlink Blog
Theme URI: https://www.airlinkspares.com/blog
Author: Airlink Spares
Description: Custom blog theme for Airlink Spares. Loads the main site's stylesheet for a pixel-identical header/footer, then adds blog-specific components (banner, table of contents, share, post cards). Pairs with Yoast SEO.
Version: 4.1.0
License: GNU General Public License v2 or later
Text Domain: airlink-blog
*/

/* Header, footer, body base, fonts and colours all come from the bundled
   main-site.css (enqueued before this file). Below are ONLY the blog's own
   components, using classes that don't exist on the main site so nothing
   collides. */

:root {
    --navy:#14395C; --navy-deep:#002D4B; --blue:#0E6FA6;
    --ink:#131B24; --body:#444; --muted:#6b7785;
    --line:#e6e9ee; --bg:#fff; --bg-soft:#f6f8fa;
    --radius:10px; --blogmaxw:1140px;
}

/* skip link */
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:1000;}
.skip-link:focus{left:8px;top:8px;}

/* generic containers for blog content (scoped names to avoid clashing) */
.site-main{padding:48px 0;}
.site-main .container,.blog-banner .container{max-width:var(--blogmaxw);margin:0 auto;padding:0 20px;}
.content-wrap{display:grid;grid-template-columns:1fr 320px;gap:44px;align-items:start;}

/* ---- Banner ---- */
.blog-banner{position:relative;background-size:cover;background-position:center;background-color:var(--navy-deep);color:#fff;padding:70px 0;text-align:center;}
.blog-banner.no-image{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);}
.blog-banner__overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,45,75,.55),rgba(0,45,75,.78));}
.blog-banner__inner{position:relative;z-index:1;}
.blog-banner h1{color:#fff;margin:8px auto;font-size:40px;font-weight:700;line-height:1.15;max-width:900px;}
.blog-banner__desc,.blog-banner p{color:#dbe5ef;max-width:640px;margin:8px auto 0;font-size:18px;}
.blog-banner__meta{margin-top:12px;font-size:14px;color:#cdd8e4;display:flex;gap:16px;justify-content:center;}
.blog-banner .blog-breadcrumb{font-size:14px;color:#cdd8e4;}
.blog-banner .blog-breadcrumb a{color:#fff;}

/* ---- Post grid / cards ---- */
.post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;}
.post-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;}
.post-card:hover{box-shadow:0 10px 28px rgba(20,57,92,.10);transform:translateY(-2px);}
.post-card__thumb{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--bg-soft);}
.post-card__thumb img{width:100%;height:100%;object-fit:cover;}
.post-card__body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.post-card__cat{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--blue);}
.post-card__title{margin:2px 0 0;font-size:22px;line-height:1.32;font-weight:700;}
.post-card__title a{color:var(--navy-deep);text-decoration:none;font-weight:700;}
.post-card__title a:hover{color:var(--blue);}
.post-card__excerpt{margin:0;font-size:15px;color:var(--body);}
.post-card__meta{margin-top:auto;font-size:13px;color:var(--muted);}
.post-card__more{align-self:flex-start;font-weight:600;font-size:14px;color:var(--blue);text-decoration:none;}

/* ---- Single post ---- */
.single-post .entry-content{font-size:17px;color:var(--body);line-height:1.8;}
.single-post .entry-content h2{font-size:26px;color:var(--navy-deep);margin:34px 0 12px;font-weight:600;line-height:1.25;}
.single-post .entry-content h3{font-size:21px;color:var(--navy);margin:28px 0 10px;font-weight:600;}
.single-post .entry-content p{margin:0 0 18px;}
.single-post .entry-content ul,.single-post .entry-content ol{margin:0 0 18px;padding-left:24px;}
.single-post .entry-content li{margin-bottom:8px;}
.single-post .entry-content img{border-radius:var(--radius);margin:20px 0;max-width:100%;height:auto;}
.single-post .entry-content a{color:var(--blue);text-decoration:underline;}
.single-post .entry-content blockquote{margin:24px 0;padding:4px 20px;border-left:4px solid var(--blue);background:var(--bg-soft);color:var(--navy-deep);font-style:italic;}
.post-tags{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);font-size:14px;}
.post-tags a{display:inline-block;background:var(--bg-soft);color:var(--navy);padding:4px 12px;border-radius:20px;margin:0 6px 6px 0;text-decoration:none;}
.post-cta{margin-top:40px;padding:28px 30px;background:linear-gradient(135deg,var(--navy),var(--navy-deep));border-radius:var(--radius);color:#fff;text-align:center;}
.post-cta h2{margin:0 0 8px;color:#fff;font-size:22px;}
.post-cta p{margin:0 0 18px;color:#cdd8e4;}

/* ---- Sidebar / widgets ---- */
.sidebar .widget{border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px;margin-bottom:24px;}
.sidebar .widget-title{margin:0 0 14px;font-size:17px;color:var(--navy-deep);font-weight:600;}
.sidebar ul{list-style:none;margin:0;padding:0;}
.sidebar .widget:not(.toc-widget) li{padding:8px 0;border-bottom:1px solid var(--line);}
.sidebar .widget:not(.toc-widget) li:last-child{border-bottom:0;}
.sidebar a{color:var(--navy);text-decoration:none;}
.sidebar a:hover{color:var(--blue);}

/* ---- Table of contents ---- */
/* sidebar stickiness handled as a unit below */
.toc-list li{padding:0;border:0!important;}
.toc-list a{display:block;padding:6px 10px;font-size:14px;color:var(--navy);border-left:2px solid var(--line);line-height:1.4;}
.toc-list a:hover{color:var(--blue);border-left-color:var(--blue);}
.toc-list a.is-active{color:var(--blue);border-left-color:var(--blue);font-weight:600;background:var(--bg-soft);}
.toc-list .toc-h3 a{padding-left:22px;font-size:13px;}

/* ---- Share ---- */
.share-buttons{display:flex;gap:10px;flex-wrap:wrap;}
.share-btn{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:var(--navy);color:#fff!important;border:0;cursor:pointer;font-size:16px;text-decoration:none;transition:background .15s,transform .15s;}
.share-btn:hover{background:var(--navy-deep);transform:translateY(-2px);}
.share-linkedin:hover{background:#0a66c2;}
.share-x:hover{background:#000;}
.share-copy.copied{background:#16a34a;}

/* ---- Buttons + pagination ---- */
.btn{display:inline-block;background:var(--navy);color:#fff;padding:12px 26px;border-radius:6px;font-weight:600;text-decoration:none;border:0;cursor:pointer;}
.btn:hover{background:var(--navy-deep);color:#fff;}
.post-cta .btn{background:#fff;color:var(--navy-deep);}
.pagination{margin-top:44px;display:flex;gap:8px;flex-wrap:wrap;justify-content:center;}
.pagination .page-numbers{padding:10px 16px;border:1px solid var(--line);border-radius:6px;color:var(--navy);text-decoration:none;}
.pagination .page-numbers.current{background:var(--navy);color:#fff;border-color:var(--navy);}
.pagination .page-numbers:hover:not(.current){border-color:var(--blue);color:var(--blue);}

/* ---- Responsive ---- */
@media (max-width:980px){.content-wrap{grid-template-columns:1fr;}.sidebar{order:2;}.post-body-wrap .sidebar{position:static;}}
@media (max-width:760px){.post-grid{grid-template-columns:1fr;}.blog-banner h1{font-size:30px;}}

/* ============================================================
   Editorial blog index: text masthead + featured card + pills
   ============================================================ */
.blog-masthead {
    background: #fff;
    padding: 56px 0 28px;
    border-bottom: 1px solid var(--line);
}
.blog-masthead .container { max-width: var(--blogmaxw); margin: 0 auto; padding: 0 20px; }
.blog-masthead h1 {
    margin: 0 0 12px;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--navy-deep);
    letter-spacing: -0.01em;
}
.blog-masthead__intro {
    margin: 0;
    max-width: 620px;
    font-size: 18px;
    line-height: 1.6;
    color: var(--muted);
}

.blog-index { padding-top: 40px; }

/* Featured split card */
.featured-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    text-decoration: none;
    margin-bottom: 40px;
    transition: box-shadow .2s ease;
}
.featured-card:hover { box-shadow: 0 14px 40px rgba(20,57,92,.12); text-decoration: none; }
.featured-card__media { position: relative; min-height: 340px; background: var(--navy-deep); }
.featured-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; }
.featured-card__placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--navy), var(--navy-deep)); }
.featured-card__body { padding: 40px 44px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.featured-tag {
    display: inline-block;
    background: #D93500;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 16px;
}
.featured-card__cat {
    font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
    color: var(--blue); margin-bottom: 10px;
}
.featured-card__title { margin: 0 0 14px; font-size: 30px; line-height: 1.2; color: var(--navy-deep); font-weight: 700; }
.featured-card__excerpt { margin: 0 0 18px; font-size: 16px; color: var(--body); line-height: 1.6; }
.featured-card__meta { font-size: 14px; color: var(--muted); }

/* Category pills */
.cat-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }
.cat-pill {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--navy);
    padding: 9px 20px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
}
.cat-pill:hover { border-color: var(--navy); }
.cat-pill.is-active { background: #D93500; border-color: #D93500; color: #fff; }

.filter-empty { padding: 30px 0; color: var(--muted); text-align: center; }

/* Responsive */
@media (max-width: 860px) {
    .featured-card { grid-template-columns: 1fr; }
    .featured-card__media { min-height: 220px; }
    .featured-card__body { padding: 28px 26px; }
    .featured-card__title { font-size: 24px; }
    .blog-masthead h1 { font-size: 34px; }
}

/* ============================================================
   Fix: masthead clearing the sticky header + single-post header
   ============================================================ */
.blog-masthead { padding-top: 40px; }   /* header now reserves its own space */

/* Single post: framed featured image (full, no crop/overlay) */
.single-post .container { max-width: var(--blogmaxw); margin: 0 auto; padding: 0 20px; }
.post-hero-image {
    margin: 32px 0 30px;
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-soft);
}
.post-hero-image img { width: 100%; height: auto; display: block; }

/* Centered post header (CiteTitan style) */
.post-header { text-align: center; max-width: 820px; margin: 0 auto; padding: 24px 0 4px; }
.post-breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 26px; }
.post-breadcrumb a { color: var(--blue); text-decoration: none; }
.post-breadcrumb a:hover { text-decoration: underline; }
.post-breadcrumb span { margin: 0 8px; color: var(--line); }

.post-title {
    font-size: 40px;
    line-height: 1.15;
    color: var(--navy-deep);
    font-weight: 700;
    margin: 0 auto 22px;
    max-width: 820px;
}
.post-meta-row {
    display: flex; gap: 20px; flex-wrap: wrap;
    align-items: center; justify-content: center;
    margin: 0 0 4px; padding-bottom: 32px;
    border-bottom: 1px solid var(--line);
}
.post-meta-item { font-size: 15px; color: var(--muted); }
.post-meta-item i { color: var(--blue); margin-right: 6px; }

/* Summarize in ChatGPT button */
.summarize-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--navy);
    color: #fff !important;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, transform .15s ease;
}
.summarize-btn:hover { background: var(--navy-deep); transform: translateY(-1px); text-decoration: none; }
.summarize-btn i { color: #fff; }

.post-body-wrap { margin-top: 40px; }

@media (max-width: 860px) {
    .post-title { font-size: 28px; }
    .post-hero-image { margin-top: 24px; }
}


/* ============================================================
   Fix: sticky sidebar as a single unit (TOC no longer overlaps
   the Share / Recent widgets below it).
   ============================================================ */
.post-body-wrap .sidebar {
    position: sticky;
    top: 96px;
    align-self: start;
}
/* if the TOC is very long, let it scroll internally instead of
   pushing the other widgets off-screen */
.post-body-wrap .toc-widget .toc-list {
    max-height: 45vh;
    overflow-y: auto;
}
.post-body-wrap .toc-widget { margin-bottom: 24px; }

/* Blog is the current section when on the blog - subtle active state */
.header-section .desktop-nav-links a.nav-current-blog { color: #D93500; }

/* The featured post also exists in the grid (so category filtering can find
   it), but is hidden by default because it's shown in the big featured card.
   The filter JS reveals it when its category is selected. */
.post-grid .post-card-wrap.is-featured-dup { display: none; }

/* ============================================================
   Blog header: reserve space instead of floating.
   The bundled main-site.css sets the header to position:fixed (it floats
   over the homepage hero). The blog has no hero, so a fixed header would
   overlap the first content. Force sticky here so the header reserves its
   own height and nothing clips beneath it - on listing AND single posts.
   ============================================================ */
header.header-section.bg-white { position: sticky !important; top: 0; z-index: 9999; }