/* Header: Join Weekly Calm as a reversed button, and a three line menu.
 * Approved by Steven Webb on 16 September 2026 for every site in the family.
 * Load after footer.css and before the site theme. Markup and rules are in
 * HEADER-BUTTON.md. The colours come from the host theme, so the same file
 * serves Atlantic, Stillness and Inner Peace. */

/* The button: the header's own colours turned round. */
.site-header a.header-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex:none;position:relative;overflow:hidden;isolation:isolate;min-height:44px;padding:9px 16px;background:var(--family-field);color:var(--family-ink);border:1px solid var(--family-field);border-radius:var(--layout-radius);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap}
.site-header a.header-cta:hover{background:#F7F6F2;border-color:#F7F6F2;color:var(--family-ink);text-decoration:none}
.site-header a.header-cta:focus-visible{outline:3px solid #F7F6F2;outline-offset:4px}
.site-header .cta-short{display:none}
.site-header.is-condensed a.header-cta{min-height:40px;padding:7px 14px}

/* The glint: a soft light crosses the button once every five seconds.
 * An approved exception to the rule against looping ornament, for this
 * one element only. It never moves the button, pauses on hover and focus,
 * and stops under reduced motion. */
.site-header a.header-cta::after{content:"";position:absolute;inset:-40% auto -40% -60%;width:45%;background:linear-gradient(105deg,rgb(255 255 255 / 0) 0%,rgb(255 255 255 / .55) 50%,rgb(255 255 255 / 0) 100%);transform:translateX(-120%) skewX(-18deg);animation:header-cta-glint 5s ease-in-out infinite;pointer-events:none;z-index:-1}
@keyframes header-cta-glint{0%{transform:translateX(-120%) skewX(-18deg)}22%{transform:translateX(420%) skewX(-18deg)}100%{transform:translateX(420%) skewX(-18deg)}}
.site-header a.header-cta:hover::after,.site-header a.header-cta:focus-visible::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.site-header a.header-cta::after{animation:none;display:none}}
html.reduce-motion .site-header a.header-cta::after{animation:none;display:none}

/* The menu control: three lines, no word, no plus. It becomes a cross when
 * open. menu.js writes its plus or minus into the button's first span, so
 * the markup gives it a hidden span to write into. */
.menu-toggle{gap:0;padding:10px 6px;min-width:48px;justify-content:center}
.menu-lines{display:grid;gap:5px;width:22px}
.menu-lines span{display:block;height:2px;background:currentColor;border-radius:1px;transition:transform var(--motion-feedback,120ms) ease,opacity var(--motion-feedback,120ms) ease}
.menu-toggle[aria-expanded="true"] .menu-lines span:nth-child(2){opacity:0}
.menu-toggle[aria-expanded="true"] .menu-lines span:first-child{transform:translateY(7px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .menu-lines span:last-child{transform:translateY(-7px) rotate(-45deg)}

/* Placement. Wide: name, links pushed right, button last. Narrow: name,
 * button, menu control on one row; the links open underneath. */
@media(min-width:1001px){
 .site-header .brand-identity{order:1}
 .site-header .navigation-panel,.site-header #navigation{order:2;margin-left:auto}
 .site-header a.header-cta{order:3;margin-left:28px}
}
@media(max-width:1000px){
 .site-header{grid-template-columns:minmax(0,1fr) auto auto}
 .site-header .brand-identity{grid-column:1;grid-row:1}
 .site-header a.header-cta{grid-column:2;grid-row:1;justify-self:end}
 .site-header .menu-toggle{grid-column:3;grid-row:1}
 .site-header .navigation-panel{grid-column:1/-1;grid-row:2}
}
@media(max-width:760px){
 .site-header a.header-cta{min-height:40px;padding:7px 11px;font-size:13px}
}
@media(max-width:600px){
 .site-header .cta-full{display:none}
 .site-header .cta-short{display:inline}
 .site-header a.header-cta{min-height:36px;padding:6px 9px;font-size:12px}
 .site-header{column-gap:10px}
 .site-header .brand-identity{min-width:0;gap:8px}
 .site-header .brand-portrait{width:40px;height:40px}
 [data-homepage-family] .site-header .brand-name{font-size:19px;max-width:12ch;overflow-wrap:anywhere}
 [data-homepage-family] .site-header .brand-tagline{font-size:11px;max-width:18ch}
}