/*
Theme Name: Astra Child - Daily Japan Objects
Template: astra
Version: 3.0.0
Text Domain: astra-child
Description: DJO custom homepage/blog design v3 - fixed sidebar nav, Pale Sky / Muted brown alternating sections, wave dividers. Replaces v2 (white/walnut) design.
*/

/* ==========================================================================
   1. DESIGN TOKENS
   ========================================================================== */
:root{
  --djo-slate:#2A2520;
  --djo-terracotta:#C4622D;
  --djo-terracotta-hover:#A8501F;
  --djo-offwhite:#F5F0E8;
  --djo-sand:#E8E0D0;
  --djo-muted:#8C7B6E;
  --djo-footer:#1A1714;
  --djo-white:#FFFFFF;
  --djo-pale-sky:#A9C6D1;
  --djo-pale-sky-deep:#7FA3B3;

  --djo-text-heading:var(--djo-slate);
  --djo-text-body:var(--djo-slate);
  --djo-text-muted:var(--djo-muted);
  --djo-text-on-dark:var(--djo-offwhite);
  --djo-text-on-dark-muted:var(--djo-sand);
  --djo-accent:var(--djo-terracotta);
  --djo-accent-hover:var(--djo-terracotta-hover);
  --djo-border-subtle:var(--djo-sand);
  --djo-border-on-dark:rgba(245,240,232,0.25);
  --djo-accent-cool:var(--djo-pale-sky);

  --djo-font-display:'Newsreader', serif;
  --djo-font-body:'Jost', sans-serif;
  --djo-fs-eyebrow:0.8125rem;
  --djo-fs-body:1.0625rem;
  --djo-fs-sub:1.375rem;
  --djo-fs-h3:1.75rem;
  --djo-fs-h2:2.5rem;
  --djo-fs-h1:clamp(2.75rem, 5vw, 4.75rem);
  --djo-lh-tight:1.08;
  --djo-lh-snug:1.3;
  --djo-lh-body:1.7;
  --djo-tracking-eyebrow:0.16em;
  --djo-tracking-nav:0.04em;

  --djo-space-1:4px;  --djo-space-2:8px;  --djo-space-3:12px; --djo-space-4:16px;
  --djo-space-5:24px; --djo-space-6:32px; --djo-space-7:48px; --djo-space-8:64px;
  --djo-space-9:96px; --djo-space-10:128px;

  --djo-radius-lg:16px;
  --djo-content-max:1200px;
  --djo-nav-w:220px;
  --djo-nav-offset:268px; /* nav width 220 + 24px margin x2 */
}

/* ==========================================================================
   2. RESET / SCOPE
   Everything is scoped under .djo-page so it never leaks onto other
   Astra-rendered pages (posts, archives that aren't the custom templates).
   ========================================================================== */
.djo-page{ background:var(--djo-white); overflow-x:hidden; }
html, body.djo-template{ overflow-x:hidden; max-width:100%; }
.djo-page, .djo-page *{ box-sizing:border-box; }
.djo-page h1,.djo-page h2,.djo-page h3,.djo-page p,.djo-page ul{ margin:0; padding:0; }
.djo-page ul{ list-style:none; }
.djo-page a{ text-decoration:none; }
.djo-page img{ max-width:100%; display:block; margin:0; }
.djo-page svg{ margin:0; }
.djo-page section{ position:relative; margin-top:0 !important; margin-bottom:0 !important; }

/* Hide Astra's default header/footer chrome on the DJO templates so only
   our custom nav + footer band render. */
body.djo-template #masthead,
body.djo-template .ast-scroll-top-container,
body.djo-template #colophon,
body.djo-template .site-footer,
body.djo-template .ast-footer-container,
body.djo-template .footer-widget-area,
body.djo-template .ast-small-footer,
body.djo-template .ast-footer-copyright{ display:none !important; }
body.djo-template #content{ padding:0 !important; margin:0 !important; }
body.djo-template .site-content .ast-container{ padding:0 !important; max-width:none !important; }

/* Force every Astra layout wrapper to true full width so no right-side
   white gap remains. Covers the page, site-content, container and any
   Astra grid/row helpers, at full specificity via body.djo-template. */
body.djo-template,
body.djo-template #page,
body.djo-template .site,
body.djo-template #content,
body.djo-template .site-content,
body.djo-template .ast-container,
body.djo-template .ast-container__content,
body.djo-template .ast-row,
body.djo-template .ast-grid-common-col{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  float:none !important;
}
body.djo-template{ overflow-x:hidden; }

/* ==========================================================================
   3. BUTTONS
   ========================================================================== */
.djo-btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--djo-font-body); font-weight:400; font-size:0.9rem;
  letter-spacing:var(--djo-tracking-nav);
  padding:14px 34px; border-radius:var(--djo-radius-lg);
  border:1px solid transparent; cursor:pointer;
  transition:background-color .25s ease,color .25s ease,border-color .25s ease;
}
.djo-btn-primary{ background:var(--djo-accent); color:var(--djo-offwhite); }
.djo-btn-primary:hover{ background:var(--djo-accent-hover); color:var(--djo-offwhite); }
.djo-btn-outline{ background:transparent; color:var(--djo-text-heading); border-color:var(--djo-text-heading); }
.djo-btn-outline:hover{ background:var(--djo-text-heading); color:var(--djo-offwhite); }
.djo-btn-arrow{ transition:transform .25s ease; }
.djo-btn:hover .djo-btn-arrow{ transform:translateX(3px); }

/* ==========================================================================
   4. FIXED SIDEBAR NAV (desktop)
   ========================================================================== */
.djo-nav{
  position:fixed; top:var(--djo-space-5); left:var(--djo-space-5);
  width:var(--djo-nav-w); background:var(--djo-sand);
  border-radius:var(--djo-radius-lg);
  display:flex; flex-direction:column; gap:var(--djo-space-5);
  padding:var(--djo-space-5); z-index:100;
}
.djo-nav-mark{
  font-family:var(--djo-font-display); font-style:italic; font-size:1.4rem;
  color:var(--djo-slate); line-height:1.2;
}
.djo-nav-list{ display:flex; flex-direction:column; gap:var(--djo-space-3); }
.djo-nav-list a{
  font-family:var(--djo-font-body); font-weight:400; font-size:0.9375rem;
  letter-spacing:var(--djo-tracking-nav); color:var(--djo-slate);
}
.djo-nav-list a:hover{ color:var(--djo-accent); }
.djo-nav-list a.is-active{ color:var(--djo-accent); }

/* hamburger toggle - hidden on desktop */
.djo-nav-toggle{
  display:none; align-items:center; justify-content:center;
  width:40px; height:40px; border:none; background:transparent; cursor:pointer;
  padding:0; margin-left:auto;
}
.djo-nav-toggle span,
.djo-nav-toggle span::before,
.djo-nav-toggle span::after{
  content:''; display:block; width:22px; height:2px; background:var(--djo-slate);
  transition:transform .2s ease, opacity .2s ease;
}
.djo-nav-toggle span{ position:relative; }
.djo-nav-toggle span::before{ position:absolute; top:-7px; }
.djo-nav-toggle span::after{ position:absolute; top:7px; }
.djo-nav.is-open .djo-nav-toggle span{ background:transparent; }
.djo-nav.is-open .djo-nav-toggle span::before{ transform:translateY(7px) rotate(45deg); }
.djo-nav.is-open .djo-nav-toggle span::after{ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   5. SECTION LAYOUT (shared)
   ========================================================================== */
/* Sections fill the content wrapper. functions.php already forces Astra's
   .ast-container to max-width:none / padding:0 on DJO templates, so a plain
   width:100% here spans edge-to-edge without the fragile 100vw breakout. */
.djo-page section,
.djo-page .djo-footer{
  width:100%;
  max-width:100%;
}
.djo-section-inner{
  max-width:var(--djo-content-max); margin:0 auto;
  padding:var(--djo-space-9) var(--djo-space-5);
  padding-left:calc(var(--djo-nav-offset));
}
/* Wave sits flush to the section edge. line-height:0 on the wave itself
   removes the inline-SVG baseline gap without hiding any section text. */
.djo-wave{ display:block; width:100%; height:100px; margin:0 0 -1px; line-height:0; vertical-align:bottom; }

/* fade-in on scroll (JS toggles .is-visible; no-op if reduced motion) */
.djo-fade{ opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.djo-fade.is-visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){
  .djo-fade{ opacity:1; transform:none; transition:none; }
}

/* ==========================================================================
   6. HERO
   ========================================================================== */
.djo-hero{ background:var(--djo-accent-cool) !important; }
.djo-hero .djo-section-inner{ padding-bottom:var(--djo-space-6) !important; display:flex; flex-direction:column; align-items:flex-end; }
.djo-hero-title{
  font-family:var(--djo-font-display); font-style:italic; font-weight:600;
  font-size:var(--djo-fs-h1); line-height:var(--djo-lh-tight);
  color:var(--djo-offwhite); max-width:680px; text-align:right;
  margin-bottom:var(--djo-space-8);
}
.djo-hero-panel{
  width:100%; max-width:640px; aspect-ratio:21/9; background:var(--djo-offwhite);
  margin:0 auto; display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.djo-hero-panel img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   7. BLOG SECTION (home) + BLOG LISTING (blog page)
   ========================================================================== */
.djo-blog{ background:var(--djo-muted) !important; }
.djo-blog-header{
  display:flex; flex-direction:column; align-items:flex-end; gap:var(--djo-space-2);
  margin-bottom:var(--djo-space-5);
}
.djo-blog-header h2{
  font-family:var(--djo-font-display); font-style:italic; font-weight:600;
  font-size:var(--djo-fs-h2); color:var(--djo-slate);
}
.djo-blog-tabs{
  display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--djo-space-6);
  margin-bottom:var(--djo-space-7); border-bottom:1px solid var(--djo-border-on-dark);
  padding-bottom:var(--djo-space-4);
}
.djo-blog-tabs a{
  font-family:var(--djo-font-body); font-weight:400; font-size:0.875rem;
  letter-spacing:var(--djo-tracking-nav); color:var(--djo-sand);
  padding-bottom:6px; cursor:pointer;
}
.djo-blog-tabs a.is-active{ color:var(--djo-offwhite); border-bottom:2px solid var(--djo-offwhite); }
.djo-blog-tabs a:hover{ color:var(--djo-offwhite); }

.djo-post-list{ display:flex; flex-direction:column; gap:var(--djo-space-5); }
.djo-post-card{
  background:var(--djo-offwhite); display:flex; border-radius:var(--djo-radius-lg);
  overflow:hidden;
}
.djo-post-card-img{
  width:260px; flex-shrink:0; aspect-ratio:4/3; background:var(--djo-sand); overflow:hidden;
}
.djo-post-card-img img{ width:100%; height:100%; object-fit:cover; }
.djo-post-card-body{
  padding:var(--djo-space-5); display:flex; flex-direction:column; gap:var(--djo-space-2);
  justify-content:center;
}
.djo-post-cat{
  font-family:var(--djo-font-body); font-weight:400; font-size:0.75rem;
  letter-spacing:var(--djo-tracking-eyebrow); text-transform:uppercase; color:var(--djo-accent);
}
.djo-post-card-body h3{
  font-family:var(--djo-font-display); font-weight:400; font-size:1.375rem;
  line-height:var(--djo-lh-snug); color:var(--djo-text-heading);
}
.djo-post-card-body h3 a{ color:inherit; }
.djo-post-card-body h3 a:hover{ color:var(--djo-accent); }
.djo-post-excerpt{
  font-family:var(--djo-font-body); font-weight:300; font-size:0.9375rem;
  line-height:var(--djo-lh-body); color:var(--djo-text-muted);
}
.djo-post-date{
  font-family:var(--djo-font-body); font-weight:300; font-size:0.8125rem;
  color:var(--djo-text-muted); margin-top:var(--djo-space-2);
}
.djo-post-empty{
  background:var(--djo-offwhite); border-radius:var(--djo-radius-lg);
  padding:var(--djo-space-6); font-family:var(--djo-font-body); color:var(--djo-text-muted);
  text-align:right;
}

/* pagination on the standalone blog page */
.djo-pagination{ display:flex; justify-content:flex-end; gap:var(--djo-space-3); margin-top:var(--djo-space-6); }
.djo-pagination a, .djo-pagination span{
  font-family:var(--djo-font-body); font-size:0.875rem; color:var(--djo-offwhite);
  padding:8px 14px; border:1px solid var(--djo-border-on-dark); border-radius:var(--djo-radius-lg);
}
.djo-pagination .current{ background:var(--djo-accent); border-color:var(--djo-accent); }
.djo-pagination a:hover{ border-color:var(--djo-offwhite); }

/* ==========================================================================
   8. ABOUT SECTION
   ========================================================================== */
.djo-about{ background:var(--djo-accent-cool) !important; }
.djo-about .djo-section-inner{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:var(--djo-space-5);
}
.djo-eyebrow{
  font-family:var(--djo-font-body); font-weight:400; font-size:var(--djo-fs-eyebrow);
  letter-spacing:var(--djo-tracking-eyebrow); text-transform:uppercase; color:var(--djo-accent);
}
.djo-eyebrow.on-dark{ color:var(--djo-offwhite); }
.djo-about h2{
  font-family:var(--djo-font-display); font-style:italic; font-weight:600;
  font-size:var(--djo-fs-h2); color:var(--djo-offwhite);
}
.djo-about-body{
  font-family:var(--djo-font-body); font-weight:500; font-size:var(--djo-fs-sub);
  line-height:var(--djo-lh-body); color:var(--djo-offwhite); max-width:720px;
}
.djo-about-images{
  display:flex; justify-content:center; gap:var(--djo-space-6);
  margin-top:var(--djo-space-6); flex-wrap:wrap;
}
.djo-about-images .djo-img-slot{
  width:300px; aspect-ratio:4/5; background:var(--djo-offwhite); overflow:hidden;
}
.djo-about-images .djo-img-slot img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   9. CONTACT SECTION
   ========================================================================== */
.djo-contact{ background:var(--djo-muted) !important; }
.djo-contact .djo-section-inner{
  text-align:center; display:flex; flex-direction:column; align-items:center; gap:var(--djo-space-5);
}
.djo-contact h2{
  font-family:var(--djo-font-display); font-style:italic; font-weight:600;
  font-size:var(--djo-fs-h2); color:var(--djo-offwhite);
}

/* ==========================================================================
   10. FOOTER BAND
   ========================================================================== */
.djo-footer{ background:var(--djo-footer) !important; }
.djo-footer .djo-section-inner{
  padding-top:var(--djo-space-6); padding-bottom:var(--djo-space-6);
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:var(--djo-space-5);
}
.djo-footer-mark{
  font-family:var(--djo-font-display); font-style:italic; font-size:1.25rem; color:var(--djo-offwhite);
}
.djo-footer-nav{ display:flex; gap:var(--djo-space-5); flex-wrap:wrap; }
.djo-footer-nav a{
  font-family:var(--djo-font-body); font-size:0.875rem; letter-spacing:var(--djo-tracking-nav);
  color:var(--djo-sand);
}
.djo-footer-nav a:hover{ color:var(--djo-offwhite); }
.djo-footer-copy{
  font-family:var(--djo-font-body); font-size:0.8125rem; color:var(--djo-muted);
}

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width:960px){
  :root{ --djo-nav-offset:0px; }

  .djo-nav{
    position:fixed; top:0; left:0; right:0; width:auto; border-radius:0;
    flex-direction:row; align-items:center; justify-content:space-between;
    padding:var(--djo-space-4) var(--djo-space-5);
  }
  .djo-nav-toggle{ display:flex; }
  .djo-nav-list{
    position:fixed; top:64px; left:0; right:0; bottom:0;
    background:var(--djo-sand); flex-direction:column; gap:var(--djo-space-5);
    padding:var(--djo-space-6) var(--djo-space-5);
    transform:translateX(100%); transition:transform .25s ease;
    z-index:99;
  }
  .djo-nav.is-open .djo-nav-list{ transform:translateX(0); }
  .djo-nav-list a{ font-size:1.1rem; }

  body.djo-template{ padding-top:64px; }

  .djo-section-inner{ padding-left:var(--djo-space-5); padding-right:var(--djo-space-5); }
  .djo-hero .djo-section-inner{ align-items:center; }
  .djo-hero-title{ text-align:center; }
  .djo-blog-header{ align-items:center; }
  .djo-blog-tabs{ justify-content:center; }
  .djo-post-card{ flex-direction:column; }
  .djo-post-card-img{ width:100%; aspect-ratio:16/9; }
}

@media (max-width:600px){
  .djo-section-inner{ padding-top:var(--djo-space-7); padding-bottom:var(--djo-space-7); }
  .djo-about-images{ gap:var(--djo-space-4); }
  .djo-about-images .djo-img-slot{ width:100%; max-width:280px; }
}