/*
Theme Name: KYH
Theme URI: https://knowyourhealthcare.com
Author: Aprendio
Description: Block theme for the Know Your Healthcare marketing site and Field notes blog. Extends the design system of the live coverage tool so the site and the product read as one thing. Self-hosted fonts, no framework, no external network calls at runtime.
Version: 1.0.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: Proprietary
Text Domain: kyh
*/

/*
  Almost everything lives in theme.json. This file carries only what theme.json
  cannot express: @font-face, block-style implementations, and a few structural
  rules. Keep it short — if a value can be a token, it belongs in theme.json.
*/

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:"Public Sans";font-weight:400;font-style:normal;font-display:swap;
  src:url("assets/fonts/public-sans-400.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:500;font-style:normal;font-display:swap;
  src:url("assets/fonts/public-sans-500.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:600;font-style:normal;font-display:swap;
  src:url("assets/fonts/public-sans-600.woff2") format("woff2")}
@font-face{font-family:"Public Sans";font-weight:700;font-style:normal;font-display:swap;
  src:url("assets/fonts/public-sans-700.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:400;font-style:normal;font-display:swap;
  src:url("assets/fonts/newsreader-400.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:normal;font-display:swap;
  src:url("assets/fonts/newsreader-500.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:500;font-style:italic;font-display:swap;
  src:url("assets/fonts/newsreader-500-italic.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:600;font-style:normal;font-display:swap;
  src:url("assets/fonts/newsreader-600.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-weight:700;font-style:normal;font-display:swap;
  src:url("assets/fonts/newsreader-700.woff2") format("woff2")}

/* --------------------------------------------------------------- baseline */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

:focus-visible{
  outline:2px solid var(--wp--preset--color--accent);
  outline-offset:2px;
  border-radius:4px;
}

/* Skip link — keyboard users land here first. */
.kyh-skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--wp--preset--color--ink); color:#fff;
  padding:.7rem 1.1rem; border-radius:0 0 6px 0;
  font-family:var(--wp--preset--font-family--sans);
  font-size:.85rem; font-weight:600; text-decoration:none;
}
.kyh-skip:focus{ left:0; }

/* The serif needs a touch of negative tracking at display sizes to stop it
   looking loose; the sans does not. */
h1,h2,h3,.kyh-display{ letter-spacing:-.018em; }
h4,h5,h6{ letter-spacing:-.008em; }

/* <em> inside a display heading is an accent, not an italic. Keeps the
   client's original emphasis on "control" without breaking the serif. */
h1 em, h2 em{ font-style:normal; color:var(--wp--preset--color--accent); }

/* Links in flowing prose get an underline offset that clears descenders.
   Buttons and nav opt out via :not(). */
.wp-block-post-content a:not(.wp-element-button),
.kyh-prose a:not(.wp-element-button){
  text-underline-offset:.18em;
  text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb, currentColor 35%, transparent);
}
.wp-block-post-content a:not(.wp-element-button):hover,
.kyh-prose a:not(.wp-element-button):hover{
  text-decoration-color:currentColor;
}

/* ------------------------------------------------------------ site header */
.kyh-header{
  border-bottom:1px solid var(--wp--preset--color--line);
  background:var(--wp--preset--color--surface);
}
.kyh-logomark{ width:28px; height:28px; flex:none; display:block; }
.kyh-logomark rect{ fill:var(--wp--preset--color--ink); }
.kyh-logomark path{ fill:none; stroke:#fff; stroke-width:2.6;
  stroke-linejoin:round; stroke-linecap:round; }
.kyh-brand{
  display:flex; align-items:center; gap:.55rem;
  text-decoration:none; color:inherit;
}
.kyh-brand__name{
  font-family:var(--wp--preset--font-family--serif);
  font-weight:600; font-size:1.08rem; letter-spacing:-.01em;
  white-space:nowrap;
}

/* Core's navigation block: quiet until hovered. */
.kyh-header .wp-block-navigation{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.9rem; font-weight:500;
}
.kyh-header .wp-block-navigation-item__content{
  color:var(--wp--preset--color--muted);
  text-decoration:none;
}
.kyh-header .wp-block-navigation-item__content:hover,
.kyh-header .current-menu-item .wp-block-navigation-item__content{
  color:var(--wp--preset--color--ink);
}

/* ------------------------------------------------------------ site footer */
.kyh-footer{
  border-top:1px solid var(--wp--preset--color--line);
  background:var(--wp--preset--color--surface);
}
.kyh-footer a{ color:var(--wp--preset--color--muted); text-decoration:none; }
.kyh-footer a:hover{ color:var(--wp--preset--color--ink); text-decoration:underline; }

/* The disclaimer mirrors the one the app shows and must never be styled away. */
.kyh-disclaimer{
  font-size:.78rem;
  color:var(--wp--preset--color--faint);
}

/* --------------------------------------------------------- buttons/inputs */
.wp-element-button, .wp-block-button__link{
  font-family:var(--wp--preset--font-family--sans);
  font-weight:600;
  letter-spacing:-.005em;
  transition:background-color .15s ease, border-color .15s ease;
}

.kyh-field{
  font-family:var(--wp--preset--font-family--sans);
  font-size:1rem;
  color:var(--wp--preset--color--ink);
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--line-strong);
  border-radius:8px;
  padding:.72rem .85rem;
  width:100%;
}
.kyh-field::placeholder{ color:var(--wp--preset--color--faint); }
.kyh-field:focus{
  border-color:var(--wp--preset--color--accent);
  outline:2px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
  outline-offset:0;
}
.kyh-field--error{ border-color:#b91c1c; }

.kyh-form__row{ display:flex; gap:.6rem; flex-wrap:wrap; }
.kyh-form__row .kyh-field{ flex:1 1 240px; width:auto; }
/* Compact CTA carries name + email + button on one line. A 240px basis makes
   three items overflow into an awkward 2+1 wrap at typical card widths; 170px
   keeps them on one row down to ~600px and then wraps cleanly. */
.kyh-form__row--compact .kyh-field{ flex:1 1 170px; }
.kyh-form__note{
  font-size:.8rem; color:var(--wp--preset--color--muted); margin:.7rem 0 0;
}
.kyh-form__error{
  font-size:.85rem; color:#b91c1c; margin:.6rem 0 0; font-weight:500;
}
.kyh-form__success{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.95rem; font-weight:500;
  color:var(--wp--preset--color--accent);
  background:color-mix(in srgb, var(--wp--preset--color--accent) 7%, transparent);
  border:1px solid color-mix(in srgb, var(--wp--preset--color--accent) 25%, transparent);
  border-radius:8px; padding:1rem 1.15rem; margin:0;
}
@media (max-width:520px){
  .kyh-form__row{ flex-direction:column; }
  .kyh-form__row .wp-block-button, .kyh-form__row button{ width:100%; }
}

/* ------------------------------------------------------- eyebrow / meta ui */
.kyh-eyebrow{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--wp--preset--color--accent);
}
.kyh-meta{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.82rem; color:var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- article */
/* Reading measure is set by theme.json contentSize. These rules handle the
   vertical rhythm that default block gaps get wrong for long-form prose. */
.kyh-article .wp-block-post-content > * + *{ margin-block-start:1.4em; }
.kyh-article .wp-block-post-content > h2{ margin-block-start:2.4em; margin-block-end:.6em; }
.kyh-article .wp-block-post-content > h3{ margin-block-start:1.9em; margin-block-end:.5em; }
.kyh-article .wp-block-post-content > figure{ margin-block:2.2em; }
.kyh-article .wp-block-post-content > ul,
.kyh-article .wp-block-post-content > ol{ padding-inline-start:1.35em; }
.kyh-article .wp-block-post-content li + li{ margin-block-start:.45em; }

.kyh-standfirst{
  font-family:var(--wp--preset--font-family--serif);
  font-weight:400;
  font-size:clamp(1.15rem, 1.9vw, 1.4rem);
  line-height:1.5;
  color:var(--wp--preset--color--muted);
}

/* Byline: author, dates, read time. Wraps to two lines on narrow screens
   without the separators stranding at a line start. */
.kyh-byline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.55rem;
  font-family:var(--wp--preset--font-family--sans);
  font-size:.85rem;
  color:var(--wp--preset--color--muted);
  margin-top:1.1rem;
}
.kyh-byline__author{ color:var(--wp--preset--color--ink); font-weight:600; }
.kyh-byline__sep{ color:var(--wp--preset--color--faint); }

/* Locally drawn avatar — Gravatar would be an external request per article. */
.kyh-avatar{
  display:inline-block; text-align:center;
  border-radius:50%;
  background:var(--wp--preset--color--accent);
  color:#fff;
  font-family:var(--wp--preset--font-family--serif);
  font-weight:600;
  user-select:none;
}

/* Figure captions: small, quiet, and clearly not body copy. */
.wp-block-image figcaption,
.wp-block-table figcaption{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.8rem;
  line-height:1.5;
  color:var(--wp--preset--color--muted);
  margin-top:.7rem;
  padding-left:.9rem;
  border-left:2px solid var(--wp--preset--color--line-strong);
  text-align:left;
}

/* Wide/full media gets a hairline so screenshots don't float on the canvas. */
.wp-block-image img{ border-radius:8px; }
.wp-block-image.is-style-kyh-framed img{
  border:1px solid var(--wp--preset--color--line);
  box-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.07);
}

/* ------------------------------------------------- block style: callouts */
.wp-block-group.is-style-kyh-note,
.wp-block-group.is-style-kyh-caution{
  border-radius:10px;
  padding:1.25rem 1.4rem;
  border:1px solid;
  font-size:.96rem;
}
.wp-block-group.is-style-kyh-note{
  background:color-mix(in srgb, var(--wp--preset--color--accent) 5%, transparent);
  border-color:color-mix(in srgb, var(--wp--preset--color--accent) 22%, transparent);
}
.wp-block-group.is-style-kyh-caution{
  background:#fdf6ec;
  border-color:#e7c9a0;
}
.wp-block-group.is-style-kyh-note > *:first-child,
.wp-block-group.is-style-kyh-caution > *:first-child{ margin-block-start:0; }
.wp-block-group.is-style-kyh-note > *:last-child,
.wp-block-group.is-style-kyh-caution > *:last-child{ margin-block-end:0; }

/* ----------------------------------------------- block style: pull quote */
.wp-block-quote.is-style-kyh-editorial{
  border:0;
  margin-block:2.6em;
  padding:0 0 0 1.5rem;
  border-left:3px solid var(--wp--preset--color--accent);
}
.wp-block-quote.is-style-kyh-editorial p{
  font-family:var(--wp--preset--font-family--serif);
  font-weight:500;
  font-size:clamp(1.25rem, 2.4vw, 1.6rem);
  line-height:1.35;
  letter-spacing:-.015em;
  color:var(--wp--preset--color--ink);
}
.wp-block-quote.is-style-kyh-editorial cite{
  display:block; margin-top:.9rem;
  font-family:var(--wp--preset--font-family--sans);
  font-size:.82rem; font-style:normal; font-weight:500;
  color:var(--wp--preset--color--muted);
}

/* --------------------------------------------- block style: clinical table */
/* Formulary/coverage tables are the most likely table on this blog, so the
   default gets the treatment those need: dense, aligned, scannable. */
.wp-block-table.is-style-kyh-clinical{ overflow-x:auto; }
.wp-block-table.is-style-kyh-clinical table{
  border-collapse:collapse;
  font-family:var(--wp--preset--font-family--sans);
  font-size:.9rem;
  width:100%;
}
.wp-block-table.is-style-kyh-clinical th{
  text-align:left;
  font-weight:600;
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--wp--preset--color--muted);
  background:var(--wp--preset--color--canvas);
  border-bottom:1px solid var(--wp--preset--color--line-strong);
  padding:.7rem .85rem;
  white-space:nowrap;
}
.wp-block-table.is-style-kyh-clinical td{
  border-bottom:1px solid var(--wp--preset--color--line);
  padding:.72rem .85rem;
  vertical-align:top;
}
.wp-block-table.is-style-kyh-clinical tbody tr:last-child td{ border-bottom:0; }
.wp-block-table.is-style-kyh-clinical tbody tr:hover{
  background:color-mix(in srgb, var(--wp--preset--color--canvas) 55%, transparent);
}

/* ------------------------------------------------------------- citations */
/* The product's rule is "never invent data — every row keeps a source".
   The blog holds itself to the same standard, visibly. */
.kyh-citations{
  margin-block-start:3.5rem;
  padding-block-start:1.6rem;
  border-top:1px solid var(--wp--preset--color--line-strong);
}
.kyh-citations__title{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--wp--preset--color--muted);
  margin:0 0 1rem;
}
.kyh-citations ol{
  margin:0; padding-inline-start:1.4rem;
  font-family:var(--wp--preset--font-family--sans);
  font-size:.86rem; line-height:1.65;
  color:var(--wp--preset--color--muted);
}
.kyh-citations li + li{ margin-block-start:.6rem; }
.kyh-citations a{ color:var(--wp--preset--color--ink); overflow-wrap:anywhere; }

/* -------------------------------------------------------------- post list */
.kyh-postlist .wp-block-post-title a{ text-decoration:none; }
.kyh-postlist .wp-block-post-title a:hover{ color:var(--wp--preset--color--accent); }
.kyh-postlist li{ border-top:1px solid var(--wp--preset--color--line); }
.kyh-postlist li:first-child{ border-top:0; }

/* ------------------------------------------------------------ author card */
.kyh-author{
  display:flex; gap:1.15rem; align-items:flex-start;
  padding:1.5rem;
  background:var(--wp--preset--color--surface);
  border:1px solid var(--wp--preset--color--line);
  border-radius:12px;
}
.kyh-author__avatar img{ border-radius:50%; display:block; }
.kyh-author__name{
  font-family:var(--wp--preset--font-family--serif);
  font-weight:600; font-size:1.05rem; margin:0 0 .15rem;
}
.kyh-author__role{
  font-family:var(--wp--preset--font-family--sans);
  font-size:.78rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--wp--preset--color--accent); margin:0 0 .6rem;
}
.kyh-author__bio{ font-size:.92rem; line-height:1.6; color:var(--wp--preset--color--muted); margin:0; }
@media (max-width:600px){ .kyh-author{ flex-direction:column; gap:.9rem; } }

/* ------------------------------------------------------------- utilities */
.kyh-hairline{ border:0; border-top:1px solid var(--wp--preset--color--line); margin:0; }

/* Respect a user's reduced-motion setting. There is very little motion in
   this theme by design, but transitions still count. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
}