/*
Theme Name: Bloggingtrendz Blueprint
Description: Custom engineering-blueprint design for bloggingtrendz.in, built on Astra. Navy/cyan/brass palette, drafting title-block hero, log-book style post cards.
Author: Narendra Kumar Jha
Template: astra
Version: 1.0.0
Text Domain: bloggingtrendz-blueprint
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --bp-navy-950:#081827;
  --bp-navy-900:#0B2545;
  --bp-navy-800:#13315C;
  --bp-navy-700:#1C4270;
  --bp-cyan:#5FA8D3;
  --bp-cyan-bright:#8ECAE6;
  --bp-brass:#C9A227;
  --bp-brass-bright:#D9B64A;
  --bp-paper:#F6F8FA;
  --bp-paper-line:#DCE4EC;
  --bp-white:#FFFFFF;
  --bp-ink:#10233F;
  --bp-ink-soft:#3E5772;

  --bp-font-display:'Fraunces', Georgia, serif;
  --bp-font-body:'IBM Plex Sans', -apple-system, sans-serif;
  --bp-font-mono:'IBM Plex Mono', 'Courier New', monospace;
}

/* ==========================================================================
   2. BASE / TYPOGRAPHY
   ========================================================================== */
body{
  background:var(--bp-paper) !important;
  color:var(--bp-ink) !important;
  font-family:var(--bp-font-body) !important;
  font-size:17px;
  line-height:1.7;
}

h1,h2,h3,h4,
.entry-title,
.entry-title a,
.page-title,
.site-title,
.site-title a{
  font-family:var(--bp-font-display) !important;
  color:var(--bp-navy-900) !important;
  font-weight:600 !important;
  letter-spacing:-0.01em;
}

a{ color:var(--bp-navy-800); }
a:hover{ color:var(--bp-cyan); }

::selection{ background:var(--bp-cyan-bright); color:var(--bp-navy-950); }

/* small technical eyebrow / meta / labels */
.entry-meta,
.ast-comment-meta,
.woocommerce-breadcrumb,
.bp-eyebrow{
  font-family:var(--bp-font-mono) !important;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:12px !important;
  color:var(--bp-ink-soft) !important;
}

/* ==========================================================================
   2b. FULL-WIDTH SITE FALLBACK
   If Astra's Customizer > Layout > Container > Site Layout is set to
   "Boxed" or "Padded", the whole site sits in a narrow centered column.
   These overrides force it back to true full width edge-to-edge.
   Harmless no-op if your Site Layout is already set to "Full Width".
   ========================================================================== */
.ast-theme-boxed #ast-hf-wrap,
.ast-theme-boxed-container #ast-hf-wrap,
.ast-page-builder-template #ast-hf-wrap,
#ast-hf-wrap{
  max-width:100% !important;
  box-shadow:none !important;
}
body.ast-theme-boxed,
body.ast-theme-boxed-container{
  background:var(--bp-white) !important;
}

/* ==========================================================================
   3. HEADER / NAVIGATION
   ========================================================================== */
#masthead,
.main-header-bar,
.ast-above-header,
.site-header{
  background:var(--bp-navy-900) !important;
  border-bottom:2px solid var(--bp-brass) !important;
}

.site-title a,
.ast-site-title a{
  color:var(--bp-white) !important;
  font-size:26px !important;
}
.site-title a::after{
  content:"";
}

.site-description{ color:var(--bp-cyan-bright) !important; }

.main-header-bar .main-navigation ul li a,
#primary-menu ul li a,
.ast-primary-menu-container ul li a{
  color:var(--bp-white) !important;
  font-family:var(--bp-font-mono) !important;
  font-size:13px !important;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
.main-header-bar .main-navigation ul li a:hover,
.main-header-bar .main-navigation ul li.current-menu-item > a{
  color:var(--bp-brass-bright) !important;
}

.ast-mobile-menu-buttons svg,
.astra-menu-toggle-icon{
  fill:var(--bp-white) !important;
}

/* ==========================================================================
   4. HOMEPAGE HERO — DRAFTING TITLE BLOCK
   ========================================================================== */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; }

.bp-hero{
  position:relative;
  background:var(--bp-navy-900);
  background-image:
    linear-gradient(var(--bp-navy-800) 1px, transparent 1px),
    linear-gradient(90deg, var(--bp-navy-800) 1px, transparent 1px);
  background-size:32px 32px;
  padding:72px 24px 56px;
  overflow:hidden;
  border-bottom:2px solid var(--bp-brass);
  /* break out of Astra's boxed content container to span the full browser width */
  width:100vw;
  max-width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
}
.bp-hero::before{
  /* compass rose, top right, faint */
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:280px; height:280px;
  border-radius:50%;
  border:1px solid rgba(142,202,230,0.25);
}
.bp-hero::after{
  content:"";
  position:absolute;
  top:-20px; right:-20px;
  width:200px; height:200px;
  border-radius:50%;
  border:1px dashed rgba(201,162,39,0.3);
}
.bp-hero-inner{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:2;
}
.bp-hero-eyebrow{
  font-family:var(--bp-font-mono);
  color:var(--bp-brass-bright);
  text-transform:uppercase;
  letter-spacing:0.14em;
  font-size:13px;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
.bp-hero-eyebrow::before{
  content:"";
  width:28px; height:1px;
  background:var(--bp-brass-bright);
  display:inline-block;
}
.bp-hero h1{
  font-family:var(--bp-font-display) !important;
  color:var(--bp-white) !important;
  font-size:clamp(32px,4.4vw,54px) !important;
  line-height:1.12 !important;
  max-width:820px;
  font-weight:600 !important;
  margin:0 0 18px !important;
}
.bp-hero p.bp-hero-sub{
  color:var(--bp-cyan-bright);
  font-size:18px;
  max-width:640px;
  line-height:1.6;
  margin-bottom:40px;
}

/* the title block itself — like a drawing's info box */
.bp-titleblock{
  border:1px solid rgba(142,202,230,0.35);
  background:rgba(11,37,69,0.55);
  backdrop-filter:blur(2px);
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.bp-titleblock .bp-tb-cell{
  padding:16px 20px;
  border-right:1px solid rgba(142,202,230,0.25);
}
.bp-titleblock .bp-tb-cell:last-child{ border-right:none; }
.bp-tb-label{
  font-family:var(--bp-font-mono);
  font-size:11px;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--bp-brass-bright);
  display:block;
  margin-bottom:6px;
}
.bp-tb-value{
  font-family:var(--bp-font-body);
  color:var(--bp-white);
  font-size:15px;
  font-weight:500;
  line-height:1.4;
}

@media (max-width:780px){
  .bp-titleblock{ grid-template-columns:repeat(2,1fr); }
  .bp-titleblock .bp-tb-cell:nth-child(2){ border-right:none; }
}

/* ==========================================================================
   5. BLOG GRID — LOG-BOOK ENTRY CARDS
   ========================================================================== */
.ast-separate-container,
.ast-article-single{
  background:transparent !important;
  box-shadow:none !important;
}

.ast-article-post{
  background:var(--bp-white) !important;
  border:1px solid var(--bp-paper-line) !important;
  border-radius:2px !important;
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  overflow:hidden;
}
.ast-article-post:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 24px rgba(11,37,69,0.12) !important;
  border-color:var(--bp-cyan) !important;
}
/* left accent bar, like a filed log tab */
.ast-article-post::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--bp-cyan);
}
/* corner tick, drafting mark */
.ast-article-post::after{
  content:"";
  position:absolute;
  top:10px; right:10px;
  width:10px; height:10px;
  border-top:1.5px solid var(--bp-brass);
  border-right:1.5px solid var(--bp-brass);
  opacity:0.7;
}

.ast-article-post .entry-title{
  font-size:20px !important;
  line-height:1.35 !important;
}
.ast-article-post .entry-title a{ color:var(--bp-navy-900) !important; }
.ast-article-post .entry-title a:hover{ color:var(--bp-navy-700) !important; }

.ast-article-post .entry-meta,
.ast-article-post .posted-on,
.ast-article-post .ast-author-details{
  font-family:var(--bp-font-mono) !important;
  font-size:11.5px !important;
  color:var(--bp-ink-soft) !important;
}

/* category badge = stamped label */
.ast-article-post .ast-taxonomy-container a,
.entry-category a,
.cat-links a{
  background:var(--bp-navy-900) !important;
  color:var(--bp-white) !important;
  font-family:var(--bp-font-mono) !important;
  font-size:10.5px !important;
  letter-spacing:0.06em;
  text-transform:uppercase;
  padding:4px 10px !important;
  border-radius:2px !important;
  border:1px solid var(--bp-brass);
}

/* ==========================================================================
   6. SINGLE POST TYPOGRAPHY
   ========================================================================== */
.single .entry-title{
  font-size:clamp(26px,3.4vw,42px) !important;
  line-height:1.2 !important;
  border-bottom:2px solid var(--bp-brass);
  padding-bottom:18px;
  margin-bottom:8px !important;
}
.single .entry-content{
  font-size:18px;
  line-height:1.8;
  color:var(--bp-ink);
}
.single .entry-content p{ margin-bottom:1.3em; }
.single .entry-content h2{
  border-left:4px solid var(--bp-cyan);
  padding-left:14px;
  margin-top:2.2em !important;
}
.single .entry-content h3{ color:var(--bp-navy-800) !important; }
.single .entry-content blockquote{
  border-left:3px solid var(--bp-brass);
  background:var(--bp-paper);
  padding:14px 20px;
  font-style:italic;
  color:var(--bp-ink-soft);
}
.single .entry-content a{
  color:var(--bp-navy-800);
  text-decoration:underline;
  text-decoration-color:var(--bp-cyan);
  text-underline-offset:3px;
}
.single .entry-content img{
  border:1px solid var(--bp-paper-line);
}

/* ==========================================================================
   7. BUTTONS / CTAs
   ========================================================================== */
.ast-button,
button,
.wp-block-button__link,
.elementor-button{
  background:var(--bp-navy-900) !important;
  color:var(--bp-white) !important;
  border:1px solid var(--bp-navy-900) !important;
  border-radius:2px !important;
  font-family:var(--bp-font-mono) !important;
  letter-spacing:0.05em;
  text-transform:uppercase;
  font-size:13px !important;
  transition:all .15s ease;
}
.ast-button:hover,
button:hover,
.wp-block-button__link:hover,
.elementor-button:hover{
  background:var(--bp-brass) !important;
  border-color:var(--bp-brass) !important;
  color:var(--bp-navy-950) !important;
}

/* pagination */
.page-numbers{
  font-family:var(--bp-font-mono) !important;
  border-radius:2px !important;
}
.page-numbers.current,
a.page-numbers:hover{
  background:var(--bp-navy-900) !important;
  color:var(--bp-white) !important;
  border-color:var(--bp-navy-900) !important;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
#footer-widget-area,
.ast-small-footer,
.site-footer{
  background:var(--bp-navy-950) !important;
  color:var(--bp-cyan-bright) !important;
  border-top:2px solid var(--bp-brass);
}
.ast-small-footer a,
.site-footer a{
  color:var(--bp-white) !important;
}
.footer-copyright,
.ast-small-footer p{
  font-family:var(--bp-font-mono) !important;
  font-size:12px !important;
  letter-spacing:0.04em;
}

/* ==========================================================================
   9. SIDEBAR WIDGETS
   ========================================================================== */
.widget-title,
.widget h2, .widget h3{
  font-family:var(--bp-font-mono) !important;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:13px !important;
  color:var(--bp-navy-900) !important;
  border-bottom:2px solid var(--bp-cyan);
  padding-bottom:8px;
}

/* ==========================================================================
   10. ACCESSIBILITY / MOTION
   ========================================================================== */
a:focus-visible,
button:focus-visible,
.ast-article-post:focus-within{
  outline:2px solid var(--bp-cyan) !important;
  outline-offset:2px;
}
@media (prefers-reduced-motion: reduce){
  .ast-article-post{ transition:none; }
}