/*
Theme Name:   Excell J. Bills — Portfolio (Kadence Child)
Theme URI:    https://excelljbills.com
Description:  Dark, editorial Kadence child — "NYT Mag meets luxury." Block-Editor Edition: the full homepage (Hero, Pillars, Books and Writing, Newsletter, About, Signature) ships as drag-and-drop patterns, with brand colors and fonts wired into the WordPress editor. 100% customizable.
Author:       Excell J. Bills
Template:     kadence
Version:      2.5.0
Requires PHP: 7.4
Text Domain:  excell-portfolio
*/

/* =================================================================
   BRAND TOKENS  —  applied globally, regardless of how pages are built
   ================================================================= */
:root{
  --eb-bg:#0E0E10;
  --eb-bg-elev:#16151A;
  --eb-bg-card:#1A1920;
  --eb-ink:#ECE7DF;
  --eb-ink-dim:#A39E95;
  --eb-ink-faint:#6E6A63;
  --eb-line:rgba(236,231,223,0.12);
  --eb-line-soft:rgba(236,231,223,0.07);
  --eb-brass:#C2A06B;
  --eb-brass-bright:#D9BB80;
  --eb-oxblood:#7A2433;
  --eb-display:'Fraunces',Georgia,'Times New Roman',serif;
  --eb-sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* ---------- Base ---------- */
body,
.site,
.content-bg,
body.wp-singular .entry-content{
  background-color:var(--eb-bg);
  color:var(--eb-ink);
  font-family:var(--eb-sans);
  font-weight:350;
  -webkit-font-smoothing:antialiased;
}
body{line-height:1.65;}

::selection{background:var(--eb-brass);color:#0E0E10;}

/* Fine film-grain over the whole site */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9998;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Typography ---------- */
h1,h2,h3,h4,h5,h6,
.entry-title,
.site-title{
  font-family:var(--eb-display);
  font-weight:380;
  letter-spacing:-.018em;
  line-height:1.05;
  color:var(--eb-ink);
}
h1,.entry-title{font-weight:340;}
p,li{color:var(--eb-ink-dim);}
.entry-content p{font-size:1.075rem;line-height:1.78;}

a{color:var(--eb-ink);transition:color .3s ease;}
a:hover{color:var(--eb-brass);}

/* Editorial drop cap on post/page content */
.single .entry-content > p:first-of-type::first-letter,
.page .entry-content > p:first-of-type::first-letter{
  font-family:var(--eb-display);font-style:italic;font-size:4.4em;line-height:.68;
  float:left;padding:.08em .14em 0 0;color:var(--eb-brass);
}

/* ---------- Header / Footer (Kadence) ---------- */
.site-header-wrap,
.site-header-row-container-inner,
#main-header,
.site-footer,
.site-footer-wrap,
.site-top-header-wrap,
.site-main-header-wrap{
  background-color:var(--eb-bg) !important;
  border-color:var(--eb-line-soft) !important;
}
.site-main-header-wrap{border-bottom:1px solid var(--eb-line-soft) !important;}
.site-branding .site-title a{font-family:var(--eb-display);color:var(--eb-ink) !important;letter-spacing:.005em;display:inline-flex !important;align-items:center;gap:13px;}
/* Monogram fallback: shows the glyph beside the text site-title when no logo image is uploaded.
   If you upload the logo lockup in Customizer → Site Identity, Kadence swaps in the image
   and this ::before simply won't render, so there is never a double monogram. */
.site-branding .site-title a::before{
  content:"";width:30px;height:30px;flex:none;display:inline-block;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='8' y='8' width='48' height='48' fill='none' stroke='%23ECE7DF' stroke-width='2.4'/%3E%3Crect x='19' y='20' width='26' height='3.6' fill='%23ECE7DF'/%3E%3Crect x='19' y='30.2' width='16' height='3.6' fill='%23C2A06B'/%3E%3Crect x='19' y='40.4' width='26' height='3.6' fill='%23ECE7DF'/%3E%3C/svg%3E");
  background-size:contain;background-repeat:no-repeat;background-position:center;
}
.header-navigation .menu-item > a,
.site-header .menu-container > ul > li > a{
  font-family:var(--eb-sans);font-size:14px;letter-spacing:.03em;color:var(--eb-ink-dim) !important;
}
.header-navigation .menu-item > a:hover{color:var(--eb-ink) !important;}

/* ---------- Buttons ----------
   NOTE: Gutenberg block buttons (.wp-block-button) are intentionally NOT forced
   here — their colors are set per-block via the editor so you can change them.
   This only brands theme/plugin buttons (Kadence, forms) that have no block UI. */
.button,
button.button,
input[type="submit"],
.kb-button,
.kt-btn{
  font-family:var(--eb-sans) !important;
  font-weight:500 !important;
  font-size:13px !important;
  letter-spacing:.1em !important;
  text-transform:uppercase !important;
  border-radius:1px !important;
  background:var(--eb-ink) !important;
  color:var(--eb-bg) !important;
  border:1px solid var(--eb-ink) !important;
  padding:15px 30px !important;
  transition:.32s ease !important;
}
.button:hover,
input[type="submit"]:hover,
.kb-button:hover{
  background:var(--eb-brass) !important;border-color:var(--eb-brass) !important;color:#0E0E10 !important;transform:translateY(-2px);
}

/* ---------- Forms (newsletter / Gravity / general inputs) ---------- */
input[type="text"],input[type="email"],input[type="url"],textarea,select{
  background:var(--eb-bg-elev) !important;
  border:1px solid var(--eb-line) !important;
  color:var(--eb-ink) !important;
  border-radius:1px !important;
  font-family:var(--eb-sans) !important;
}
input::placeholder,textarea::placeholder{color:var(--eb-ink-faint) !important;}
input:focus,textarea:focus{border-color:var(--eb-brass) !important;outline:none !important;}

/* ---------- Hairline rules & misc ---------- */
hr,.entry-content hr{border:none;border-top:1px solid var(--eb-line);}
blockquote{
  border-left:2px solid var(--eb-brass);padding-left:24px;margin-left:0;
  font-family:var(--eb-display);font-style:italic;font-size:1.35rem;color:var(--eb-ink);
}
.eb-eyebrow{font-family:var(--eb-sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--eb-brass);font-weight:600;}

/* ---------- Full-bleed safety net for the block homepage ----------
   Guarantees the alignfull section bands span the full viewport width even on
   Kadence's default page template. */
.entry-content > .alignfull,
.content-container .alignfull,
.single-content .alignfull,
.entry-content-wrap .alignfull{
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  max-width:100vw !important;
  width:auto;
}
/* Remove the theme's content padding so bands truly touch the edges */
body.page .entry-content{padding-left:0;padding-right:0;}

/* ---------- Homepage: hide Kadence's auto page-title hero ----------
   The Hero block IS the intro, so suppress the theme's "Home" title banner. */
.home .entry-hero,
.home .entry-hero-container,
.home .kadence-breadcrumbs,
.home .home-page-title,
.home header.entry-header,
.home .entry-header.title-above-container{display:none !important;}
.home .content-container,
.home .entry-content-wrap{padding-top:0 !important;margin-top:0 !important;}

/* Header site-title legibility (use the logo for full brand effect) */
.site-branding .site-title a,
.site-title a{color:var(--eb-ink) !important;}
.site-branding .site-title a:hover,
.site-title a:hover{color:var(--eb-brass) !important;}

/* =================================================================
   v2.3 — VISIBILITY FIXES
   ================================================================= */

/* 1) Headlines: guarantee bone by default so nothing renders dark-on-dark.
      Scoped with :not(.has-text-color) so the moment YOU pick a color on a
      heading block in the editor, your choice wins — editability preserved. */
.home .entry-content h1:not(.has-text-color),
.home .entry-content h2:not(.has-text-color),
.home .entry-content h3:not(.has-text-color),
.home .entry-content h4:not(.has-text-color),
.eb-hero h1:not(.has-text-color),
.eb-band h2:not(.has-text-color),
.eb-band h4:not(.has-text-color),
.eb-news h2:not(.has-text-color),
.eb-sig-band h3:not(.has-text-color),
.eb-pillar h3:not(.has-text-color),
.eb-cover .eb-ctitle:not(.has-text-color),
.eb-essay h4:not(.has-text-color){
  color:var(--eb-ink) !important;
}
/* Brass accent on emphasized words inside headings stays brass */
.entry-content :where(h1,h2,h3,h4) em{color:var(--eb-brass) !important;font-style:italic;}

/* 2) Header site title: bone, never black-on-black. The brass "J" is applied
      by a tiny script (see functions.php) that wraps the standalone J. */
.site-branding .site-title a,
.site-title a,
.site-title{color:var(--eb-ink) !important;}
.site-title a:hover{color:var(--eb-brass) !important;}
.eb-name-j{color:var(--eb-brass) !important;}