/*
 Theme Name:   Astra Child
 Theme URI:    http://experttechnic.co.uk/
 Description:  Astra Child Theme for Expert Technic - Midnight Vogue Edition
 Author:       Antigravity Expert
 Author URI:   https://google.com
 Template:     astra
 Version:      2.0.0
 Text Domain:  astra-child
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&display=swap');

:root {
    --bg-dark: #0B0C10;
    --bg-panel: #15181E;
    --text-light: #E0E6ED;
    --text-muted: #8A93A2;
    --accent-gold: #C5A880;
    --accent-gold-hover: #E2C79E;
    
    --border-subtle: rgba(197, 168, 128, 0.15);
    --glass-bg: rgba(21, 24, 30, 0.6);
    
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Outfit', -apple-system, sans-serif;
    
    --radius-lg: 24px;
    --radius-md: 16px;
    --radius-sm: 8px;
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

body {
    background-color: var(--bg-dark) !important;
    color: var(--text-light) !important;
    font-family: var(--font-body) !important;
    line-height: 1.6;
    overflow-x: hidden;
    display: flex !important;
    flex-direction: column !important;
}

#masthead {
    order: -1 !important; /* Force header to the very top, above any injected tickers */
    width: 100% !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading) !important;
    color: var(--text-light) !important;
    margin: 0;
}

/* ══════════════════════════════════════════════════
   GLASSMORPHISM HEADER
   ══════════════════════════════════════════════════ */
.main-header-bar {
    width: 100% !important;
    max-width: none !important;
    background: var(--glass-bg) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 0 !important;
    padding: 0 20px !important;
    height: 60px !important; /* Fixed height to prevent overflow */
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
}

/* -------------------------------------------------
   LOGO POSITION & SIZE – natural placement
   ------------------------------------------------- */
/* Ensure the branding container is taken out of the header flow */
.site-branding {
    position: relative !important; /* Stay inside header flow, never overlap ticker */
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* Enlarge the logo and remove any unwanted background */
.site-branding .site-logo-img img.custom-logo,
.site-logo-img img.custom-logo {
    height: 120px !important;   /* Large, prominent, fits within 130px header */
    width: auto !important;
    max-width: none !important;
    mix-blend-mode: lighten !important;
    filter: contrast(1.5) brightness(1.2) !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Header tall enough to hold 120px logo — ticker sits BELOW, never overlapped */
.main-header-bar {
    padding-left: 20px !important;
    height: 130px !important;
    min-height: 130px !important;
}


.ast-flex.main-header-container,
.main-header-bar .main-header-bar-wrap,
.main-header-bar-wrap .ast-flex {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 130px !important;  /* Match header height */
    padding: 0 25px !important;
}

@media (max-width: 768px) {
    /* Shrink the header on mobile to save vertical space */
    .main-header-bar {
        height: 80px !important;
        min-height: 80px !important;
        padding-left: 10px !important;
    }
    .ast-flex.main-header-container,
    .main-header-bar .main-header-bar-wrap,
    .main-header-bar-wrap .ast-flex {
        height: 80px !important;
    }
    .site-branding {
        top: 10px !important;
        left: 10px !important;
    }
    .site-branding .site-logo-img img.custom-logo,
    .site-logo-img img.custom-logo {
        height: 60px !important; /* Shrink logo on mobile */
    }
    /* Allow toggle button to show clearly */
    .ast-mobile-menu-buttons {
        margin-top: 0 !important;
    }
}

/* Removed above-header display: none so ticker shows */

/* Site Identity (Logo/Text) */
.site-title a {
    font-family: var(--font-heading) !important;
    color: var(--accent-gold) !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
}
.site-description { display: none !important; }

/* Navigation */
.main-header-menu,
.main-header-menu.ast-menu-layout-inline,
.main-navigation > ul {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

.main-header-menu > li,
.main-header-menu > li.menu-item {
    display: inline-flex !important;
    align-items: center !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.main-header-menu > li > a {
    font-family: var(--font-body) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--text-light) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
    transition: var(--transition) !important;
    padding: 10px 0 !important;
}

.main-header-menu > li > a:hover {
    color: var(--accent-gold) !important;
}

/* Search */
.menu-item-search {
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 10px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}
.menu-item-search .search-form {
    display: flex !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: rgba(0,0,0,0.3) !important;
}
.menu-item-search .search-field {
    background: transparent !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 15px !important;
    font-size: 13px !important;
    font-family: var(--font-body) !important;
    outline: none !important;
    width: 120px !important;
    transition: width 0.3s ease !important;
}
.menu-item-search .search-field:focus {
    width: 160px !important;
}
.menu-item-search .search-field::placeholder { color: var(--text-muted) !important; }
.menu-item-search .search-submit {
    background: transparent !important;
    color: var(--accent-gold) !important;
    border: none !important;
    padding: 8px 15px !important;
    font-size: 12px !important;
    cursor: pointer !important;
}
.menu-item-search .search-submit:hover { color: #fff !important; }
.menu-item-search .ast-icon { display: none !important; }
.ast-custom-button-link { display: none !important; }

/* ══════════════════════════════════════════════════
   CINEMATIC HERO
   ══════════════════════════════════════════════════ */
.midnight-vogue {
    padding-bottom: 100px;
}

.vogue-hero {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 600px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    margin-bottom: 100px;
}

.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    transform: scale(1.05);
    transition: transform 10s ease-out;
}

.vogue-hero:hover .hero-bg {
    transform: scale(1);
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(11,12,16,0.1) 0%, rgba(11,12,16,0.6) 50%, rgba(11,12,16,1) 100%);
}

.hero-content {
    position: relative;
    z-index: 10;
    width: 100%;
    padding-bottom: 60px;
}

.hero-content-inner {
    max-width: 800px;
}

.vogue-cat-label {
    display: inline-block;
    color: var(--accent-gold);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    margin-bottom: 20px;
    position: relative;
    padding-left: 40px;
}
.vogue-cat-label::before {
    content: ''; position: absolute; left: 0; top: 50%;
    width: 30px; height: 1px; background: var(--accent-gold);
}

.hero-title {
    font-size: 4.5rem;
    line-height: 1.1;
    margin-bottom: 25px;
}
.hero-title a { color: #fff; text-decoration: none; transition: var(--transition); }
.hero-title a:hover { color: var(--accent-gold); }

.hero-excerpt {
    font-size: 1.3rem;
    color: var(--text-light);
    opacity: 0.9;
    margin-bottom: 40px;
    font-weight: 300;
}

.vogue-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 40px;
    background: transparent;
    border: 1px solid var(--accent-gold);
    color: var(--accent-gold);
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    border-radius: 30px;
    transition: var(--transition);
}
.vogue-btn:hover {
    background: var(--accent-gold);
    color: var(--bg-dark);
}

/* ══════════════════════════════════════════════════
   BENTO GRID CATEGORIES
   ══════════════════════════════════════════════════ */
.vogue-categories {
    max-width: 1400px;
    margin: 0 auto;
    display: block !important;
    width: 100% !important;
}

.vogue-bento-section {
    margin-bottom: 120px;
    display: block !important;
    width: 100% !important;
}

.bento-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.bento-title {
    font-size: 2.8rem;
    color: #fff;
    font-weight: 400;
}

.bento-view-all {
    color: var(--accent-gold);
    font-family: var(--font-body);
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--transition);
}
.bento-view-all:hover { color: var(--accent-gold-hover); gap: 12px; }

/* Grid Layouts */
.bento-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 300px 300px;
    gap: 20px;
}

/* Alternating layout logic */
.bento-left .bento-main { grid-column: 1; grid-row: 1 / span 2; }
.bento-left .bento-sub-2 { grid-column: 2; grid-row: 1; }
.bento-left .bento-sub-3 { grid-column: 2; grid-row: 2; }

.bento-right .bento-main { grid-column: 2; grid-row: 1 / span 2; }
.bento-right .bento-sub-2 { grid-column: 1; grid-row: 1; }
.bento-right .bento-sub-3 { grid-column: 1; grid-row: 2; }

/* Cards */
.bento-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-panel);
    display: flex;
    align-items: flex-end;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.03);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.bento-image-wrap, .fallback-bento-img {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}
.bento-image-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.fallback-bento-img { background: #1f2937; }

.bento-gradient {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(11,12,16,0.9) 100%);
    pointer-events: none;
}

.bento-card:hover .bento-image-wrap img {
    transform: scale(1.05);
}

.bento-content {
    position: relative;
    z-index: 2;
    padding: 40px;
    width: 100%;
}

.bento-sub .bento-content {
    padding: 30px;
}

.bento-card-title {
    font-size: 2.2rem;
    line-height: 1.2;
    margin-bottom: 10px;
}
.bento-sub .bento-card-title {
    font-size: 1.5rem;
}

.bento-card-title a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}
.bento-card:hover .bento-card-title a { color: var(--accent-gold); }

.bento-excerpt {
    color: var(--text-muted);
    font-size: 1.05rem;
    line-height: 1.5;
    font-family: var(--font-body);
}

/* ══════════════════════════════════════════════════
   SUBSCRIBE MINIMAL
   ══════════════════════════════════════════════════ */
.vogue-subscribe {
    margin-top: 100px;
}
.vogue-subscribe-inner {
    background: var(--bg-panel);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: 80px 40px;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}
.sub-label {
    color: var(--accent-gold);
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-size: 0.8rem;
    font-weight: 600;
    display: block;
    margin-bottom: 15px;
}
.vogue-subscribe-inner h2 { font-size: 3rem; margin-bottom: 20px; }
.vogue-subscribe-inner p { color: var(--text-muted); font-size: 1.1rem; margin-bottom: 40px; }

.vogue-form {
    display: flex;
    max-width: 500px;
    margin: 0 auto;
    background: var(--bg-dark);
    border-radius: 50px;
    padding: 5px;
    border: 1px solid rgba(255,255,255,0.05);
}
.vogue-form input {
    flex: 1;
    background: transparent;
    border: none;
    padding: 15px 25px;
    color: #fff;
    font-family: var(--font-body);
    outline: none;
}
.vogue-form button {
    background: var(--accent-gold);
    color: var(--bg-dark);
    border: none;
    padding: 0 35px;
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-family: var(--font-body);
    cursor: pointer;
    transition: var(--transition);
}
.vogue-form button:hover { background: #fff; }

/* ══════════════════════════════════════════════════
   DARK MODE CUSTOM FOOTER
   ══════════════════════════════════════════════════ */
.vogue-custom-footer {
    background-color: #050608 !important;
    color: var(--text-muted) !important;
    border-top: 1px solid rgba(197, 168, 128, 0.15) !important; /* Subtle gold border */
    padding: 80px 0 40px !important;
    font-family: var(--font-body) !important;
}

.vogue-footer-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 60px;
}

.vogue-custom-footer .footer-logo {
    font-family: var(--font-heading) !important;
    color: var(--accent-gold) !important;
    font-size: 1.8rem;
    margin-bottom: 15px;
    letter-spacing: 0.1em;
}

.vogue-custom-footer .footer-heading {
    font-family: var(--font-body) !important;
    color: #fff !important;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 25px;
}

.vogue-custom-footer p {
    font-size: 0.95rem;
    line-height: 1.8;
    color: #A1A9B7 !important;
}

.vogue-custom-footer .footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vogue-custom-footer .footer-links li {
    margin-bottom: 12px;
}

.vogue-custom-footer a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    transition: var(--transition) !important;
}

.vogue-custom-footer a:hover {
    color: var(--accent-gold) !important;
}

.vogue-footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.05);
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

@media (max-width: 921px) {
    .vogue-footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .vogue-footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}


/* ══════════════════════════════════════════════════
   SINGLE POST TYPOGRAPHY
   ══════════════════════════════════════════════════ */
.single-post .entry-content h1,
.single-post .entry-content h2,
.single-post .entry-content h3,
.single-post .entry-content h4,
.single-post .entry-content h5,
.single-post .entry-content h6 {
    font-family: var(--font-heading) !important;
    line-height: 1.3 !important;
    margin-top: 1.8em !important;
    margin-bottom: 0.8em !important;
    color: var(--accent-gold) !important;
}

.single-post .entry-content h1 { font-size: 2.2rem !important; }
.single-post .entry-content h2 { font-size: 1.8rem !important; color: #fff !important; }
.single-post .entry-content h3 { font-size: 1.5rem !important; }
.single-post .entry-content h4 { font-size: 1.25rem !important; }
.single-post .entry-content h5 { font-size: 1.1rem !important; }
.single-post .entry-content h6 { font-size: 1rem !important; }

.single-post .entry-content p,
.single-post .entry-content li {
    font-size: 1.15rem !important;
    line-height: 1.8 !important;
    margin-bottom: 1.2em !important;
    color: #A1A9B7 !important;
    font-family: var(--font-body) !important;
}

/* RESPONSIVE */
@media (max-width: 921px) {
    .hero-title { font-size: 3rem; }
    .bento-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .bento-left .bento-main, .bento-right .bento-main { grid-column: 1; grid-row: 1; height: 400px; }
    .bento-left .bento-sub-2, .bento-right .bento-sub-2 { grid-column: 1; grid-row: 2; height: 300px; }
    .bento-left .bento-sub-3, .bento-right .bento-sub-3 { grid-column: 1; grid-row: 3; height: 300px; }
    .main-header-bar { width: 100% !important; border-radius: 0 !important; top: 0 !important; }
    .main-header-menu { flex-direction: column !important; background: var(--bg-panel); padding: 20px !important; }
}