/* Given for Wonder — shared site header, footer and section heading.
   The one copy of these styles. The website loads it, and so does the
   Weekly Rhythm app (from https://given-for-wonder.netlify.app/shared/site-chrome.css).
   Uses the house tokens, with fallbacks so it also works on its own. */

.site-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:28px;max-width:816px;margin:auto;padding:22px 28px}  /* 760px inside, the same column as every page */
.site-header .brand{display:flex;align-items:center;gap:11px;color:var(--ink,#2d2b26);text-decoration:none;font-family:var(--ui);font-size:var(--navigation-size,1rem);font-weight:500;font-style:normal}
.site-header .brand img{width:48px;height:42px;object-fit:cover;object-position:center}
.site-header .brand span{font-family:var(--ui);font-size:1.25rem;font-weight:400;font-style:normal;color:var(--soft,#514c44)}

/* Menu: Read, Ponder, Weekly Rhythm, then About and Support in a quieter tone.
   On every screen size the links sit behind a quiet hamburger icon; on phones they
   open as a list between divider lines, on computers as a narrow list under the icon.
   Without JavaScript the links simply stay visible in a row. */
.site-header nav{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:0;font-family:var(--ui);font-size:var(--navigation-size,1rem);font-style:normal}
.site-header nav a{padding:7px 0;border-bottom:1px solid transparent;color:var(--ink,#2d2b26);text-decoration:none;font-family:var(--ui);font-size:var(--navigation-size,1rem);font-style:normal}
.site-header nav a.nav-quiet{color:var(--muted,#625c53)}
.site-header nav a:hover,.site-header nav a:focus{border-color:var(--green,#4f6249)}
.menu-toggle{display:none}
.menu-toggle .icon-close,.menu-toggle[aria-expanded="true"] .icon-open{display:none}
.menu-toggle[aria-expanded="true"] .icon-close{display:inline}
.js .menu-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-1px -10px -1px 0;padding:0;border:0;border-radius:8px;background:none;color:var(--ink,#2d2b26);cursor:pointer}
.js .menu-toggle svg{width:1.5rem;height:1.5rem}
@media(hover:hover){.js .menu-toggle:hover{background:rgba(89,108,82,.08)}}
.js .site-header nav{display:none}
.js .site-header.menu-open nav{display:flex;flex-direction:column}
.js .site-header.menu-open nav a{padding:14px 2px;border-bottom:1px solid var(--line,#d7cdbd)}
.js .site-header.menu-open nav a:hover,.js .site-header.menu-open nav a:focus-visible{color:var(--green,#4f6249)}
@media(min-width:721px){
  .js .site-header.menu-open nav{position:absolute;z-index:20;top:calc(100% - 12px);right:28px;width:240px;padding:2px 16px;border:1px solid var(--line,#d7cdbd);border-radius:12px;background:var(--paper,#f4efe5);box-shadow:0 10px 28px rgba(68,57,43,.10)}
  .js .site-header.menu-open nav a:last-child{border-bottom:0}
}

/* Space kept for the header while it loads on pages that borrow it */
[data-site-header]{min-height:86px}

@media(max-width:720px){
  .site-header{display:block;padding:17px 20px 8px}
  .site-header .brand{margin-bottom:8px}
  .site-header .brand img{width:43px;height:38px}
  .site-header nav{width:100%;justify-content:flex-start;column-gap:18px}
  .site-header nav a{padding:9px 1px}
  .js .site-header{display:flex;flex-wrap:wrap;gap:0;padding:17px 20px}
  .js .site-header .brand{margin-bottom:0}
  .js .menu-toggle{margin:0 -10px 0 0}
  .js .site-header.menu-open nav{width:100%;margin-top:12px;border-top:1px solid var(--line,#d7cdbd)}
  [data-site-header]{min-height:78px}
}

.site-footer{padding:45px 20px 56px;border-top:1px solid var(--line,#d7cdbd);text-align:center;color:var(--muted,#625c53);font-family:var(--ui);font-size:var(--secondary-size,.9rem);font-style:normal}
.site-footer img{width:65px;height:48px;object-fit:cover}
.site-footer p{margin:3px}
.site-footer .copyright{margin-top:12px;font-size:.875rem}

/* Section heading: a brush stroke and the section name, with one short line
   beneath (Read, Ponder and the Weekly Rhythm app). The short line folds away
   when you scroll down and comes back at the top (see site-chrome.js). */
.index-head{display:grid;gap:2px;padding:0 8px}
.index-head .index-title{margin:0;font:500 var(--navigation-size,1rem)/1.3 var(--ui);letter-spacing:0;color:var(--ink,#2d2b26)}
.index-head .index-lede{margin:0;padding-left:18px;max-height:6em;overflow:hidden;font:400 var(--navigation-size,1rem)/1.5 var(--ui);color:var(--soft,#514c44);transition:opacity .25s ease,max-height .25s ease}
.index-head.scrolled .index-lede{max-height:0;opacity:0}
.stroke{display:flex;align-items:center;gap:10px}
.stroke::before{content:"";flex:none;width:8px;height:1.35em;background:center/100% 100% no-repeat;opacity:.9}
.stroke-orange::before{background-image:url("/assets/stroke-orange.png")}
.stroke-gold::before{background-image:url("/assets/stroke-gold.png")}
.stroke-blue::before{background-image:url("/assets/stroke-blue.png")}
@media(max-width:720px){.index-head{padding:0 4px}}
@media(prefers-reduced-motion:reduce){.index-head .index-lede{transition:none}}