/*
Theme Name:   Polycule Editorial (Direction A)
Theme URI:    https://polycule.blog
Description:  Warm Editorial child theme for Kadence. Cream ground, plum and
              terracotta accents, serif display with a clean sans body.
Author:       Iris
Template:     kadence
Version:      1.0.0
License:      GPL-2.0-or-later
*/

/* ============================================================
   DIRECTION A — WARM EDITORIAL
   Palette: cream #FBF7F1 · ink #2B2320 · plum #7A2E4A
            terracotta #C4633F · sage #8A9A7B · line #E7DED3
   ============================================================ */

:root{
  --a-cream:#FBF7F1;
  --a-surface:#FFFDFA;
  --a-ink:#2B2320;
  --a-ink-soft:#6B5D56;
  --a-plum:#7A2E4A;
  --a-terracotta:#C4633F;
  --a-sage:#8A9A7B;
  --a-line:#E7DED3;
  --a-plum-tint:#F3E7EC;

  /* drive Kadence's own variables */
  --global-palette1: var(--a-plum);
  --global-palette2: var(--a-ink);
  --global-palette3: var(--a-plum);
  --global-palette4: var(--a-ink);
  --global-palette5: var(--a-ink-soft);
  --global-palette6: var(--a-terracotta);
  --global-palette7: var(--a-line);
  --global-palette8: var(--a-cream);
  --global-palette9: var(--a-surface);

  --global-body-font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --global-heading-font-family:'Fraunces',Georgia,'Times New Roman',serif;
}

/* ---------- ground & type ---------- */
body{
  background:var(--a-cream);
  color:var(--a-ink);
  font-family:var(--global-body-font-family);
  font-size:18px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,.entry-title{
  font-family:var(--global-heading-font-family);
  color:var(--a-ink);
  letter-spacing:-.02em;
  line-height:1.18;
  font-weight:600;
}
h1,.entry-title{letter-spacing:-.025em}

a{color:var(--a-plum);text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:var(--a-terracotta)}

/* ---------- header ---------- */
.site-header-row,.site-header{
  background:rgba(251,247,241,.94)!important;
  border-bottom:1px solid var(--a-line);
  backdrop-filter:blur(8px);
}
.site-branding .site-title a,.site-title a{
  font-family:var(--global-heading-font-family);
  font-weight:700;
  color:var(--a-plum)!important;
  letter-spacing:-.02em;
}
.site-description{color:var(--a-terracotta)!important;letter-spacing:.12em;
  text-transform:uppercase;font-size:.74rem;font-weight:600}
.main-navigation a{
  color:var(--a-ink-soft)!important;font-size:.94rem;font-weight:500;
  padding:.35em .7em;transition:color .15s;
}
.main-navigation a:hover,.main-navigation .current-menu-item>a{
  color:var(--a-plum)!important;
}

/* ---------- buttons ---------- */
.wp-block-button__link,.kb-button,.button,button,input[type=submit]{
  border-radius:999px!important;
  font-weight:600;
  transition:transform .15s,box-shadow .15s,background .15s;
}
.wp-block-button__link:hover,.kb-button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 20px rgba(122,46,74,.22);
}

/* ---------- cards / posts ---------- */
.entry-card,.post,.loop-entry{
  background:var(--a-surface);
  border:1px solid var(--a-line);
  border-radius:16px;
  overflow:hidden;
  transition:transform .18s,box-shadow .18s;
}
.entry-card:hover,.loop-entry:hover{
  transform:translateY(-3px);
  box-shadow:0 14px 34px rgba(43,35,32,.09);
}
.entry-meta,.posted-on,.entry-taxonomies{
  color:#9A8B83;font-size:.82rem;
}
.entry-summary p{color:var(--a-ink-soft)}

/* category pills */
.entry-taxonomies a,.cat-links a{
  background:var(--a-plum-tint);
  color:var(--a-plum)!important;
  border-radius:999px;
  padding:.2em .75em;
  font-size:.72rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  font-weight:600;
  text-decoration:none;
}

/* ---------- blockquote / pull quote ---------- */
blockquote,.wp-block-quote{
  border-left:3px solid var(--a-terracotta);
  background:var(--a-surface);
  border-radius:0 14px 14px 0;
  padding:1.4em 1.6em;
  font-family:var(--global-heading-font-family);
  font-size:1.18rem;
  color:var(--a-ink);
}
blockquote cite{color:var(--a-terracotta);text-transform:uppercase;
  letter-spacing:.08em;font-size:.8rem;font-style:normal}

/* ---------- footer ---------- */
.site-footer,.footer-navigation{
  border-top:1px solid var(--a-line);
  background:var(--a-cream);
  color:var(--a-ink-soft);
  font-size:.9rem;
}
.site-footer a{color:var(--a-ink-soft)}
.site-footer a:hover{color:var(--a-plum)}

/* ---------- content width / rhythm ---------- */
.content-container,.site-container{max-width:1080px}
.entry-content{font-size:1.06rem}
.entry-content p{margin-bottom:1.35em}
.entry-content h2{margin-top:2.2em;font-size:1.65rem}
.entry-content h3{margin-top:1.7em;font-size:1.3rem}

/* wide/aligned blocks get breathing room */
.alignwide{margin-left:auto;margin-right:auto;max-width:calc(1080px + 120px)}

/* ---------- forms ---------- */
input[type=text],input[type=email],textarea,select{
  background:var(--a-surface);
  border:1px solid var(--a-line);
  border-radius:10px;
  padding:.7em .9em;
  color:var(--a-ink);
}
input:focus,textarea:focus{outline:2px solid var(--a-plum);outline-offset:1px}

@media(max-width:640px){
  body{font-size:17px}
  .site-description{display:none}
}

/* ============================================================
   FIXES after first live render
   ============================================================ */

/* Kadence paints body with --global-palette8 and the content wrapper with
   --global-palette9. Redirect both onto the Direction A palette with enough
   specificity to beat the theme's generated CSS. */
html body{
  background-color:var(--a-cream) !important;
}
.content-bg,
body.content-style-unboxed .site,
.site-container,
.content-container,
.content-wrap,
.content-area,
.entry-content-wrap,
#inner-wrap,
#content,
.site{
  background-color:transparent !important;
}
/* keep the page shell cream, not white */
body:not(.content-style-unboxed) .content-bg{
  background-color:var(--a-cream) !important;
  box-shadow:none !important;
  border-radius:0 !important;
}

/* Page-title band: match the mockup's quiet eyebrow treatment */
.entry-hero .entry-title,
.page-hero-section .entry-title{
  color:var(--a-ink) !important;
}
.entry-hero,.page-hero-section{
  background-color:var(--a-cream) !important;
  border-bottom:1px solid var(--a-line);
}

/* The homepage's 100vh cover block leaves huge dead space under the header.
   Cap it so the first screen shows real content. */
/* The homepage's cover block stretches to full-bleed height (4750px live), which
   buries all content far below the fold. Constrain it to a proper hero band and
   let the image crop. */
.wp-block-cover.alignfull[style*="100vh"]{
  min-height:auto !important;
  max-height:560px !important;
  height:560px !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
.wp-block-cover.alignfull[style*="100vh"] .wp-block-cover__image-background{
  object-fit:cover !important;
  height:100% !important;
  width:100% !important;
}
.wp-block-cover.alignfull[style*="100vh"] .wp-block-cover__inner-container{
  max-height:100% !important;
  overflow:visible !important;
}

/* Lists inside content: tighter, on-palette */
.entry-content ul li::marker{color:var(--a-terracotta)}
.entry-content ul{padding-left:1.2em}
.entry-content li{margin-bottom:.4em}

/* Headings inside content get the serif + plum-tinted underline accent */
.entry-content h2{
  padding-bottom:.35em;
  border-bottom:1px solid var(--a-line);
}


/* ============================================================
   Layout fixes: cover inner card + redundant page title
   ============================================================ */

/* The cover's inner card was ending up beside the image instead of centred over it
   once the block height was constrained. Restore the intended overlay. */
.wp-block-cover.alignfull[style*="100vh"]{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.wp-block-cover.alignfull[style*="100vh"] .wp-block-cover__inner-container{
  position:relative !important;
  z-index:2 !important;
  width:100% !important;
  max-width:820px !important;
  margin:0 auto !important;
}
/* Give the welcome card the Direction A treatment instead of a hard white slab */
.wp-block-cover .wp-block-group[style*="rgba(255,255,255"]{
  background-color:rgba(255,253,250,.92) !important;
  border:1px solid var(--a-line) !important;
  box-shadow:0 14px 34px rgba(43,35,32,.10) !important;
}
.wp-block-cover .wp-block-group h1{
  font-size:clamp(1.6rem,3.4vw,2.2rem) !important;
}

/* The front page's page-title band just repeats "Home" — drop it. */
.home .entry-hero,
body.home .page-hero-section{
  display:none !important;
}

/* Single-column editorial: no sidebar column on pages/posts */
.content-area{grid-template-columns:1fr !important}
#secondary, .widget-area, .sidebar{display:none !important}
.content-container, .site-container{max-width:900px}

/* ============================================================
   HOMEPAGE BANNER (media 158, 1920x700 watercolour)
   Rendered by Kadence as the front page's featured image under
   the header. Kadence defaults it to a 2:3 crop box — override
   so the artwork shows whole, full-bleed, as a wide band.
   ============================================================ */
.home .content-area{
  margin-top:0 !important;
}
.home .post-thumbnail.article-post-thumbnail{
  width:100vw !important;
  max-width:100vw !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-top:0 !important;
  margin-bottom:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
/* kill the fixed-ratio crop box and let the image set the height */
.home .post-thumbnail.kadence-thumbnail-ratio-2-3{
  padding-bottom:0 !important;
  height:auto !important;
  overflow:visible !important;
}
.home .post-thumbnail .post-thumbnail-inner{
  position:static !important;
}
.home .post-thumbnail img.post-top-featured{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100vw !important;
  object-fit:contain !important;
  object-position:center !important;
}
/* small screens: trim the empty wash above/below the hearts */
@media (max-width:767px){
  .home .post-thumbnail img.post-top-featured{
    max-height:220px !important;
    object-fit:cover !important;
  }
}