/*
Theme Name: Wanderhaus
Theme URI: https://wanderhausmedia.com
Author: Wanderhaus Media LLC
Description: Theme for Wanderhaus Media. Header, menu, footer, fonts and colors are built in. On activation it creates the site's pages as drafts, sets the home page and turns on pretty links.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GPLv2 or later
Text Domain: wanderhaus
*/

/* ---------- tokens (colors from the logo) ---------- */
:root{
  --wh-night:#0c2240;
  --wh-navy:#12305a;
  --wh-dusk:#1b3a63;
  --wh-brass:#c9a24a;
  --wh-brass-hi:#d8b45e;
  --wh-sky:#2f6fb0;
  --wh-fog:#edf1f5;
  --wh-mist:#d5dce6;
  --wh-text:#1d2b40;
  --wh-muted:#4a5a74;
  --wh-display:"Big Shoulders Display","Arial Narrow",sans-serif;
  --wh-serif:"Source Serif 4",Georgia,serif;
  --wh-wide:1240px;
  --wh-read:720px;
  --wh-gutter:clamp(20px,4vw,32px);
}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:var(--wh-text);font-family:var(--wh-serif);font-size:18px;line-height:1.65}
img{max-width:100%;height:auto}
a{color:var(--wh-navy);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--wh-sky)}
:focus-visible{outline:3px solid var(--wh-brass);outline-offset:3px}
h1,h2,h3,h4{font-family:var(--wh-display);font-weight:800;line-height:1.02;color:var(--wh-navy);margin:0 0 .45em}
h1{font-size:clamp(48px,6.8vw,100px);font-weight:900;line-height:.93}
h2{font-size:clamp(30px,3vw,38px)}
h3{font-size:clamp(24px,2.2vw,28px);line-height:1.05}
p{margin:0 0 1em}
.wh-skip{position:absolute;left:-9999px;top:0;background:#fff;color:var(--wh-navy);padding:10px 16px;z-index:100}
.wh-skip:focus{left:12px;top:12px}

/* ---------- header ---------- */
.wh-header{background:var(--wh-night);padding:12px var(--wh-gutter)}
.wh-header__inner{max-width:var(--wh-wide);margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
.wh-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff}
.wh-brand img{width:32px;height:auto;display:block}
.wh-brand span{font-family:var(--wh-display);font-weight:800;font-size:20px;color:#fff}
.wh-nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 28px}
.wh-nav a{display:block;padding:10px 0;font-family:var(--wh-display);font-weight:700;font-size:19px;color:#fff;text-decoration:none}
.wh-nav a:hover,.wh-nav a[aria-current="page"]{color:var(--wh-brass)}
.admin-bar .wh-header{scroll-margin-top:32px}

/* ---------- content frame ---------- */
.wh-content{display:block}
/* any loose block a person adds at the top level gets a readable width */
.wh-content>:not(.wh-section){max-width:var(--wh-read);margin-left:auto;margin-right:auto;padding-left:var(--wh-gutter);padding-right:var(--wh-gutter)}
.wh-content>p:first-child,.wh-content>h2:first-child{margin-top:64px}
.wp-block-group.wh-section{padding:clamp(72px,9vw,112px) var(--wh-gutter);margin:0}
.wp-block-group.wh-section>*{max-width:var(--wh-wide);margin-left:auto;margin-right:auto}
.wp-block-group.wh-fog{background:var(--wh-fog)}
.wp-block-group.wh-tight{padding-top:32px;padding-bottom:40px}
.wp-block-group.wh-read>*{max-width:var(--wh-read)}
/* two white sections in a row share one gap */
.wp-block-group.wh-section:not(.wh-hero):not(.wh-fog)+.wp-block-group.wh-section:not(.wh-hero):not(.wh-fog):not(.wh-tight){padding-top:0}

/* ---------- hero ---------- */
.wp-block-group.wh-hero{background:linear-gradient(180deg,var(--wh-dusk) 35%,#0e2443 100%);color:#dfe6f2;text-align:center;padding:clamp(56px,7vw,80px) var(--wh-gutter) clamp(72px,8vw,96px)}
.wp-block-group.wh-hero>*{max-width:var(--wh-wide);margin-left:auto;margin-right:auto}
.wh-hero h1{color:#fff;margin:0 auto 24px}
.wp-block-group.wh-hero>h1{max-width:14ch}
.wh-hero p{font-size:20px;line-height:1.6;color:#dfe6f2;margin:0 auto}
.wp-block-group.wh-hero>p{max-width:36em}
.wh-hero .wp-block-buttons{justify-content:center;margin-top:32px}
.wp-block-image.wh-hero-logo{margin:0 auto 40px;width:clamp(180px,22vw,280px)}
.wp-block-image.wh-hero-logo img{width:100%;display:block}
.wp-block-group.wh-hero--page{padding:clamp(56px,7vw,88px) var(--wh-gutter)}
.wh-hero--page h1{font-size:clamp(44px,5.6vw,76px)}
.wp-block-group.wh-hero--page>h1{max-width:16ch}
.wh-hero .wh-icon-slot{margin:0 auto 32px}

/* ---------- statement line ---------- */
p.wh-statement{font-family:var(--wh-display);font-weight:800;font-size:clamp(36px,4.8vw,64px);line-height:1.02;color:var(--wh-navy);text-align:center;max-width:16ch!important;margin:0 auto}

/* ---------- buttons: one style everywhere ---------- */
.wp-block-buttons{display:flex;flex-wrap:wrap;gap:12px}
.wp-block-button__link,.wh-button{display:inline-block;background:var(--wh-brass);color:var(--wh-night);font-family:var(--wh-display);font-weight:800;font-size:22px;line-height:1;padding:18px 32px;border:0;border-radius:4px;text-decoration:none;cursor:pointer}
.wp-block-button__link:hover,.wh-button:hover{background:var(--wh-brass-hi);color:var(--wh-night)}
.wp-block-button.is-style-outline .wp-block-button__link{background:var(--wh-brass);color:var(--wh-night)}

/* ---------- brand cards ---------- */
.wp-block-group.wh-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:40px 28px}
.wh-card>*{margin:0}
.wh-card h3{margin-top:14px;font-size:28px}
.wh-card h3 a{color:var(--wh-navy);text-decoration:none}
.wh-card h3 a:hover{color:var(--wh-sky)}
.wh-card p{font-size:16px;color:var(--wh-muted);margin-top:4px}
/* logo slots: replace the slot with an Image block and it keeps this frame */
.wh-logo-slot,.wh-card .wp-block-image,.wh-brand-logo .wp-block-image{aspect-ratio:1/1;background:var(--wh-fog);display:flex;align-items:center;justify-content:center;padding:12%;margin:0}
.wh-card .wp-block-image img,.wh-brand-logo .wp-block-image img{max-height:100%;width:auto;object-fit:contain}
.wh-logo-slot p,.wh-icon-slot p{margin:0;font-size:14px;font-style:italic;color:#5b6b84;text-align:center}
.wh-section h2.wh-section-title{font-size:36px;margin-bottom:36px}
p.wh-intro{font-size:18px;color:var(--wh-muted);max-width:40em;margin:-24px 0 40px}

/* ---------- apps ---------- */
.wp-block-group.wh-apps{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:28px}
.wp-block-group.wh-app{background:#fff;padding:28px;display:grid;grid-template-columns:96px minmax(0,1fr);gap:24px;align-items:start}
.wh-fog .wh-app{background:#fff}
.wh-app>.wp-block-group:last-child>*{margin:0}
.wh-app h3{font-size:28px;margin-bottom:8px}
.wh-app h3 a{color:var(--wh-navy);text-decoration:none}
.wh-app p{font-size:16px;color:var(--wh-muted)}
p.wh-app-links{display:flex;flex-wrap:wrap;gap:6px 20px;font-size:15px;margin-top:12px!important}
.wh-icon-slot,.wh-app .wp-block-image{width:96px;height:96px;border-radius:22px;background:var(--wh-fog);display:flex;align-items:center;justify-content:center;padding:8px;overflow:hidden;margin:0}
.wh-app .wp-block-image{padding:0}
.wh-app .wp-block-image img{width:100%;height:100%;object-fit:cover}
.wh-icon-slot p{font-size:12px}
.wh-hero .wh-icon-slot{width:120px;height:120px;border-radius:27px;background:rgba(255,255,255,.12)}
.wh-hero .wh-icon-slot p{color:#c5d0e0}

/* ---------- two-column pages ---------- */
.wp-block-columns.wh-split{display:flex;flex-wrap:wrap;gap:clamp(32px,5vw,72px);align-items:flex-start;margin:0 auto}
.wh-split>.wp-block-column{flex:1 1 320px;min-width:0}
.wh-split>.wp-block-column.wh-brand-logo{flex:0 1 360px}

/* ---------- lists, facts, steps ---------- */
ul.wh-list{list-style:none;padding:0;margin:0 0 1.5em}
ul.wh-list li{padding:14px 0 14px 26px;position:relative;border-top:1px solid var(--wh-mist)}
ul.wh-list li:last-child{border-bottom:1px solid var(--wh-mist)}
ul.wh-list li::before{content:"";position:absolute;left:0;top:23px;width:10px;height:10px;background:var(--wh-brass)}
.wp-block-group.wh-facts>p{position:relative;margin:0;padding:16px 0 16px 264px;border-top:1px solid var(--wh-mist)}
.wh-facts>p>strong:first-child{position:absolute;left:0;top:14px;width:240px}
.wp-block-group.wh-facts>p:last-child{border-bottom:1px solid var(--wh-mist)}
.wh-facts strong{font-family:var(--wh-display);font-weight:800;font-size:22px;color:var(--wh-navy);line-height:1.3}
ol.wh-steps{list-style:none;counter-reset:s;padding:0;margin:0}
ol.wh-steps li{counter-increment:s;position:relative;padding:4px 0 20px 60px;min-height:56px}
ol.wh-steps li::before{content:counter(s);position:absolute;left:0;top:-6px;font-family:var(--wh-display);font-weight:900;font-size:50px;line-height:1;color:var(--wh-brass)}
p.wh-small{font-size:15px;color:var(--wh-muted)}
p.wh-big-link{font-family:var(--wh-display);font-weight:800;font-size:clamp(26px,3vw,34px);line-height:1.1;overflow-wrap:anywhere}
.wh-form-slot{border:2px dashed var(--wh-mist);padding:48px 32px;min-height:300px;display:flex;align-items:center;justify-content:center}
.wh-form-slot p{color:#5b6b84;font-style:italic;text-align:center;max-width:30ch;margin:0}
.wh-read h2{font-size:30px;margin-top:1.5em}
.wh-read h3{font-size:24px;margin-top:1.4em}

/* ---------- footer ---------- */
.wh-footer{background:var(--wh-night);color:#b9c6d8;padding:64px var(--wh-gutter) 40px}
.wh-footer__cta,.wh-footer__legal{max-width:var(--wh-wide);margin:0 auto;display:flex;flex-wrap:wrap;gap:24px 32px;align-items:center;justify-content:space-between}
.wh-footer__cta p{margin:0;font-family:var(--wh-display);font-weight:800;font-size:32px;line-height:1.1;color:#fff}
.wh-footer__legal{margin-top:48px;font-size:14px;line-height:1.5;color:#8193ad;align-items:flex-start}
.wh-footer__legal p{margin:0;max-width:60em}
.wh-footer__legal ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px}
.wh-footer__legal a{color:#b9c6d8}
.wh-footer__legal a:hover{color:var(--wh-brass)}

/* ---------- small screens ---------- */
@media (max-width:640px){
  body{font-size:17px}
  .wh-hero p{font-size:18px}
  .wp-block-group.wh-facts>p{padding-left:0}
  .wh-facts>p>strong:first-child{position:static;display:block;width:auto}
  .wp-block-group.wh-app{grid-template-columns:72px minmax(0,1fr);padding:22px}
  .wh-icon-slot,.wh-app .wp-block-image{width:72px;height:72px;border-radius:16px}
  .wh-nav ul{gap:0 20px}
  .wp-block-group.wh-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 16px}
  .wh-card h3{font-size:20px;overflow-wrap:anywhere}
  .wh-card p{font-size:14px}
}

/* ---------- editor: keep sections readable while editing ---------- */
.editor-styles-wrapper .wp-block-group.wh-hero{color:#dfe6f2}