/*
 Theme Name: AT‑Clone
 Template: twentyseventeen
 Version: 1.2   /* 2025‑07‑26 – header alignment & clean‑up */
 Description: Presents posts like The Apollonian Transmission.
*/

/* --------------------------------------------------------------- */
/* 0.  Inherit the TwentySeventeen stylesheet first                */
/* --------------------------------------------------------------- */
@import url("../twentyseventeen/style.css");

/* --------------------------------------------------------------- */
/* 1.  Global typography                                           */
/* --------------------------------------------------------------- */
body{
    font-family:"Libre Baskerville",serif;
    font-size:16px;
    line-height:1.8;
    color:#111;
}
h1,h2,h3,h4,h5,h6{
    font-family:"EB Garamond",serif;
    font-weight:700;
    color:#000;
}
a{color:#1d3557;text-decoration:none}
a:hover{color:#000;text-decoration:underline}

/* --------------------------------------------------------------- */
/* 2.  Header & off‑canvas navigation                              */
/* --------------------------------------------------------------- */
.site-header{
    position:absolute;top:0;left:0;width:100%;
    background:transparent;border:none;padding:0;min-height:0;
    z-index:1002;
}

/* 2‑a  Site title / tag‑line + MENU button – perfectly level */
.site-branding,
#nav-toggle{
    position:absolute;top:8px;            /* identical offset */
    line-height:1;
}
.site-branding{
    left:16px;
    text-align:left;
    padding:0 !important;                 /* <‑‑ kills the parent 1.5 em padding */
}
.site-title{margin:0}
.site-description{margin:0;font-size:12px}

#nav-toggle{
    right:66px;
    background:rgba(0,0,0,.4);
    border:2px solid #fff;
    font-family:"Libre Baskerville",serif;
    font-size:14px;letter-spacing:.05em;
    padding:4px 18px;
    border-radius:2px;
    color:#fff;cursor:pointer;
    transition:.3s;
}
#nav-toggle:hover{background:rgba(0,0,0,.6)}

/* 2‑b  Off‑canvas panel */
.site-navigation{
    position:fixed;top:0;right:-260px;
    width:250px;height:100vh;
    background:#111;overflow-y:auto;
    transition:right .3s ease;
    box-shadow:-2px 0 6px rgba(0,0,0,.1);
    padding:80px 20px 40px;z-index:2000;
}
.site-navigation.open{right:0}
.site-navigation a{
    display:block;margin:.6em 0;padding-bottom:6px;
    font-family:"Libre Baskerville",serif;
    font-size:14px;color:#fff;text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,.1);
}
#nav-overlay{
    position:fixed;inset:0;
    background:rgba(0,0,0,.4);
    opacity:0;visibility:hidden;
    transition:.3s;z-index:1990;
}
#nav-overlay.show{opacity:1;visibility:visible}
.navigation-top{display:none}

/* logged‑in compensation */
body.admin-bar .site-header{top:32px}
body.admin-bar .at-hero  {margin-top:-32px}

/* --------------------------------------------------------------- */
/* 3.  Hero (single posts & pages)                                 */
/* --------------------------------------------------------------- */
.at-hero{
    position:relative;height:100vh;
    background-size:cover;background-position:center;
}
.at-hero::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.55));
}
.at-hero-title{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:90%;text-align:center;z-index:2;
}
.at-hero-title h1{
    margin:0;font-size:72px;
    font-weight:800;letter-spacing:.02em;color:#fff;
}
@media(max-width:767px){
    .at-hero-title h1{font-size:42px}
}

/* Duplicate WP entry title hidden */
.single-post .entry-header .entry-title{display:none}

/* --------------------------------------------------------------- */
/* 4.  Meta line & reading column                                  */
/* --------------------------------------------------------------- */
.single-post .entry-header{
    margin:80px auto 60px;
    max-width:860px;text-align:center;
}
.single-post .entry-content,
.page .entry-content,
.blog .entry-content{
    max-width:860px;margin:0 auto;
}

/* remove parent theme padding that created white bar */
body:not(.admin-bar) .site-content-contain,
#content.site-content{padding-top:0;margin-top:0}

/* --------------------------------------------------------------- */
/* 5.  Home page – full‑height cards                               */
/* --------------------------------------------------------------- */
.home #posts-list{margin:0}
.home article.home-card{
    position:relative;height:100vh;
    background-size:cover;background-position:center;
}
.home-card::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(rgba(0,0,0,.25),rgba(0,0,0,.55));
}
.home-card .card-overlay{
    position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);
    width:90%;text-align:center;z-index:2;
}
.home-card h2{
    margin:0 0 20px;
    font-family:"Libre Baskerville",serif;
    font-size:46px;font-weight:700;
    color:#fff;text-transform:uppercase;
}
.home-card p{
    font-size:16px;color:#fff;
    max-width:600px;margin:0 auto 30px;
}
.read-more{
    display:inline-block;border:2px solid #fff;
    padding:10px 35px;font-size:14px;
    color:#fff;text-transform:uppercase;
}

/* --------------------------------------------------------------- */
/* 6.  Post footer navigation                                      */
/* --------------------------------------------------------------- */
.site-info,.social-links-menu{display:none}
nav.post-navigation{
    background:#000;padding:60px 0;margin-top:80px;
}
.nav-links{
    max-width:1060px;margin:0 auto;
    display:flex;justify-content:space-between;
}
.nav-links a{
    color:#fff;font-family:"Libre Baskerville",serif;
    font-size:14px;text-transform:uppercase;
}

/* --------------------------------------------------------------- */
/* 7.  Helpers                                                     */
/* --------------------------------------------------------------- */
/* avoid double‑darkening when an <img> is used in .home-card */
.home-card img{filter:none}

/* ——— Hot‑patch 2025‑07‑26b ——— */
html,body{margin:0;padding:0}                 /* 1 — removes white bars  */

.site-title a,
.site-description{color:#fff !important}      /* 2 — forces white text  */

/* keep hero edge‑to‑edge even if the browser adds a scrollbar later */
body{overflow-x:hidden}

/* END ------------------------------------------------------------ */
/* ——— Home‑page clean‑up 2025‑07‑26 ——— */
/* Ensure cards always cover full width & there is no stray padding */
.home article.home-card{margin:0;border:0}

/* Remove default bottom padding TwentySeventeen adds to #content */
.home .site-content{padding-bottom:0}

/* Hide any orphaned .panel-content elements if you keep static front page */
.front-page .panel-content{display:none}

/* --- Home cards @ 50 vh instead of 100 vh --- */
.home article.home-card{height:50vh}

/* --- Visual variations ------------------------------------------- */
.banner-card .card-overlay{max-width:800px}
.banner-card h2{font-size:56px}
/* optional subtle label on the sticky card */
.sticky-card::after{
    content:'Featured';position:absolute;top:15px;left:20px;
    background:#fff;color:#000;font-size:12px;
    padding:2px 6px;letter-spacing:.05em;
}
/* --- Banner card fixed to 1391 × 779 (~56 %) ------------------- */
.banner-card{
    height:auto !important;          /* ignore the 50 vh rule      */
    padding-top:56% !important;      /* 779 / 1391 ≈ 0.56 → keeps perfect aspect ratio */
    background-size:cover;           /* still fills horizontally   */
    background-position:center;      /* crop evenly if needed      */
}

/* Optional hard ceiling so ultra‑wide monitors don't show a giant slab */
@media (min-width:1920px){
    .banner-card{max-height:779px}
}