/*
Theme Name: Threwline (Twenty Twenty-Five child)
Theme URI: https://threwline.com
Description: THREWLINE brand child theme for Twenty Twenty-Five — tokens, header/footer parts, and component classes from the Threwline visual brand kit v1.
Author: THREWLINE
Template: twentytwentyfive
Version: 1.2.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: threwline
*/

/* ============================================================
   Component classes — apply via each block's
   "Advanced → Additional CSS class(es)" field, or use the
   bundled patterns which reference them already.
   All colors reference the theme.json palette variables.
   ============================================================ */

/* --- Eyebrow label: apply .tl-eyebrow to a Paragraph --- */
.tl-eyebrow{
  font-family:var(--wp--preset--font-family--pjs);
  font-weight:600;font-size:13px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--wp--preset--color--deep-terracotta);
}

/* --- Serif tagline / editorial line: .tl-serif on a Paragraph --- */
.tl-serif{
  font-family:var(--wp--preset--font-family--newsreader);
  font-style:italic;color:var(--wp--preset--color--thread-green);
}

/* --- Lede: .tl-lede on the paragraph under an H1/H2 --- */
.tl-lede{font-size:19px;color:var(--wp--preset--color--muted-ink);}

/* --- Card: .tl-card on a Group block --- */
.tl-card{
  background:var(--wp--preset--color--cream);
  border:1px solid var(--wp--preset--color--border);
  border-radius:8px;padding:30px !important;
}
.tl-card p{font-size:15.5px;color:var(--wp--preset--color--muted-ink);}

/* --- Pull quote: .tl-quote on a Group containing a Paragraph --- */
.tl-quote{
  background:var(--wp--preset--color--sage-wash);
  border-radius:8px;padding:32px 36px !important;position:relative;
}
.tl-quote::before{
  content:"";position:absolute;left:0;top:26px;bottom:26px;width:2px;
  background:var(--wp--preset--color--terracotta);border-radius:2px;
}
.tl-quote p{
  font-family:var(--wp--preset--font-family--newsreader);
  font-style:italic;font-size:23px;line-height:1.45;
  color:var(--wp--preset--color--ink);
}

/* --- Ink CTA band: .tl-band on a full-width Group --- */
.tl-band{background:var(--wp--preset--color--ink);color:#EDF2EE;}
.tl-band h2,.tl-band h3{color:var(--wp--preset--color--cream);}
.tl-band p{color:#B8C8C3;}

/* --- Tag / chip: .tl-tag on a Paragraph or inline --- */
.tl-tag{
  display:inline-block;font-family:var(--wp--preset--font-family--pjs);
  font-weight:600;font-size:12px;letter-spacing:.08em;
  color:var(--wp--preset--color--deep-green);
  background:var(--wp--preset--color--sage-wash);
  border-radius:20px;padding:5px 13px;margin:0 6px 6px 0;
}

/* --- Check / cross lists: .tl-check or .tl-cross on a List block --- */
ul.tl-check{list-style:none;padding-left:0;}
ul.tl-check li{padding-left:30px;position:relative;margin-top:.5em;}
ul.tl-check li::before{
  content:"\2713";position:absolute;left:2px;
  color:var(--wp--preset--color--thread-green);
  font-family:var(--wp--preset--font-family--pjs);font-weight:700;
}
ul.tl-cross{list-style:none;padding-left:0;}
ul.tl-cross li{padding-left:30px;position:relative;margin-top:.5em;}
ul.tl-cross li::before{
  content:"\2715";position:absolute;left:4px;top:3px;font-size:14px;
  color:var(--wp--preset--color--deep-terracotta);
  font-family:var(--wp--preset--font-family--pjs);font-weight:700;
}

/* --- TL;DR + TOC boxes (blog posts): .tl-tldr / .tl-toc on a Group --- */
.tl-tldr{
  background:var(--wp--preset--color--sand-wash);
  border:1px solid var(--wp--preset--color--border);
  border-radius:8px;padding:24px 28px !important;
}
.tl-toc{
  background:var(--wp--preset--color--sage-wash);
  border-radius:8px;padding:24px 28px !important;
}
.tl-tldr h4,.tl-toc h4{
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;
}
.tl-tldr h4{color:var(--wp--preset--color--deep-terracotta);}
.tl-toc h4{color:var(--wp--preset--color--deep-green);}
.tl-toc a{color:var(--wp--preset--color--ink);text-decoration:none;}
.tl-toc a:hover{color:var(--wp--preset--color--deep-green);}

/* --- Thread divider: .tl-thread on a Separator block --- */
hr.tl-thread{
  border:none;height:2px;max-width:100%;
  background:var(--wp--preset--color--sage);opacity:1;position:relative;
}
hr.tl-thread::after{
  content:"";position:absolute;right:-2px;top:50%;transform:translateY(-50%);
  width:9px;height:9px;border-radius:50%;
  background:var(--wp--preset--color--terracotta);
}

/* --- Subtle depth textures — over color washes ONLY, one per page --- */
.tl-tex-linen{
  background-image:
    repeating-linear-gradient(0deg, rgba(42,66,69,0.018), rgba(42,66,69,0.018) 1px, transparent 1px, transparent 5px),
    repeating-linear-gradient(90deg, rgba(42,66,69,0.018), rgba(42,66,69,0.018) 1px, transparent 1px, transparent 5px);
}
.tl-tex-weave{
  background-image:repeating-linear-gradient(45deg, rgba(144,182,169,0.06), rgba(144,182,169,0.06) 1px, transparent 1px, transparent 10px);
}

/* --- Secondary + ghost buttons: add class to the Button block --- */
.tl-btn-secondary .wp-block-button__link{background:var(--wp--preset--color--thread-green);}
.tl-btn-ghost .wp-block-button__link{
  background:transparent;color:var(--wp--preset--color--deep-green);
  border:1.5px solid var(--wp--preset--color--thread-green);
}
.tl-btn-ghost .wp-block-button__link:hover{background:var(--wp--preset--color--sage-wash);}

/* --- Body emphasis rule: medium weight, never bold --- */
.entry-content strong{font-weight:500;color:var(--wp--preset--color--ink);}

/* ============================================================
   Splash / blank template — the frame does the work now.
   No !important overrides needed: templates/blank.html uses a
   flow (unconstrained, unpadded) layout, so content is free to
   go edge to edge on its own.
   ============================================================ */
.tl-blank { min-height: 100vh; min-height: 100svh; }
.tl-blank > * { max-width: none; }

/* Blog post meta row */
.tl-postmeta {
  gap: 14px;
  color: var(--wp--preset--color--muted-ink);
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-bottom: 14px;
  margin-bottom: 28px;
}
.tl-postmeta a { text-decoration: none; }

/* ============================================================
   Header rhythm + readable measure (mockup parity)
   Mockup: .nav { padding:24px 0 }  .lede { max-width:56ch }
   ============================================================ */
.tl-header { padding-top: 24px; padding-bottom: 24px; }

/* Content is now 1120px wide, so running text needs its own
   measure or lines get too long to read comfortably. */
.tl-lede { max-width: 56ch; }