/* ==========================================================================
   Resource Hub child — skin. The hub's components in the client's design system.

   Loads last: after the main theme's CSS (inc/config.php → styles) and the hub's
   css/*.css. `html:root` outranks the `:root` the hub prints inline (#rh-brand),
   so these win regardless of order.

   Per client you edit ONLY:
     1. CLIENT TOKENS  — map each token to the client's own CSS variable or a hex value
     3. CHROME FIXES   — only if the main-site header/footer needs help under the hub's CSS
   Sections 2 and 4 are the same for every client.
   ========================================================================== */

/* ===== 1. CLIENT TOKENS — Taylor Counseling Group (taylorcounselinggroup theme, assets/css/main.css) ===== */
/* The theme has no CSS variables: values are its own hex codes (.btn-primary-blue, .btn-primary-green,
   .two-background-*, .page-footer, headings/body). */
html:root{
  --c-brand:#7E9C9F;           /* .btn-primary-blue (Get Matched) */
  --c-brand-hover:#688A8C;     /* its :hover */
  --c-brand-strong:#4D676A;    /* the dark teal panel (.two-background-left-section) */
  --c-brand-soft:#EFF1F1;      /* the theme's lightest grey-teal tint */
  --c-brand-line:#E0E4E4;      /* the theme's border tint */
  --c-on-brand:#fff;
  --c-accent:#87B38D;          /* .btn-primary-green */
  --c-accent-hover:#6FA476;
  --c-on-accent:#fff;
  --c-ink:#314143;             /* headings (h1-h5) */
  --c-text:#314143;            /* body */
  --c-muted:#4C6669;
  --c-page:#FFFFFF;            /* page background */
  --c-card:#fff;
  --c-sunken:#F7F8FA;          /* the theme's light section / footer background */
  --c-warm:#E4E8E8;            /* the theme's alternating section background */
  --c-warm-soft:#F7F8FA;
  --c-warm-line:#E0E4E4;
  --c-warm-ink:#4C6669;
  --c-dark:#4D676A;            /* dark teal panel */
  --c-line:#E0E4E4;
  --c-line-strong:#D6D9D9;
  --c-font-head:"Yeseva One",Georgia,serif;    /* h1-h5 */
  --c-font-body:"Overpass",Arial,sans-serif;   /* body */
  --c-head-weight:400;         /* Yeseva One ships one weight */
  --c-head-case:none;
  --c-head-track:0;
  --c-radius:5px;              /* .btn */
  --c-radius-lg:10px;
  --c-shadow-sm:0 1px 2px rgba(49,65,67,.06);
  --c-shadow-md:0 6px 18px rgba(49,65,67,.10);
  --c-shadow-brand:0 8px 22px rgba(126,156,159,.30);
  --c-headoff:150px;           /* sticky main-site header height + gap, for the sticky ToC (set from staging) */
}

/* ===== 2. Hub variables from the tokens (same for every client) ===== */
html:root{
  --rh-font:var(--c-font-body);        /* set the hub's font setting to "system": the main theme loads the fonts */
  --rh-line:var(--c-line);
  --rh-soft:var(--c-sunken);
  --rh-shadow:var(--c-shadow-md);
  --rh-shadow-sm:var(--c-shadow-sm);
  --rh-accent-grad:var(--c-brand);     /* flat colour, no gradients */
  --rh-btn-grad:var(--c-brand);
  --rh-accent-soft:var(--c-brand-soft);
  --rh-accent-line:var(--c-brand-line);
  --rh-muted:var(--c-muted);
  --rh-headoff:var(--c-headoff);
}
body.rh-child{background:var(--c-page);color:var(--c-text)}

/* ===== 3. CHROME FIXES — TCG header/footer under the hub's base.css (found with computed-style diffs on staging) ===== */
/* The chrome inherits TCG's body typography on the main site (main.css: 14px; 13px from 768px; 15px from 1025px;
   line-height normal). The hub's body is 16px/1.6 for its articles, so give the chrome TCG's values back. */
body.rh-child .page-header,body.rh-child .page-footer,body.rh-child .two-background,
body.rh-child .popup,body.rh-child .mobile-search-form{
  font-family:'Overpass',sans-serif;font-size:14px;line-height:normal;font-weight:400;color:#314143
}
@media (min-width:768px){
  body.rh-child .page-header,body.rh-child .page-footer,body.rh-child .two-background,
  body.rh-child .popup,body.rh-child .mobile-search-form{font-size:13px}
}
@media (min-width:1025px){
  body.rh-child .page-header,body.rh-child .page-footer,body.rh-child .two-background,
  body.rh-child .popup,body.rh-child .mobile-search-form{font-size:15px}
}
/* main.css offsets the page for its fixed bars; the hub's base.css resets body margin/padding, so put them back */
@media (max-width:767px){ body.rh-child{padding-bottom:58px} }                    /* fixed bottom bar on phones */
@media (min-width:1025px) and (max-width:1199px){ body.rh-child{margin-top:138px} } /* header is fixed in this band */
/* SearchWP Live Search: the inline CSS the plugin prints on the main site */
.searchwp-live-search-result .searchwp-live-search-result--title a{font-size:16px}

/* ===== 4. Components (same for every client — tokens only) ===== */

/* The hub's accent stripes, bars and watermarks: off (flat cards). On mobile the parent makes the
   closing CTA position:static, so its absolutely-placed watermark would escape onto the first screen. */
.rh-card:before,.rh-toc:before,.rh-mtoc:before,.rh-tldr:before,.rh-note:before,.rh-hero-img:before,
.rh-inline-cta:before,.rh-body .ll-inline-cta:before,.rh-arch-cta:before,.rh-arch-author:before,
.rh-body blockquote:before,.rh-meta:after,.rh-share:after,.rh-arch-ph:after,
.rh-cta .wm,.rh-arch-cta .wm{display:none}

/* type: the client's headline voice */
.rh-title,.rh-arch-h1,.rh-hub-hero h1,.rh-hub-h2,.rh-hub-sub,.rh-body h2,.rh-body h3,
.rh-cta h3,.rh-why h3,.rh-inline-cta h4,.rh-body .ll-inline-cta h3,.rh-body .ll-inline-cta h4,
.rh-arch-cta-t h2,.rh-arch-empty h1,.rh-arch-empty h2,.rh-arch-author-body h2,
.rh-hub-topic-title,.rh-arch-card-title{
  font-family:var(--c-font-head);font-weight:var(--c-head-weight);text-transform:var(--c-head-case);letter-spacing:var(--c-head-track)
}
.rh-title{font-size:clamp(28px,3.6vw,40px);line-height:1.06;color:var(--c-ink)}
.rh-arch-h1{font-size:clamp(30px,4.2vw,48px);line-height:1.04;color:var(--c-ink)}
.rh-hub-h2,.rh-hub-h2 a{color:var(--c-ink)!important}
.rh-hub-h2 a:hover{color:var(--c-brand)!important}
.rh-body h2{font-size:24px;line-height:1.15;color:var(--c-ink)}
.rh-body h3{font-size:18px;line-height:1.25;color:var(--c-ink)}
.rh-arch-card-title{font-size:17px;line-height:1.22}
.rh-arch-card-title a{color:var(--c-ink)!important}
.rh-arch-card-title a:hover{color:var(--c-brand)!important}
.rh-hub-featured .rh-arch-card-title{font-size:18px}
.rh-hub-track .rh-arch-card-title{font-size:15px}
.rh-arch-hero .rh-arch-card-title{font-size:clamp(20px,2.4vw,26px)}
.rh-why h3,.rh-cta h3{font-size:19px;line-height:1.15}

/* eyebrows / kickers / labels: tracked uppercase overline in the brand colour (no pills) */
.rh-eyebrow,.rh-arch-eyebrow,.rh-tldr h4{
  background:none;color:var(--c-brand);padding:0;border-radius:0;
  font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase
}
.rh-arch-kicker,.rh-card-h,.rh-toc-head b{font-weight:700;letter-spacing:.14em}
.rh-arch-kicker{color:var(--c-brand)}

/* buttons */
.rh-btn,.rh-post .ll-btn,.rh-body .wp-block-button__link{
  background:var(--c-brand);color:var(--c-on-brand);border:2px solid transparent;border-radius:var(--c-radius);
  font-family:var(--c-font-body);font-weight:700;font-size:15px;line-height:1;padding:13px 22px;box-shadow:none
}
.rh-btn:hover,.rh-post .ll-btn:hover,.rh-body .wp-block-button__link:hover{
  background:var(--c-brand-hover);color:var(--c-on-brand);transform:none;box-shadow:var(--c-shadow-brand)
}
.rh-post .rh-btn,.rh-post .rh-btn:hover,.rh-arch .rh-btn{color:var(--c-on-brand)}
/* ghost = outline button on dark/brand surfaces */
.rh-btn.ghost,.rh-post .ll-btn.ghost{background:transparent;border:2px solid rgba(255,255,255,.6);color:#fff}
.rh-btn.ghost:hover,.rh-post .ll-btn.ghost:hover{background:rgba(255,255,255,.1);box-shadow:none;color:#fff}
/* on brand-coloured panels: the accent button */
.rh-cta .rh-btn:not(.ghost),.rh-arch-cta .rh-btn:not(.ghost){background:var(--c-accent);color:var(--c-on-accent)}
.rh-cta .rh-btn:not(.ghost):hover,.rh-arch-cta .rh-btn:not(.ghost):hover{background:var(--c-accent-hover);color:var(--c-on-accent);box-shadow:none}

/* article */
.rh-post a{color:var(--c-brand)}
.rh-body a{text-decoration:underline;text-underline-offset:2px}
.rh-body a:hover{color:var(--c-brand-strong)}
.rh-crumbs a:hover,.rh-arch-crumbs a:hover{color:var(--c-brand)}
.rh-byline b{color:var(--c-ink)}
.rh-avatar{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--c-brand)}
.rh-tldr,.rh-note{background:var(--c-warm-soft);border:1px solid var(--c-warm-line);border-radius:var(--c-radius)}
.rh-tldr p,.rh-note p{color:var(--c-text)}
.rh-body ol li:before{background:var(--c-brand);box-shadow:none}
.rh-body blockquote{background:var(--c-warm-soft);color:var(--c-text);border:1px solid var(--c-warm-line);border-radius:var(--c-radius);font-style:italic;font-weight:500}
.rh-body blockquote p{color:var(--c-text)}
.rh-body th{background:var(--c-dark);border-bottom:2px solid var(--c-brand)}
.rh-body tr:nth-child(even) td{background:var(--c-page)}
.rh-body details.rh-faq{border-radius:var(--c-radius)}
.rh-body details.rh-faq summary{color:var(--c-ink)}
/* in-article CTA (hub-injected + pipeline .ll-inline-cta): a warm band */
.rh-inline-cta,.rh-body .ll-inline-cta{background:var(--c-warm);color:var(--c-text);border:0;box-shadow:none;border-radius:var(--c-radius-lg)}
.rh-inline-cta h4,.rh-body .ll-inline-cta h3,.rh-body .ll-inline-cta h4{color:var(--c-ink)}
.rh-inline-cta p,.rh-body .ll-inline-cta p{color:var(--c-muted)}
.rh-body .ll-inline-cta .ll-btn.ghost{border-color:var(--c-dark);color:var(--c-ink)}
.rh-body .ll-inline-cta .ll-btn.ghost:hover{background:color-mix(in srgb,var(--c-ink) 6%,transparent);color:var(--c-ink)}
/* search field */
.rh-search input{border:1px solid var(--c-line-strong);border-radius:var(--c-radius);background:var(--c-card);color:var(--c-text)}
.rh-search input:focus{border-color:var(--c-brand);outline:none;box-shadow:0 0 0 3px var(--c-brand-line)}
.rh-share a:hover{background:var(--c-brand)}

/* sidebar: top CTA = brand panel, closing CTA = dark panel */
.rh-card{border-radius:var(--c-radius-lg)}
.rh-cta{background:var(--c-brand);border:0}
.rh-cta.rh-cta-bottom{background:var(--c-dark)}
.rh-cta.rh-cta-bottom .rh-btn:not(.ghost){background:var(--c-brand);color:var(--c-on-brand)}
.rh-cta.rh-cta-bottom .rh-btn:not(.ghost):hover{background:var(--c-brand-hover);color:var(--c-on-brand)}
.rh-cta p{color:rgba(255,255,255,.92)}
.rh-trust{border-top-color:rgba(255,255,255,.22)}
.rh-trust b.rh-stars{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--c-accent)}
.rh-stat{background:var(--c-warm);border:0}
.rh-stat b{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;
  color:var(--c-brand);font-family:var(--c-font-head);font-weight:var(--c-head-weight);text-transform:var(--c-head-case)}
.rh-stat small{color:var(--c-muted)}
.rh-why-link{color:var(--c-brand)}
.rh-toc-head b,.rh-mtoc-h{color:var(--c-ink)}
.rh-toc a.active{color:var(--c-ink)}

/* archives + hub */
.rh-arch-card{border-radius:var(--c-radius-lg)}
.rh-arch-card:hover{box-shadow:var(--c-shadow-md)}
.rh-arch-pill{background:var(--c-accent);color:var(--c-on-accent)!important;font-weight:700;letter-spacing:.08em}
.rh-arch-ph{background:var(--c-warm)}
.rh-arch-ph-label{color:var(--c-warm-ink)}
.rh-arch-fpill{color:var(--c-ink)!important;border-color:var(--c-line-strong)}
.rh-arch-fpill:hover{border-color:var(--c-brand);box-shadow:none}
.rh-arch-fpill.active{background:var(--c-brand);color:var(--c-on-brand)!important}
.rh-arch-pager a,.rh-arch-pager span{color:var(--c-ink)}
.rh-arch-pager a:hover{border-color:var(--c-brand)}
.rh-arch-empty{background:var(--c-card);border-radius:var(--c-radius-lg)}
.rh-arch-empty h1,.rh-arch-empty h2{color:var(--c-ink)}
.rh-arch-cta{background:var(--c-brand);border:0;box-shadow:none;border-radius:var(--c-radius-lg)}
.rh-arch-cta .rh-arch-kicker{color:var(--c-accent)}
.rh-arch-cta-t p{color:rgba(255,255,255,.92)}
.rh-arch-author{background:var(--c-dark);border:0}
.rh-arch-author .rh-arch-kicker,.rh-arch-author-body .cred{color:var(--c-accent)}
/* hub home hero (a photo hero keeps the hub's dark overlay) */
.rh-hub-hero{background:var(--c-brand)}
.rh-hub-hero-pill{background:none;padding:0;color:var(--c-accent);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.rh-hub-hero h1{line-height:1.02}
.rh-hub-hero h1 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;-webkit-text-fill-color:currentColor;color:var(--c-accent)}
.rh-hub-hero-text{color:rgba(255,255,255,.92)}
.rh-hub-hero .rh-btn:not(.ghost){background:#fff;color:var(--c-brand)}
.rh-hub-hero .rh-btn:not(.ghost):hover{background:var(--c-sunken);color:var(--c-brand-strong);box-shadow:none}
.rh-hub-topic{border-radius:var(--c-radius-lg)}
.rh-hub-topic-title{color:var(--c-ink)}
.rh-hub-pin:after{background:var(--c-brand)}
.rh-hub-section-head{border-top-color:var(--c-line-strong)}
/* Brad 2026-11-03 review */
/* body text matches the bullets (main.css sets p to 15px; list items are 17px) */
.rh-body p{font-size:17px;line-height:1.7}
/* one plain underline: drop main.css's `p a` 2px border-bottom */
.rh-body p a,.rh-body li a{border-bottom:0}
/* sidebar CTA: no trust-badge row (ends on the phone number); white "T" mark for contrast */
.rh-side .rh-cta .rh-trust{display:none}
.rh-side .rh-cta img.mark,.rh-side .rh-cta img.wm{filter:brightness(0) invert(1);opacity:.95}
/* UberMenu: the main site's Customizer styles live in site 1's options, so they never reach the hub.
   Copied here so the dropdowns get their white panel (they were transparent over the page). */
.ubermenu-main{max-width:1366px}
.ubermenu-main.ubermenu-transition-fade .ubermenu-item .ubermenu-submenu-drop{margin-top:0}
.ubermenu.ubermenu-main .ubermenu-item-level-0{margin:0 60px}
.ubermenu-main .ubermenu-submenu.ubermenu-submenu-drop{background-color:#fff;color:#314143}
.ubermenu .ubermenu-submenu.ubermenu-submenu-id-3732{width:245%;min-width:245%}
.ubermenu .ubermenu-item.ubermenu-item-4148>.ubermenu-target{color:#7e9c9f}
.ubermenu .ubermenu-item.ubermenu-item-4148.ubermenu-active>.ubermenu-target,.ubermenu .ubermenu-item.ubermenu-item-4148:hover>.ubermenu-target,.ubermenu .ubermenu-submenu .ubermenu-item.ubermenu-item-4148.ubermenu-active>.ubermenu-target,.ubermenu .ubermenu-submenu .ubermenu-item.ubermenu-item-4148:hover>.ubermenu-target{color:#688a8c}
/* "Reviewed By" card (matches the main blog's post-reviewed box) */
.tcg-reviewed{display:flex;gap:32px;align-items:center;background:#f4f5f6;margin:40px 0 28px;padding:28px 32px;border-radius:4px}
.tcg-reviewed img{width:168px;height:168px;flex:0 0 168px;border-radius:50%;object-fit:cover;display:block;margin:0;border:4px solid #fff;box-shadow:0 6px 18px rgba(49,65,67,.18)}
.tcg-reviewed-body{padding:0}
.tcg-reviewed-kicker{display:block;font-size:15px;letter-spacing:.12em;color:#314143;margin-bottom:4px}
.rh-body .tcg-reviewed-name{margin:0 0 10px;font-size:26px;line-height:1.2}
.rh-body .tcg-reviewed-name a{color:var(--c-accent,#7e9c9f);text-decoration:none}
.rh-body .tcg-reviewed p{font-size:15px;line-height:1.6;margin:0}
.rh-byline a{color:inherit;text-decoration:underline;text-underline-offset:2px}
@media (max-width:600px){.tcg-reviewed{flex-direction:column;align-items:center;text-align:center;padding:28px 20px;gap:18px}.tcg-reviewed img{width:140px;height:140px;flex-basis:auto}}
/* SearchWP Live Search: its own stylesheet doesn't load on the hub, so its empty result boxes rendered below the footer */
.searchwp-live-search-results{position:absolute;top:0;left:0;z-index:99999;visibility:hidden;opacity:0;transition:opacity .25s;background:#fff;border:1px solid rgba(0,0,0,.1);border-radius:2px;box-shadow:0 2px 8px rgba(0,0,0,.12);min-height:175px;max-height:300px;overflow-y:auto}
.searchwp-live-search-results-showing{visibility:visible;opacity:1}