/*
Theme Name:   Tiara Mejos
Theme URI:    https://tiaramejos.online/
Description:  Child theme of Kadence for tiaramejos.online. Carries the design system lifted verbatim from the approved mockups: hairline dividers only, generous whitespace, no card shadows, no gradients, no icons, teal reserved for links, section labels and small accents.
Author:       Tiara Mejos
Template:     kadence
Version:      1.2.0
Text Domain:  tiaramejos
License:      GNU General Public License v2 or later
*/

/* NOTE: everything below this line is generated from theme/custom.css in the build kit.
   Edit theme/custom.css and re-run the concatenation — do not hand-edit this file. */

/* ------------------------------------------------------------------
   tiaramejos.online — custom CSS layer
   Paste into Appearance > Customize > Additional CSS, or better, drop into
   the child theme's style.css. Every rule below is lifted from the approved
   mockups; nothing here is invented.

   Design rules this file enforces:
   hairline dividers only · generous whitespace · NO card shadows · NO gradients
   · NO icons · teal reserved for links, section labels and small accents.
   ------------------------------------------------------------------ */

:root{
  --bg:#ffffff;
  --ink:#16211f;
  --gray:#5f6b69;
  --teal:#0e7570;
  --teal-dark:#0a5955;
  --hairline:#e6eae9;
  --placeholder:#f2f4f4;
}

html{ scroll-behavior:smooth; }
body{ -webkit-font-smoothing:antialiased; }
::selection{ background:#d7ecea; }

/* Kill anything the parent theme adds that the design forbids */
.wp-block-group, .wp-block-columns, .wp-block-column, .wp-block-image figure{
  box-shadow:none !important;
  border-radius:0 !important;
}

/* ---------- shared type utilities ---------- */
.kicker,
.label,
.next-label{
  font-size:.78rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal);
}
.label{ margin-bottom:26px; }
.kicker{ margin-bottom:16px; }
.role{                       /* home hero role line */
  font-size:.82rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--teal);
  margin-bottom:18px;
}
.dek{
  color:var(--gray);
  margin-top:16px;
  max-width:56ch;
  font-size:1.08rem;
}
.hero-sub{
  color:var(--gray);
  margin-top:22px;
  max-width:56ch;
  font-size:1.05rem;
}
.pull{
  font-size:1.3rem;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
  max-width:52ch;
  padding-left:22px;
  border-left:2px solid var(--teal);
}
/* The mockups carry two inline spacing variants on .pull. Reproduced here as
   sibling rules so the block markup stays free of inline styles:
     style="margin-top:28px"    — a pull that follows a paragraph (sentro, retailer, distributor)
     style="margin-bottom:40px" — a pull that introduces a gallery (balerfornia, flexfit)
   Kahana's pull has neither: it sits directly under the label, above the stat row. */
p + .pull{ margin-top:28px; }
.pull + .gallery{ margin-top:40px; }

/* ---------- section rhythm (replaces the mockup's <section> rule) ---------- */
.cs-section{
  padding:64px 0;
  border-top:1px solid var(--hairline);
  margin-top:64px;
}
.home-section{
  padding:72px 0;
  border-top:1px solid var(--hairline);
  margin-top:72px;
}
.cs-section > p,
.home-section > p{
  color:var(--gray);
  margin-bottom:18px;
  max-width:62ch;
}
.cs-section > p:last-child,
.home-section > p:last-child{ margin-bottom:0; }
.cs-section strong,
.home-section strong{ color:var(--ink); font-weight:600; }
.cs-section .pull,
.home-section .pull{ color:var(--ink); }

/* ---------- case-study header ---------- */
.cs-header{ padding:60px 0 0; }
.meta-row{
  display:flex;
  gap:32px;
  flex-wrap:wrap;
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--hairline);
}
.meta-item{
  font-size:.82rem;
  color:var(--gray);
  margin:0;
  max-width:none;
}
.meta-item strong{
  display:block;
  color:var(--ink);
  font-size:.95rem;
  font-weight:600;
  margin-bottom:3px;
}
.meta-item a{ color:var(--teal); }

/* ---------- case-study hero image ---------- */
.hero-img figure,
.hero-img{ margin-top:44px; }
.hero-img img{
  aspect-ratio:16/9;
  width:100%;
  height:100%;
  object-fit:cover;
  background:var(--placeholder);
}

/* ---------- stat row (Kahana) ---------- */
.stat-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);   /* mockup verbatim */
  gap:24px;
  margin-top:40px;
}
.stat .n{
  font-size:2rem;
  font-weight:600;
  letter-spacing:-.02em;
  color:var(--teal-dark);
  margin:0;
}
.stat .l{
  font-size:.82rem;
  color:var(--gray);
  margin-top:4px;
  max-width:20ch;
}
@media(max-width:760px){
  .stat-row{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- .module (Sentro HQ) and .strand (retailer) ----------
   Identical rules in both source mockups; kept as one block rather than duplicated. */
.module,
.strand{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:12px 40px;
  padding:26px 0;
  border-bottom:1px solid var(--hairline);
}
.module:last-of-type,
.strand:last-of-type{ border-bottom:none; }
.module h3,
.strand h3{ font-size:1rem; font-weight:600; margin:0; }
.module p,
.strand p{ color:var(--gray); font-size:.95rem; max-width:58ch; margin:0; }
@media(max-width:600px){
  .module, .strand{ grid-template-columns:1fr; gap:4px; }
}

/* ---------- .lcp ----------
   Marker class only, on the home hero strip's first image. It carries no styling by design:
   its job is to be a grep-able hook so the preload in FONT_NOTES/PUSH_PLAN can be matched to
   the right image, and so a future audit can tell at a glance which image is the LCP candidate.
   Do not delete it thinking it is dead CSS. */

/* ---------- search table (Kahana) ---------- */
.search-table table{ width:100%; border-collapse:collapse; margin-top:8px; }
.search-table td{
  padding:12px 0;
  border-bottom:1px solid var(--hairline);
  border-left:0; border-right:0; border-top:0;
  font-size:.95rem;
}
.search-table td:first-child{ color:var(--ink); }
.search-table td:last-child{ color:var(--gray); text-align:right; white-space:nowrap; }

/* ---------- galleries ---------- */
.gallery{
  display:grid;
  grid-template-columns:1.3fr 1fr;        /* mockup verbatim */
  gap:16px;
}
.gallery img{
  width:100%; height:100%;
  object-fit:cover;
  background:var(--placeholder);
}
.gallery > .wp-block-column:first-child img{ aspect-ratio:4/5; }
.gallery .stack{ display:grid; gap:16px; }
.gallery .stack img{ aspect-ratio:16/10; }
@media(max-width:700px){
  .gallery{ grid-template-columns:1fr; }
}

/* ---------- home: hero strip ----------
   The mockup uses `grid-template-columns:1.2fr .8fr 1fr .9fr`. core/columns is flexbox, and
   flex-basis percentages cannot reproduce fr ratios once the gap is subtracted. So the columns
   container is switched to grid here and given the mockup's own track list verbatim — exact
   rather than approximate, and it drops all the !important overrides flex would have needed. */
.strip{
  display:grid;
  grid-template-columns:1.2fr .8fr 1fr .9fr;
  gap:14px;
  margin-bottom:8px;
  align-items:stretch;
}
.strip img{
  width:100%; height:100%;
  object-fit:cover;
  aspect-ratio:4/5;
  background:var(--placeholder);
  transition:transform .5s ease;
}
.strip > .wp-block-column:nth-child(2) img{ aspect-ratio:3/4; }
.strip figure{ overflow:hidden; margin:0; }
.strip figure:hover img{ transform:scale(1.03); }
@media(max-width:700px){
  .strip{ grid-template-columns:1fr 1fr; }   /* matches the mockup's own 700px breakpoint */
}
.strip-caption{
  margin:14px 0 0;
  font-size:.85rem;
  color:var(--gray);
}

/* ---------- home: selected work cards ---------- */
.work-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);    /* mockup verbatim */
  gap:28px;
}
.wcard figure{ overflow:hidden; margin:0 0 14px; }
.wcard img{
  aspect-ratio:4/3;
  width:100%;
  object-fit:cover;
  background:var(--placeholder);
  transition:transform .5s ease;
}
.wcard:hover img{ transform:scale(1.03); }
.wcard h3{ font-size:1rem; font-weight:600; margin:0; transition:color .15s; }
.wcard h3 a{ color:var(--ink); }
.wcard:hover h3 a{ color:var(--teal); }
.wcard .wtype{ font-size:.85rem; color:var(--gray); margin-top:2px; }
.wcard .wnote{ font-size:.92rem; color:var(--gray); margin-top:10px; line-height:1.6; max-width:none; }
@media(max-width:760px){
  .work-grid{ grid-template-columns:1fr; }
}

/* ---------- home: work list ---------- */
.work-list{ margin-top:48px; border-top:1px solid var(--hairline); }
.work-item{ padding:24px 0; border-bottom:1px solid var(--hairline); }
.work-top{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
}
.work-top h3{ font-size:1.02rem; font-weight:600; margin:0; transition:color .15s; }
.work-top h3 a{ color:var(--ink); }
.work-item:hover .work-top h3 a{ color:var(--teal); }
.work-type{ font-size:.82rem; color:var(--gray); white-space:nowrap; margin:0; }
.work-item > p{ color:var(--gray); font-size:.95rem; margin-top:6px; max-width:62ch; }

/* ---------- home: services ---------- */
.svc{
  display:grid;
  grid-template-columns:240px 1fr;
  gap:12px 40px;
  padding:22px 0;
  border-bottom:1px solid var(--hairline);
}
.svc:last-of-type{ border-bottom:none; }
.svc h3{ font-size:1rem; font-weight:600; margin:0; }
.svc p{ color:var(--gray); font-size:.95rem; max-width:60ch; margin:0; }
@media(max-width:600px){ .svc{ grid-template-columns:1fr; gap:4px; } }

/* ---------- home: journal ---------- */
.post{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:20px;
  padding:16px 0;
  border-bottom:1px solid var(--hairline);
}
.post:last-of-type{ border-bottom:none; }
.post h3{ font-size:1rem; font-weight:500; margin:0; transition:color .15s; }
.post h3 a{ color:var(--ink); }
.post:hover h3 a{ color:var(--teal); }
.post .cat{
  font-size:.78rem;
  color:var(--teal);
  display:block;
  margin-bottom:2px;
  font-weight:600;
}
.post .post-date{ font-size:.85rem; color:var(--gray); white-space:nowrap; margin:0; }
.all-link{
  display:inline-block;
  margin-top:26px;
  font-size:.92rem;
  color:var(--teal);
  font-weight:500;
}
.all-link:hover{ color:var(--teal-dark); }

/* ---------- home: contact ---------- */
.contact-intro{ color:var(--gray); max-width:56ch; margin-bottom:26px; }
.email-link a{
  font-size:1.15rem;
  font-weight:600;
  color:var(--teal);
  border-bottom:2px solid #cde5e3;
  padding-bottom:2px;
}
.email-link a:hover{ border-color:var(--teal); }

/* ---------- next chain ---------- */
.next-chain{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  padding:30px 0;
  flex-direction:column;
  align-items:flex-start;
}
.next-chain .next-label{
  font-size:.8rem;
  color:var(--gray);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin:0;
}
.next-chain .next-title{ font-size:1.15rem; font-weight:600; margin-top:6px; }
.next-chain .next-title a{ color:var(--ink); }
.next-chain:hover .next-title a{ color:var(--teal); }

/* ---------- header / hero (home) ---------- */
.home-hero{ padding:90px 0 70px; }
.home-hero h1{ max-width:24ch; }

/* ---------- nav + footer (theme-level, for reference) ---------- */
.site-header .nav-links a{ font-size:.92rem; color:var(--gray); }
.site-header .nav-links a:hover{ color:var(--teal); }
.site-footer{
  border-top:1px solid var(--hairline);
  padding:30px 0 44px;
  font-size:.85rem;
  color:var(--gray);
  margin-top:72px;
}

/* ---------- performance guard ----------
   The design has no animation beyond two 1.03 scale hovers. Honour reduced motion. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .strip img, .wcard img{ transition:none; }
  .strip figure:hover img, .wcard:hover img{ transform:none; }
}

/* ==================================================================
   LIVE-RENDER CORRECTIONS — added 2026-08-01 after the first real
   preview on Kadence. Everything above this line was written offline
   against the mockups and was never rendered; these rules are the
   corrections that first render made necessary. Nothing here changes
   the design — it makes the design above actually win.

   Each block says what it fixes and what it was losing to.
   ================================================================== */

/* ---- 1. Instrument Sans was never actually applied ----------------
   theme.json declares the family and the four self-hosted faces, and
   WordPress registers them — but WP emits its body typography as
   `:root :where(body)`, which has almost no specificity, and Kadence's
   own `body{font-family:...}` beat it. The faces were registered and
   never requested: document.fonts reported all four "unloaded" and the
   whole site rendered in -apple-system.
   Kadence's stylesheet loads before this one, so a plain selector at
   equal specificity is enough — no !important needed.               */
body,
button,
input,
select,
optgroup,
textarea,
h1, h2, h3, h4, h5, h6,
.site-title,
.entry-content,
.wp-block-heading,
.site-header,
.main-navigation,
.site-footer{
  font-family:'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---- 2. white background ------------------------------------------
   Kadence's default page background is #f7fafc. The design is white.  */
html,
body,
.site,
.content-area,
.site-container,
.content-container,
.entry-content{
  background-color:var(--bg);
}

/* ---- 3. the core/columns -> CSS grid overrides were losing ---------
   README predicted this exactly. WordPress gives every core/columns
   block a generated layout class (`.wp-block-columns-is-layout-flex`,
   or `-is-layout-constrained`) whose `display` rule is emitted inline
   in <head>, and at equal specificity that inline block can win.
   `.work-grid` was computing `display:flex` while `.strip` happened to
   win — the same markup behaving two different ways, which is the
   giveaway. The fix is the more specific selector the README called
   for, not a different layout: the track lists below are unchanged
   from the mockups.                                                   */
.entry-content .wp-block-columns.strip,
.entry-content .wp-block-columns.work-grid,
.entry-content .wp-block-columns.gallery,
.entry-content .wp-block-columns.stat-row{
  display:grid;
  align-items:start;
}
.entry-content .wp-block-columns.strip{        grid-template-columns:1.2fr .8fr 1fr .9fr; }
.entry-content .wp-block-columns.work-grid{    grid-template-columns:repeat(3,1fr); }
.entry-content .wp-block-columns.gallery{      grid-template-columns:1.3fr 1fr; }
.entry-content .wp-block-columns.stat-row{     grid-template-columns:repeat(4,1fr); }

/* core/column sets its own flex-basis; inside a grid that fights the
   track list, so hand the sizing back to the grid. */
.entry-content .wp-block-columns.strip     > .wp-block-column,
.entry-content .wp-block-columns.work-grid > .wp-block-column,
.entry-content .wp-block-columns.gallery   > .wp-block-column,
.entry-content .wp-block-columns.stat-row  > .wp-block-column{
  flex-basis:auto !important;
  min-width:0;
}

@media(max-width:760px){
  .entry-content .wp-block-columns.work-grid{ grid-template-columns:1fr; }
  .entry-content .wp-block-columns.stat-row{  grid-template-columns:repeat(2,1fr); }
}
@media(max-width:700px){
  .entry-content .wp-block-columns.strip{   grid-template-columns:1fr 1fr; }
  .entry-content .wp-block-columns.gallery{ grid-template-columns:1fr; }
}

/* ---- 4. Kadence's own content padding ------------------------------
   The design's whitespace comes from the section rules above; Kadence
   adds a second layer of vertical padding on top of it.               */
.content-area{ padding-top:0; }

/* ---- 5. base type and bare headings ------------------------------
   custom.css already carries an explicit size for every *classed*
   element (.dek, .pull, .stat .n, .label, .hero-sub ...). The bare
   h1/h2/h3 and the body base were the only things left to theme.json's
   `styles.elements`, and those lose to Kadence for the same
   low-specificity reason as the font family did — h1 was rendering at
   Kadence's 2rem/700 instead of the design's clamp/600.

   Values below are lifted verbatim from the mockups' own <style>
   blocks, not re-derived:
     home        h1{font-size:clamp(1.9rem,4.5vw,2.6rem);...;max-width:24ch}
     case study  h1{font-size:clamp(2rem,5vw,3rem);...}
     both        body{font-size:16px;line-height:1.65}
     both        h3{font-size:1rem;font-weight:600}                   */
body{
  font-size:16px;
  line-height:1.65;
  color:var(--ink);
}

.entry-content h1,
h1.wp-block-heading{
  font-size:clamp(1.9rem, 4.5vw, 2.6rem);
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.25;
}

/* Case studies use the larger display size. */
.single-case_study .entry-content h1,
.single-case_study h1.wp-block-heading{
  font-size:clamp(2rem, 5vw, 3rem);
}

.entry-content h2,
h2.wp-block-heading{
  font-size:1.08rem;
  font-weight:600;
  letter-spacing:-.01em;
}

.entry-content h3,
h3.wp-block-heading{
  font-size:1rem;
  font-weight:600;
}

/* ---- 6. WordPress was centring the narrow hero elements ------------
   `layout:{"type":"constrained"}` makes WordPress emit
   `.wp-container-x > * { max-width:<content>; margin-left:auto; margin-right:auto }`
   for every direct child of a constrained group. Children that fill the
   content width look unaffected, but any child carrying its OWN narrower
   max-width from this stylesheet (.hero-sub at 56ch, .label, .dek, .pull)
   was being centred inside the column.

   The mockups centre nothing: grepped all three sources for
   `text-align:center` — zero hits — and every `margin:0 auto` in them
   belongs to `.wrap`, the 1000px page container itself. So the design is
   left-aligned throughout and the auto margin is simply wrong here.

   `!important` is deliberate and unavoidable: WordPress ships that layout
   rule AS `margin-left:auto !important`, inside a `:where()` that gives it
   zero specificity. Confirmed in the live browser —
   `rule.style.getPropertyPriority('margin-left')` returns "important" — so
   the more specific selector alone lost. This is the one place in this
   stylesheet that needs it.                                             */
.entry-content .home-hero > *,
.entry-content .home-section > *,
.entry-content .cs-section > *,
.entry-content .cs-section > .wp-block-group > *{
  margin-left:0 !important;
  margin-right:auto !important;
}

/* ---- 7. whole-card tap targets (stretched link) --------------------
   Measured at 375px BEFORE this rule: the only clickable thing in each
   work card was its title link — 99x20, 83x20, 106x20 on the grid cards
   and 61x20 to 153x44 on the list rows, i.e. **1.1%-7.3% of the card's
   own area**. A hit-test at the centre of the card image, over the body
   copy, and in the bottom-right gap returned the image/paragraph on all
   7 cards and the anchor on none of them.

   The mockups made each card a single <a class="wcard">. Gutenberg
   cannot wrap a core/column in an anchor, so the conversion put the link
   on the card's <h3>. This restores the mockup's behaviour in CSS only —
   no block markup changes, so copy fidelity is untouched and no page
   needed re-pushing for it.

   WHY THE TEXT BLOCKS ARE RAISED ABOVE THE OVERLAY
   A bare stretched link covers the whole card, and the pseudo-element
   then swallows pointer events over the body copy — which is exactly
   what makes text unselectable (a drag starts a link-drag instead of a
   selection). Verified, not assumed: with the overlay unraised, a
   hit-test over the description returned the anchor. So the description
   paragraph is given `position:relative; z-index:2` and sits ABOVE the
   overlay: it stays selectable. Everything else — the image, the title,
   the small type label, and all the whitespace — sits under the overlay
   and is clickable. That keeps both constraints instead of trading one
   away.

   Focus: the ring is drawn on the anchor's own box, not on the
   pseudo-element, so keyboard focus stays a normal ring around the title
   rather than a 500px-tall rectangle. Nothing here sets `outline:none`. */
.wcard,
.work-item{
  position:relative;
}

.wcard h3 a::after,
.work-item h3 a::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
}

/* The description copy stays above the overlay so it can still be selected. */
.wcard .wnote,
.work-item > p{
  position:relative;
  z-index:2;
}

/* The pointer should read as "this whole card is a link". */
.wcard,
.work-item{
  cursor:pointer;
}
.wcard .wnote,
.work-item > p{
  cursor:auto;
}

/* ---- 8. journal posts, and a stat-row bug they exposed -------------
   New in the v2 source revision. Four classes arrive with the journal
   posts that this stylesheet had never seen: .post-meta, .caption,
   .placeholder, and a narrower .hero-img. Values below are lifted from
   the journal sources' own <style> blocks, not re-invented.          */

/* --- 8a. THE BUG. `.stat-row` was hard-coded to four tracks.
   Found by rendering, not by reading: work/storihq has THREE stats and
   was being laid out in a 4-track grid, leaving a 220px empty column on
   the right. Measured live — `gridTemplateColumns: "220px 220px 220px
   220px"` against `childCount: 3`. That pre-dates the journal work; the
   session that added the grid override only ever measured a 4-stat row.
   The journal posts have 3-stat rows too, which is what surfaced it.

   `grid-auto-flow:column` + `grid-auto-columns:1fr` yields exactly N
   equal tracks for any N, so 3-stat and 4-stat rows are both correct
   without counting children in CSS.                                   */
.entry-content .wp-block-columns.stat-row{
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  grid-template-columns:none;
}
@media(max-width:760px){
  .entry-content .wp-block-columns.stat-row{
    grid-auto-flow:row;
    grid-auto-columns:auto;
    grid-template-columns:repeat(2,1fr);
  }
  /* Journal posts stack fully at mobile, as their own source specifies
     (`.stat-row{grid-template-columns:1fr}`), rather than 2-up. With
     three stats, 2-up would leave an orphan. */
  .single-post .entry-content .wp-block-columns.stat-row{
    grid-template-columns:1fr;
  }
}

/* --- 8b. the date / read-time line under a journal h1.
   The journal sources style this as `.meta-row`, but that class already
   means label/value pairs on the case studies, so the block markup uses
   `.post-meta` and the rule is reproduced here. */
.post-meta{
  margin-top:24px;
  padding-top:22px;
  border-top:1px solid var(--hairline);
  font-size:.85rem;
  color:var(--gray);
}

/* --- 8c. figure caption under a journal hero image. */
.caption{
  font-size:.82rem;
  color:var(--gray);
  margin-top:10px;
}

/* --- 8d. the note-to-self block. Only ever appears in an UNPUBLISHED
   draft; styled so that if Tiara previews it, it reads as a placeholder
   rather than as body copy. */
.placeholder{
  color:var(--gray);
  font-size:.9rem;
  text-align:center;
  padding:28px 30px;
  background:var(--placeholder);
}

/* --- 8e. a journal hero image is narrower and 16:10, not the case
   study's full-width 16:9. */
.single-post .hero-img{
  max-width:760px;
  margin:40px 0 0;
}
.single-post .hero-img img{
  aspect-ratio:16/10;
}