/*
Theme Name: Heather McClure (Blocksy child)
Theme URI: https://heathermcclure.com
Description: Child theme for Blocksy with the Ocean breeze palette, self-hosted Playfair Display and Atkinson Hyperlegible, and block patterns for every page of the site.
Author: Heather McClure
Template: blocksy
Version: 1.5.2
License: GNU General Public License v2 or later
Text Domain: heathermcclure-child
*/

/* ---------- Fonts (self-hosted, no Google; files are in assets/fonts/) ---------- */
@font-face{font-family:"Playfair Display";src:url("assets/fonts/PlayfairDisplay-Variable.woff") format("woff");font-weight:400 900;font-style:normal;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("assets/fonts/PlayfairDisplay-Italic-Variable.woff") format("woff");font-weight:400 900;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Italic.woff") format("woff");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-Bold.woff") format("woff");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible";src:url("assets/fonts/AtkinsonHyperlegible-BoldItalic.woff") format("woff");font-weight:700;font-style:italic;font-display:swap}

/* ---------- Tokens: Ocean breeze ---------- */
:root{
  --hm-bg:#f3f9fc; --hm-panel:#ffffff; --hm-ink:#132a34; --hm-mute:#3c505a;
  --hm-link:#057565; --hm-edge:#6e848f; --hm-line:#dcd8d0;
  --hm-soft:#eaf7f3; --hm-code:#eaf2f6;
  --hm-brand:#80e3cc; --hm-accent:#f3c681;
  --hm-c1:#ffb7c4; --hm-c2:#ffbca2; --hm-c3:#f3c681; --hm-c4:#bcda93; --hm-c5:#80e3cc; --hm-c6:#90d9ff; --hm-c7:#c5c8ff;
  --hm-heading:"Playfair Display",Georgia,"Times New Roman",serif;
  --hm-body:"Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",sans-serif;
  --theme-font-family:var(--hm-body);
}
body{font-family:var(--hm-body);color:var(--hm-ink);background-color:var(--hm-bg)}
h1,h2,h3,h4,h5,h6,.entry-title,.page-title{font-family:var(--hm-heading);font-weight:700;color:var(--hm-ink);line-height:1.15}

/* ---------- Pages built from the patterns ---------- */
body.hm-has-hero{overflow-x:clip}
body.hm-has-hero .hero-section,
body.hm-has-hero .entry-header,
body.hm-has-hero .page-title{display:none}
body.hm-has-hero [data-vertical-spacing]{padding-top:0;padding-bottom:0}
body.hm-has-hero .entry-content > .alignfull,
body.hm-has-hero .entry-content .alignfull{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}

.hm-section{padding:56px 20px}
.hm-hero{padding:72px 20px 64px}
.hm-hero h1{font-size:clamp(2.1rem,5.4vw,3.4rem);margin-block:0 .4em}
.hm-eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hm-link);margin-block:0 12px}
.hm-lede{font-size:1.2rem;color:var(--hm-mute);max-width:40em}
.hm-cta{text-align:center}
.hm-cta .hm-lede{margin-left:auto;margin-right:auto}
.hm-section h2{font-size:clamp(1.6rem,4vw,2.3rem);margin-block:0 .5em}
.hm-section h3{font-size:1.25rem}

/* Links in running text keep an underline (not colour alone) */
.hm-section p a,.hm-hero p a,.hm-section li a{color:var(--hm-link);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}

/* Cards */
.hm-grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:700px){.hm-grid.hm-cols-2{grid-template-columns:repeat(2,1fr)}.hm-grid.hm-cols-3,.hm-grid.hm-cols-4{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.hm-grid.hm-cols-3{grid-template-columns:repeat(3,1fr)}.hm-grid.hm-cols-4{grid-template-columns:repeat(4,1fr)}}
.hm-card{position:relative;background:var(--hm-panel);border:1px solid var(--hm-line);border-radius:16px;padding:22px}
.wp-block-post-template .hm-card{height:100%}
.hm-card h3{margin-block:0 .35em;font-size:1.25rem}
.hm-card h3 a,.hm-card .wp-block-post-title a{color:var(--hm-ink);text-decoration:none}
.hm-card h3 a::after,.hm-card .wp-block-post-title a::after{content:"";position:absolute;inset:0;border-radius:16px}
.hm-card:hover,.hm-card:focus-within{border-color:var(--hm-ink)}
.hm-card p{margin-block:0 .8em;color:var(--hm-mute);font-size:.98rem}
.hm-card .hm-card-cta{margin-block:0;font-weight:700;color:var(--hm-link)}
.hm-card .wp-block-post-featured-image{margin:-22px -22px 16px;overflow:hidden;border-radius:16px 16px 0 0}
.hm-card .wp-block-post-featured-image img{display:block;width:100%;height:auto}
.hm-card[class*="hm-stage-"]{border-top-width:8px}
.hm-stage-1{border-top-color:var(--hm-c1)}.hm-stage-2{border-top-color:var(--hm-c2)}.hm-stage-3{border-top-color:var(--hm-c3)}
.hm-stage-4{border-top-color:var(--hm-c4)}.hm-stage-5{border-top-color:var(--hm-c5)}.hm-stage-6{border-top-color:var(--hm-c7)}
.hm-child-cards .wp-block-post-template,.hm-posts .wp-block-post-template{display:grid;gap:16px;grid-template-columns:1fr;padding:0;margin:0;list-style:none}
@media(min-width:700px){.hm-child-cards .wp-block-post-template,.hm-posts .wp-block-post-template{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.hm-child-cards .wp-block-post-template,.hm-posts .wp-block-post-template{grid-template-columns:repeat(3,1fr)}}
.hm-child-cards .wp-block-post-template>li,.hm-posts .wp-block-post-template>li{margin:0}

/* Callouts and notices */
.hm-callout{background:var(--hm-soft);border:2px solid var(--hm-ink);border-radius:16px;padding:24px}
.hm-callout h3{margin-top:0}
.hm-notice{border-left:6px solid var(--hm-accent);background:var(--hm-panel);border-top:1px solid var(--hm-line);border-right:1px solid var(--hm-line);border-bottom:1px solid var(--hm-line);padding:16px 20px;border-radius:0 12px 12px 0}
.hm-notice p{margin-block:0;color:var(--hm-mute)}

/* Buttons: dark text on mint or gold, dark outline (4.5:1 or better) */
.wp-block-button__link,.wp-block-button .wp-block-button__link.wp-element-button{background:var(--hm-brand);color:var(--hm-ink);border:2px solid var(--hm-ink);border-radius:12px;font-weight:700;padding:.8em 1.5em;text-decoration:none;min-height:44px}
.wp-block-button__link:hover{background:var(--hm-brand);color:var(--hm-ink);filter:brightness(.96)}
.wp-block-button.hm-btn-accent .wp-block-button__link.wp-element-button{background:var(--hm-accent);color:var(--hm-ink)}
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button{background:transparent;color:var(--hm-ink);border:2px solid var(--hm-ink)}
.wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover{background:var(--hm-soft)}

/* FAQ */
.wp-block-details{background:var(--hm-panel);border:2px solid var(--hm-edge);border-radius:14px;padding:16px 20px;margin-bottom:10px}
.wp-block-details summary{cursor:pointer;font-weight:700}
.wp-block-details p{margin-block:.8em 0;color:var(--hm-mute)}

/* Focus: always visible */
a:focus-visible,button:focus-visible,summary:focus-visible,.wp-block-button__link:focus-visible{outline:3px solid var(--hm-ink);outline-offset:3px}

/* Background colour helpers for the palette slugs (backup for the theme.json classes) */
.has-hm-soft-background-color{background-color:var(--hm-soft)}
.has-hm-panel-background-color{background-color:var(--hm-panel)}
.has-hm-code-background-color{background-color:var(--hm-code)}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}


/* ---------- Fonts, header and footer: always ours, whatever Blocksy's Customizer says ---------- */
:root,body{--theme-font-family:var(--hm-body)!important}
body,button,input,select,textarea,.ct-widget,.ct-menu-link,.ct-header,.ct-footer,.ct-footer a,.ct-header [class*="ct-"],.site-description,.entry-meta,.ct-breadcrumbs{font-family:var(--hm-body)!important}
h1,h2,h3,h4,h5,h6,.entry-title,.page-title,.site-title,.site-title a,.ct-footer .widget-title,.ct-widget .widget-title,.wp-block-heading,.hm-hero h1{font-family:var(--hm-heading)!important}
.ct-header .site-title,.ct-header .site-title a{font-weight:700;letter-spacing:0}

/* Header and footer follow the palette (only where Blocksy has no colour of its own set) */
.ct-footer{background-color:var(--hm-soft);color:var(--hm-ink);border-top:1px solid var(--hm-line)}
.ct-footer a,.ct-footer .widget-title,.ct-footer h1,.ct-footer h2,.ct-footer h3,.ct-footer h4{color:var(--hm-ink)}
.ct-footer a{text-decoration:underline;text-underline-offset:3px}
.ct-footer a:hover{color:var(--hm-link)}
.ct-header .ct-menu-link{font-weight:700}
.ct-header .ct-menu-link:hover,.ct-header .current-menu-item > .ct-menu-link{color:var(--hm-link)}
.ct-header [data-sticky*="yes"]{box-shadow:0 1px 0 var(--hm-line)}

/* Footer rows (Blocksy paints each row itself): light panel, dark text, room for the accessibility button */
.ct-footer [data-row],.ct-footer [data-row] > div{background-color:var(--hm-soft)!important;color:var(--hm-ink)!important}
.ct-footer [data-row],.ct-footer [data-row] *{color:var(--hm-ink)}
.ct-footer [data-row] a{color:var(--hm-link)}
.ct-footer{padding-bottom:72px}

/* Hero: every line starts at the same left edge */
.hm-hero.is-layout-constrained > *{margin-left:max(20px,calc(50% - 520px))!important;margin-right:auto!important}

/* v1.4.3: no heavy dark borders on legacy column/group blocks */
.entry-content .wp-block-columns.has-border-color,
.entry-content .wp-block-group.has-border-color,
.entry-content .wp-block-column.has-border-color{border-width:1px!important;border-color:var(--hm-line)!important;border-radius:16px}

/* v1.5.1: ladder table */
.entry-content .hm-ladder-table{overflow-x:auto}
.entry-content .hm-ladder-table table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:640px}
.entry-content .hm-ladder-table th,.entry-content .hm-ladder-table td{border:1px solid var(--hm-line);padding:.7em .85em;text-align:left;vertical-align:top}
.entry-content .hm-ladder-table thead th{background:var(--hm-soft);font-weight:700}

/* v1.5.2: eyebrow links on tool pages */
.entry-content .hm-eyebrow a{color:inherit;text-decoration:none;border-bottom:2px solid transparent}
.entry-content .hm-eyebrow a:hover,.entry-content .hm-eyebrow a:focus-visible{border-bottom-color:currentColor}