/*
Theme Name:   Everythx
Theme URI:    https://everythx.com
Description:  Astra child theme for everythx.com. Card-grid archive, category
              pill filter, image-free CSS thumbnails, and an author box built for E-E-A-T.
              Brand tokens live in the :root block below - see BLOG-REDESIGN.md section 5.
Author:       Everythx
Template:     astra
Version:      1.1.0
Text Domain:  everythx
*/

/* ==========================================================================
   1. BRAND TOKENS — edit colours here and nowhere else.
   Every colour on the blog resolves from this block.
   ========================================================================== */

:root{
  --esu-blue:#135bec;        /* Primary. Links, active pill, footer, buttons.   */
  --esu-blue-dark:#0d47a1;   /* Hover states.                                   */
  --esu-blue-tint:#ecf3ff;   /* Tinted bands, avatar backgrounds.               */
  --esu-amber:#F59E0B;       /* RESERVED: app-download CTAs ONLY. Never emphasis.*/
  --esu-ink:#101622;         /* Dark nav bar, app CTA card.                     */
  --esu-ground:#f6f6f8;      /* Page background.                                */
  --esu-surface:#ffffff;     /* Card background.                               */
  --esu-text:#111827;        /* Headings and body.                             */
  --esu-muted:#6b7280;       /* Captions, metadata, timestamps.                */
  --esu-line:#e3e6ee;        /* Borders and rules.                             */

  --esu-display:Poppins,-apple-system,"Segoe UI",sans-serif;
  --esu-body:Inter,-apple-system,"Segoe UI",sans-serif;
  --esu-mono:"JetBrains Mono",ui-monospace,monospace;
}

/* ==========================================================================
   2. LAYOUT RESET — let the archive templates run full width inside Astra.
   ========================================================================== */

/* Astra prints its dynamic CSS INLINE, after this stylesheet loads, and caps
   .ast-container at 950px. These are the only !important rules in the file;
   without them the grid renders 910px wide inside a 1200px wrapper. */
body.blog .ast-container,
body.archive .ast-container,
body.single .ast-container{
  max-width:100% !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* post_class() adds Astra's article classes to our cards, which carry 20px of
   padding. That inset the thumbnail instead of letting it bleed to the edges. */
article.esu-card{padding:0 !important}

.blog #content,
.archive #content,
.single #content{background:var(--esu-ground)}

.esu-wrap{width:min(1200px,calc(100% - 40px));margin-inline:auto}

.esu-main{font-family:var(--esu-body);color:var(--esu-text)}
.esu-main h1,.esu-main h2,.esu-main h3{font-family:var(--esu-display);text-wrap:balance;line-height:1.22}

/* ==========================================================================
   3. PROMO BAR — the first of exactly two amber moments.
   ========================================================================== */

.esu-promo{background:var(--esu-blue);color:#fff;font-family:var(--esu-body)}
.esu-promo .esu-wrap{display:flex;align-items:center;justify-content:center;gap:16px;
  flex-wrap:wrap;padding:9px 0;font-size:13.5px;font-weight:500}
.esu-promo strong{font-weight:600}
.esu-promo a{background:var(--esu-amber);color:#1a1205;font-weight:700;font-size:12px;
  letter-spacing:.04em;text-transform:uppercase;padding:6px 14px;border-radius:999px;
  white-space:nowrap;text-decoration:none}

/* ==========================================================================
   3b. DARK NAVIGATION BAR — replaces Astra's header entirely.
   ========================================================================== */

.esu-nav{background:var(--esu-ink);position:sticky;top:0;z-index:50;
  border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--esu-body)}
.esu-nav .esu-wrap{display:flex;align-items:center;gap:28px;height:60px}

.esu-logo{font-family:var(--esu-display);font-weight:700;font-size:17px;
  letter-spacing:-.02em;color:#fff;text-decoration:none;white-space:nowrap}
/* Brand blue is too dark on the ink ground — this is the lifted tint of it. */
.esu-logo span{color:#6c9bff}

.esu-navlinks{display:flex;gap:22px;list-style:none;margin:0;padding:0;flex:1;
  font-size:14px;font-weight:500}
.esu-navlinks li{margin:0}
.esu-navlinks a{color:#cfd6e4;text-decoration:none;padding:4px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.esu-navlinks a:hover{color:#fff;border-bottom-color:var(--esu-amber)}
.esu-navlinks .current-menu-item > a{color:#fff}

.esu-navcta{background:var(--esu-amber);color:#1a1205;font-weight:700;font-size:13px;
  padding:8px 16px;border-radius:8px;white-space:nowrap;text-decoration:none;margin-left:auto}

@media(max-width:900px){
  .esu-navlinks{display:none}
  .esu-nav .esu-wrap{justify-content:space-between;gap:14px}
}

/* Astra's own header is unhooked in functions.php; these belt-and-braces rules
   catch any residual markup a plugin re-injects. */
.ast-above-header,.ast-below-header{display:none}

/* ==========================================================================
   4. ARCHIVE HEADER
   ========================================================================== */

.esu-head{padding:44px 0 8px;text-align:center;background:var(--esu-ground)}
.esu-crumb{font-family:var(--esu-mono);font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--esu-muted);margin-bottom:14px}
.esu-crumb a{color:var(--esu-muted);text-decoration:none}
.esu-crumb a:hover{color:var(--esu-blue)}
.esu-head h1{font-size:clamp(30px,4.4vw,44px);font-weight:700;letter-spacing:-.025em;margin:0}
.esu-head p{max-width:60ch;margin:12px auto 0;color:var(--esu-muted);font-size:16.5px;line-height:1.6}

/* ==========================================================================
   5. CATEGORY PILLS
   ========================================================================== */

.esu-pills{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:26px 0 34px;
  background:var(--esu-ground);list-style:none;margin:0}
.esu-pills li{margin:0}
.esu-pills a{display:inline-block;font-size:13px;font-weight:500;padding:7px 15px;
  border-radius:999px;border:1px solid var(--esu-line);background:var(--esu-surface);
  color:var(--esu-muted);text-decoration:none;transition:border-color .15s,color .15s}
.esu-pills a:hover{border-color:var(--esu-blue);color:var(--esu-blue)}
.esu-pills .is-active a{background:var(--esu-blue);border-color:var(--esu-blue);
  color:#fff;font-weight:600}

/* ==========================================================================
   6. CARD GRID
   ========================================================================== */

.esu-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  padding-bottom:12px;background:var(--esu-ground)}
@media(max-width:980px){.esu-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.esu-grid{grid-template-columns:1fr}}

.esu-card{background:var(--esu-surface);border:1px solid var(--esu-line);border-radius:12px;
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease}
.esu-card:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,22,34,.11)}
@media(prefers-reduced-motion:reduce){
  .esu-card,.esu-card:hover{transition:none;transform:none}
}

/* --- CSS-only branded thumbnail. No image bytes. See BLOG-REDESIGN.md §3.3 --- */
.esu-thumb{position:relative;aspect-ratio:16/10;padding:22px 20px;display:flex;
  flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden;
  text-decoration:none}
/* Full title, clamped by LINE rather than truncated by word count — a word-count
   cut lands mid-phrase ("...A 12-Week Revision") and reads as broken. */
.esu-thumb-title{font-family:var(--esu-display);font-size:19px;font-weight:700;
  letter-spacing:-.02em;line-height:1.24;color:#fff;
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.esu-thumb::after{content:"";position:absolute;right:-46px;top:-46px;width:110px;height:110px;
  background:rgba(255,255,255,.07);transform:rotate(45deg)}
.t-blue{background:linear-gradient(145deg,#1b63f0,#0d47a1)}
.t-ink{background:linear-gradient(145deg,#1d2740,#101622)}
.t-deep{background:linear-gradient(145deg,#0d47a1,#062a63)}
.t-tint{background:linear-gradient(145deg,#dfeaff,#c3d8ff)}
.t-tint .esu-thumb-title{color:#0d2b63}
.t-tint::after{background:rgba(13,43,99,.07)}
.esu-chip{font-family:var(--esu-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  font-weight:500;background:rgba(255,255,255,.16);padding:4px 9px;border-radius:5px;
  align-self:flex-start;color:#fff}
.t-tint .esu-chip{background:rgba(13,43,99,.12);color:#0d2b63}

/* --- card body --- */
.esu-card .esu-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.esu-meta{font-family:var(--esu-mono);font-size:10px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--esu-blue);font-weight:500;display:flex;gap:10px;align-items:center}
.esu-meta a{color:var(--esu-blue);text-decoration:none}
.esu-meta .esu-dot{color:var(--esu-muted);opacity:.5}
.esu-meta .esu-time{color:var(--esu-muted)}
.esu-card .esu-body h2{font-size:17px;font-weight:600;letter-spacing:-.015em;margin:0}
.esu-card .esu-body h2 a{color:var(--esu-text);text-decoration:none}
.esu-card .esu-body h2 a:hover{color:var(--esu-blue)}
.esu-card .esu-body p{margin:0;font-size:14px;color:var(--esu-muted);line-height:1.55}

/* --- byline --- */
.esu-by{display:flex;align-items:center;gap:10px;margin-top:auto;padding-top:14px;
  border-top:1px solid var(--esu-line)}
.esu-av{width:32px;height:32px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--esu-blue-tint);color:var(--esu-blue-dark);font-family:var(--esu-display);
  font-weight:700;font-size:11.5px;overflow:hidden}
.esu-av img{width:100%;height:100%;border-radius:50%;display:block}
/* min-width:0 + ellipsis so a long author name truncates instead of shunting
   the date out of the card. */
.esu-by div{min-width:0;flex:1 1 auto;overflow:hidden}
.esu-by b{display:block;font-size:12.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esu-by small{display:block;font-size:11px;color:var(--esu-muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esu-by time{flex:0 0 auto;margin-left:10px;font-size:11px;color:var(--esu-muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}

/* ==========================================================================
   7. APP CTA CARD — the second and final amber moment.
   ========================================================================== */

.esu-appcta{background:var(--esu-ink);border:1px solid var(--esu-ink);border-radius:12px;
  padding:26px 22px;display:flex;flex-direction:column;gap:12px;justify-content:center;color:#fff}
.esu-appcta .esu-k{font-family:var(--esu-mono);font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--esu-amber)}
.esu-appcta h2{font-size:21px;font-weight:700;letter-spacing:-.02em;margin:0;color:#fff}
.esu-appcta p{margin:0;font-size:13.5px;color:#aeb8cc;line-height:1.55}
/* Two store buttons rather than one generic link, so nobody lands in the
   wrong store. Amber is still reserved for app downloads only. */
.esu-stores{display:flex;gap:8px;margin-top:4px}
.esu-store{flex:1;background:var(--esu-amber);color:#1a1205;font-weight:700;font-size:13.5px;
  padding:11px 10px;border-radius:8px;text-align:center;text-decoration:none}
.esu-store:hover{filter:brightness(1.06)}

/* The community line is deliberately quieter than the store buttons. */
.esu-appcta-alt{display:block;margin-top:10px;text-align:center;font-size:12.5px;
  font-weight:600;color:#aeb8cc;text-decoration:none;border-bottom:1px solid transparent}
.esu-appcta-alt:hover{color:#fff;border-bottom-color:rgba(255,255,255,.35)}

/* ==========================================================================
   8. PAGINATION
   ========================================================================== */

.esu-main .ast-pagination{padding:34px 0 60px;background:var(--esu-ground)}
.esu-main .ast-pagination .page-numbers{font-family:var(--esu-body);font-size:13.5px;
  font-weight:600;color:var(--esu-text);padding:9px 15px;border-radius:8px}
.esu-main .ast-pagination .page-numbers.current{background:var(--esu-blue);color:#fff}

/* ==========================================================================
   9. SINGLE ARTICLE — answer-first, 50–75 character measure.
   ========================================================================== */

.esu-article{background:var(--esu-ground);padding-bottom:60px}
.esu-article .esu-hero{background:var(--esu-surface);border-bottom:1px solid var(--esu-line);
  padding:40px 0 34px;text-align:center}
.esu-article .esu-hero h1{font-size:clamp(28px,4vw,42px);font-weight:700;
  letter-spacing:-.025em;max-width:22ch;margin:0 auto}
.esu-article .esu-standfirst{max-width:62ch;margin:16px auto 0;font-size:18px;
  color:var(--esu-muted);line-height:1.6}

.esu-content{width:min(72ch,calc(100% - 40px));margin:34px auto 0;font-size:17px;line-height:1.75}
.esu-content > h2{font-size:26px;font-weight:600;margin:38px 0 12px;letter-spacing:-.02em}
.esu-content > h3{font-size:20px;font-weight:600;margin:28px 0 10px}
.esu-content p{margin:0 0 18px}
.esu-content a{color:var(--esu-blue);text-decoration:underline;text-underline-offset:2px}
.esu-content img{max-width:100%;height:auto;border-radius:10px}
.esu-content ul,.esu-content ol{margin:0 0 18px;padding-left:22px}
.esu-content li{margin-bottom:7px}
.esu-content blockquote{margin:24px 0;padding:4px 0 4px 20px;
  border-left:3px solid var(--esu-blue);color:var(--esu-text);font-size:18px}
.esu-content table{width:100%;border-collapse:collapse;font-size:15px}
.esu-content .esu-scroll{overflow-x:auto;margin:0 0 18px}
.esu-content th,.esu-content td{border:1px solid var(--esu-line);padding:9px 12px;text-align:left}
.esu-content th{background:var(--esu-blue-tint);font-weight:600}

/* --- standalone pages: About, Contact, Get the App, Community --- */
.esu-page .esu-hero h1{max-width:26ch}
.esu-page .esu-content{padding-bottom:24px}

/* Core button blocks, styled so a page built from plain blocks still looks
   designed. Colours come from each block's own inline style, so page content
   stays portable if the theme is ever replaced. */
.esu-content .wp-block-buttons{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 24px}
.esu-content .wp-block-button__link{display:inline-block;padding:13px 24px;
  font-family:var(--esu-body);font-weight:700;font-size:15px;line-height:1.2;
  text-decoration:none;border-radius:8px;transition:filter .15s}
.esu-content .wp-block-button__link:hover{filter:brightness(1.06);text-decoration:none}

/* Lists and tables on pages get the same rhythm as articles. */
.esu-content > ul,.esu-content > ol{margin-bottom:22px}
.esu-content figure.wp-block-table{margin:0 0 24px;overflow-x:auto}

/* --- author box: carries sameAs. See BLOG-REDESIGN.md §2 --- */
.esu-authorbox{width:min(72ch,calc(100% - 40px));margin:44px auto 0;background:var(--esu-surface);
  border:1px solid var(--esu-line);border-radius:12px;padding:22px;display:flex;gap:16px}
.esu-authorbox .esu-av{width:56px;height:56px;font-size:17px}
.esu-authorbox h2{font-size:17px;font-weight:600;margin:0}
.esu-authorbox .esu-role{font-family:var(--esu-mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--esu-muted);margin:3px 0 8px}
.esu-authorbox p{margin:0;font-size:14.5px;color:var(--esu-muted);line-height:1.6}
.esu-sameas{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap}
.esu-sameas a{font-size:12.5px;font-weight:600;color:var(--esu-blue);text-decoration:none}
.esu-sameas a:hover{text-decoration:underline}

/* ==========================================================================
   10. FOOTER
   ========================================================================== */

.esu-footer{background:var(--esu-blue);color:#fff;padding:44px 0 30px;font-family:var(--esu-body)}
.esu-fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:32px}
@media(max-width:820px){.esu-fgrid{grid-template-columns:1fr 1fr}}
.esu-footer h4{font-size:12px;letter-spacing:.09em;text-transform:uppercase;
  font-family:var(--esu-mono);font-weight:500;color:#c5d8ff;margin:0 0 12px}
.esu-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;
  gap:8px;font-size:13.5px}
.esu-footer ul a{color:#eaf1ff;text-decoration:none}
.esu-footer ul a:hover{text-decoration:underline}
.esu-fbot{margin-top:34px;padding-top:18px;border-top:1px solid rgba(255,255,255,.18);
  font-size:12px;color:#c5d8ff;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}

/* ==========================================================================
   10b. COOKIE CONSENT BANNER (SureCookie)

   The plugin ships a green accent (#377a00) that appears nowhere else on this
   site. This recolours it to brand blue.

   Deliberately NOT changed: all three action buttons keep equal visual weight.
   Making "Accept all" prominent while hiding "Decline" is a dark pattern and
   is non compliant in several jurisdictions. Colour only, no hierarchy change.
   ========================================================================== */

.surecookie-accept-all-btn,
.surecookie-accept-btn,
.surecookie-decline-btn{
  background-color:var(--esu-blue) !important;
  border-color:var(--esu-blue) !important;
  color:#fff !important;
}
.surecookie-accept-all-btn:hover,
.surecookie-accept-btn:hover,
.surecookie-decline-btn:hover{background-color:var(--esu-blue-dark) !important}

.surecookie-preferences-btn{
  border-color:var(--esu-blue) !important;
  color:var(--esu-text) !important;
  background-color:transparent !important;
}
.surecookie-preferences-btn:hover{color:var(--esu-blue) !important}

/* Links and toggles inside the banner and preferences modal. */
.surecookie-banner a,
.surecookie-modal a{color:var(--esu-blue) !important}
.surecookie-banner-heading,
.surecookie-modal-heading{font-family:var(--esu-display) !important}
.surecookie-always-active{color:var(--esu-blue) !important}

/* ==========================================================================
   11. ACCESSIBILITY
   ========================================================================== */

.esu-main a:focus-visible,.esu-promo a:focus-visible,.esu-footer a:focus-visible{
  outline:2px solid var(--esu-amber);outline-offset:3px;border-radius:4px}
.esu-sronly{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   12. ARTICLE COMPONENTS
   Answer box, takeaways, figures, calculator, FAQ, ad slots.
   Every one of these is plain markup and CSS. No JS is required to render
   any of it, and the calculator degrades to a readable table without JS.
   ========================================================================== */

/* The answer-first lead. First thing under the H1, holds the direct answer. */
.esu-answer{background:var(--esu-blue-tint);border-left:4px solid var(--esu-blue);
  padding:16px 18px;margin:0 0 24px;border-radius:0 8px 8px 0}
.esu-answer p{margin:0;font-size:17px;line-height:1.6}
.esu-answer p+p{margin-top:10px}

/* Key takeaways. Scannable summary, sits after the answer. */
.esu-key{background:var(--esu-surface);border:1px solid var(--esu-line);
  border-radius:10px;padding:18px 20px;margin:0 0 26px}
.esu-key h2,.esu-key h3{font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--esu-muted);margin:0 0 12px;font-family:var(--esu-body);font-weight:700}
.esu-key ul{margin:0;padding-left:20px}
.esu-key li{margin:0 0 8px;line-height:1.55}
.esu-key li:last-child{margin-bottom:0}

/* Figure wrapper for inline SVG diagrams. */
.esu-fig{margin:28px 0;padding:0}
.esu-fig svg{display:block;width:100%;height:auto;max-width:100%}
.esu-fig figcaption{font-size:13.5px;color:var(--esu-muted);margin-top:10px;line-height:1.5}

/* Verify-at-source note. Used wherever a figure varies by institution. */
.esu-note{border:1px dashed var(--esu-line);border-radius:8px;padding:14px 16px;
  margin:24px 0;font-size:14.5px;color:var(--esu-muted);line-height:1.6}
.esu-note strong{color:var(--esu-text)}

/* Calculator / interactive block. */
.esu-calc{background:var(--esu-ink);color:#fff;border-radius:12px;padding:22px;margin:28px 0}
.esu-calc h3{color:#fff;margin:0 0 6px;font-size:19px}
.esu-calc .esu-calc-sub{color:#aab6cc;font-size:14px;margin:0 0 18px;line-height:1.5}
.esu-calc label{display:block;font-size:13px;color:#aab6cc;margin:0 0 6px}
.esu-calc-row{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 16px}
.esu-calc-field{flex:1 1 150px;min-width:0}
.esu-calc input,.esu-calc select{width:100%;box-sizing:border-box;padding:10px 12px;
  border-radius:8px;border:1px solid #2b3550;background:#1a2233;
  color:#fff;font-size:15px;font-family:inherit}
.esu-calc input:focus,.esu-calc select:focus{outline:2px solid var(--esu-blue);outline-offset:1px}
.esu-calc-out{background:#1a2233;border-radius:8px;padding:16px 18px;margin-top:4px}
.esu-calc-out .esu-calc-big{font-size:26px;font-weight:700;font-family:var(--esu-display);
  line-height:1.2;margin:0 0 6px}
.esu-calc-out p{margin:0;color:#aab6cc;font-size:14px;line-height:1.55}

/* FAQ block. */
.esu-faqs{margin:36px 0 0;border-top:1px solid var(--esu-line);padding-top:8px}
.esu-faqs details{border-bottom:1px solid var(--esu-line);padding:14px 0}
.esu-faqs summary{cursor:pointer;font-weight:600;font-size:16.5px;line-height:1.5;
  list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}
.esu-faqs summary::-webkit-details-marker{display:none}
.esu-faqs summary::after{content:"+";color:var(--esu-blue);font-size:22px;line-height:1;flex:0 0 auto}
.esu-faqs details[open] summary::after{content:"\2212"}
.esu-faqs details p{margin:10px 0 0;color:#374151;line-height:1.65}

/* Ad slots. Height is reserved so nothing moves when an advert loads. */
.esu-ad{margin:30px 0;text-align:center;min-height:280px;display:flex;align-items:center;
  justify-content:center;flex-direction:column;background:var(--esu-blue-tint);border-radius:10px}
.esu-ad::before{content:"Advertisement";font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--esu-muted);margin-bottom:8px}
.esu-ad-inline{min-height:250px}

@media (max-width:600px){
  .esu-answer p{font-size:16px}
  .esu-calc{padding:18px}
  .esu-calc-out .esu-calc-big{font-size:22px}
}