/* Public header and footer (shared _PublicLayout). Loaded after site/content/storefront/discover.css so these rules win.
   Header (Public Website → Navigation Header): a white row (logo + tagline · search · Log In / Create an Account or the account controls)
   over a navy bar of six destinations. Below 900px the row keeps the logo, a search icon, the account control and the Menu button; the
   navy list and the search field open from those buttons (header-nav.js toggles .ph-open). */
/* Public palette (Teach This Way! logo, 30 Oct): deep logo navy for headings, text and the nav bar; logo pink reserved for primary
   buttons and emphasis; logo cyan for small accents; cool neutral greys for soft fills and lines. Scoped to public pages. */
body[data-page]{--navy:#0b2559;--navy-deep:#071a40;--ink:#0b2559;--fuchsia:#e6066f;--pink:#b8085c;--aqua:#00b5c8;--aqua-soft:#eef4f8;--muted:#5b6478;--line:#e3e7ee}
body[data-page] .jc-pill,body[data-page] .jc-eyebrow{background:var(--aqua);color:var(--navy-deep)}
.bl-header.ph-header{padding:0;min-height:0;border-bottom:0;background:#fff;position:relative;z-index:10}
.ph-header .ph-top{display:flex;align-items:center;gap:clamp(14px,2.4vw,36px);max-width:1320px;margin:0 auto;padding:14px 22px}
.ph-header .ph-brand{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.ph-header .ph-logo{display:block;line-height:0}
.ph-header .ph-logo img{display:block;width:152px;height:72px;object-fit:contain}
.ph-header .ph-tagline{margin:0;color:var(--navy);font:italic 500 12.5px/1.3 var(--chalk-sans,Arial,sans-serif)}
/* Search: large rounded field with a quiet grey border that turns cyan on focus; the magnifier submits. */
.ph-header .ph-search{flex:1 1 auto;display:flex;align-items:center;max-width:620px;min-width:0;height:52px;margin:0 auto;border:1.5px solid #cdd4df;border-radius:999px;background:#fff;overflow:hidden}
.ph-header .ph-search:focus-within{border-color:var(--aqua);box-shadow:0 0 0 3px #00b5c826}
.ph-header .ph-search input{flex:1;min-width:0;height:100%;padding:0 8px 0 22px;border:0;border-radius:0;background:transparent;color:var(--navy);font-size:15px}
.ph-header .ph-search input:focus{outline:none}
.ph-header .ph-search .ph-search-go{flex:none;display:grid;place-items:center;width:52px;height:100%;padding:0;border:0;border-radius:0;background:transparent;color:var(--navy)}
.ph-header .ph-search .ph-search-go:hover{color:var(--fuchsia);filter:none}
.ph-header .ph-search .ph-search-go:focus-visible{outline-offset:-4px}
/* Account controls. */
.ph-header .ph-actions{display:flex;align-items:center;gap:10px;margin-left:0;flex:none;font-size:14px}
.ph-header .ph-actions .ico{width:20px;height:20px;flex:none}
.ph-header a.ph-login,.ph-header a.ph-create,.ph-header a.ph-studio,.ph-header a.ph-school{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:8px 18px;border:2px solid var(--navy);border-radius:10px;background:#fff;color:var(--navy);font-weight:700;text-decoration:none;white-space:nowrap}
.ph-header a.ph-login:hover,.ph-header a.ph-studio:hover,.ph-header a.ph-school:hover{background:var(--aqua-soft,#eef4f8)}
.ph-header a.ph-create{border-color:var(--fuchsia);background:var(--fuchsia);color:#fff}
.ph-header a.ph-create:hover{background:#c2055e;border-color:#c2055e}
.ph-header a.ph-studio{border-color:var(--fuchsia);color:var(--fuchsia)}
.ph-header .ph-search-toggle,.ph-header .bl-menubtn.ph-burger{display:none!important;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;padding:0;border:1px solid var(--line)!important;border-radius:10px;background:#fff!important;color:var(--navy)!important}
/* Menu bar (approved design, 31 Oct): white, navy text and line icons, short grey dividers between items and a fuchsia underline on the
   current page. */
.ph-header .ph-navbar{background:#fff;color:var(--navy);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ph-header .ph-navbar ul{display:flex;justify-content:center;max-width:1320px;margin:0 auto;padding:0 12px;list-style:none}
.ph-header .ph-navbar li{display:flex;align-items:center}
.ph-header .ph-navbar li+li::before{content:"";width:1px;height:26px;background:#b9c3d3}
.ph-header .ph-navbar a{display:inline-flex;align-items:center;gap:10px;min-height:56px;padding:0 clamp(12px,1.8vw,28px);color:var(--navy);font:600 16px var(--chalk-sans,Arial,sans-serif);text-decoration:none;white-space:nowrap;box-shadow:inset 0 -4px 0 transparent}
.ph-header .ph-navbar a:hover{background:var(--aqua-soft,#eef4f8);color:var(--navy);text-decoration:none}
.ph-header .ph-navbar a[aria-current=page]{box-shadow:inset 0 -4px 0 var(--fuchsia)}
.ph-header .ph-navbar a:focus-visible{outline:3px solid var(--aqua,#00b5c8);outline-offset:-3px}
.ph-header .ph-navbar .ico{color:var(--navy);width:24px;height:24px}
.ph-header .ph-navbar .ph-nav-guest{display:none}
/* Tablet: tighter spacing; the tagline and long labels shrink. */
@media (max-width:1180px){
  .ph-header .ph-top{gap:14px}
  .ph-header a.ph-login,.ph-header a.ph-create,.ph-header a.ph-studio,.ph-header a.ph-school{padding:8px 12px}
  .ph-header .ph-navbar a{padding:0 12px;font-size:14px;gap:7px}
}
@media (max-width:1040px){
  .ph-header .ph-studio .ph-label,.ph-header .ph-school .ph-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ph-header .ph-navbar a{padding:0 9px;font-size:13.5px}
}
/* Phone / small tablet: logo, search icon, account icon (Log In), cart and Menu; the six links and guest actions open from Menu. */
@media (max-width:900px){
  .ph-header .ph-top{flex-wrap:wrap;gap:8px;padding:10px 16px}
  .ph-header .ph-tagline{display:none}
  .ph-header .ph-logo img{width:118px;height:56px}
  .ph-header .ph-actions{margin-left:auto;gap:6px}
  .ph-header .ph-search-toggle,.ph-header .bl-menubtn.ph-burger{display:inline-flex!important}
  .ph-header .ph-search{display:none;order:5;flex-basis:100%;max-width:none;height:48px;margin:4px 0 2px}
  .ph-header .ph-search.ph-open{display:flex}
  .ph-header a.ph-create{display:none}
  .ph-header a.ph-login{width:44px;min-height:44px;padding:0;justify-content:center;border-width:1px}
  .ph-header .ph-login .ph-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .ph-header a.ph-studio,.ph-header a.ph-school{width:44px;padding:0;justify-content:center}
  .ph-header .bl-profile-name{display:none}
  .ph-header .ph-navbar{display:none}
  .ph-header .ph-navbar.ph-open{display:block}
  .ph-header .ph-navbar ul{flex-direction:column;padding:6px 0 10px}
  .ph-header .ph-navbar li+li{border-left:0;border-top:1px solid var(--line)}
  .ph-header .ph-navbar li+li::before{display:none}
  .ph-header .ph-navbar a{width:100%;min-height:50px;padding:0 20px;font-size:15px;box-shadow:inset 4px 0 0 transparent}
  .ph-header .ph-navbar a[aria-current=page]{box-shadow:inset 4px 0 0 var(--fuchsia)}
  .ph-header .ph-navbar .ph-nav-guest{display:flex}
}
@media (max-width:380px){.ph-header .ph-logo img{width:102px;height:48px}.ph-header .ph-actions{gap:4px}}

/* Footer: brand + tagline + social icons, then Shop / For Educators / For Creators / About, the other policies, and the bottom line. */
footer.bl-footer.ph-footer{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr));gap:28px;padding-top:48px;padding-bottom:22px}
.ph-footer .sf-foot-brand p{font-size:14px;max-width:280px}
.ph-footer .sf-foot-social{margin-top:12px}
.ph-footer .sf-foot-social a{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#ffffff1a;color:#fff}
.ph-footer .sf-foot-social a:hover{background:var(--fuchsia)}
.ph-footer .sf-foot-col h2{color:var(--aqua)}
.ph-foot-legal{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12px}
.ph-foot-legal a{color:#b8c7d8;text-decoration:none}.ph-foot-legal a:hover{color:#fff;text-decoration:underline}
.ph-foot-bottom{grid-column:1/-1;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px 20px;padding-top:16px;border-top:1px solid #ffffff2a;color:#b8c7d8;font-size:13px}
.ph-foot-bottom p{margin:0}
.ph-heart{color:var(--fuchsia)}
@media (max-width:1000px){footer.bl-footer.ph-footer{grid-template-columns:repeat(2,minmax(0,1fr))}.ph-footer .sf-foot-brand{grid-column:1/-1}}
@media (max-width:480px){footer.bl-footer.ph-footer{grid-template-columns:1fr}}

/* Create an Account → account-type chooser (/join): two large cards, navy / aqua / fuchsia. */
.ph-join{max-width:980px;margin:0 auto;padding:56px 22px 72px;text-align:center}
.ph-join h1{margin:0;color:var(--navy);font:700 clamp(30px,4vw,44px)/1.15 Fraunces,Georgia,serif}
.ph-join-sub{margin:10px 0 34px;color:var(--muted);font-size:18px}
.ph-join-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.ph-join-card{display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 28px 30px;border:2px solid var(--line);border-top:6px solid var(--aqua,#00b5c8);border-radius:18px;background:#fff;color:var(--navy);text-decoration:none;box-shadow:0 10px 30px #0b255914;transition:transform .15s,border-color .15s}
.ph-join-card.ph-join-creator{border-top-color:var(--fuchsia)}
.ph-join-card:hover{transform:translateY(-2px);border-color:var(--aqua,#00b5c8);text-decoration:none}
.ph-join-card.ph-join-creator:hover{border-color:var(--fuchsia)}
.ph-join-ico{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--aqua-soft,#eef4f8);color:var(--navy)}
.ph-join-creator .ph-join-ico{background:#fbeef4;color:var(--fuchsia)}
.ph-join-ico .ico{width:30px;height:30px}
.ph-join-label{padding:3px 12px;border-radius:999px;background:var(--navy);color:#fff;font-size:12px;font-weight:700;letter-spacing:.4px;text-transform:uppercase}
.ph-join-name{font:700 22px/1.25 var(--chalk-sans,Arial,sans-serif)}
.ph-join-text{color:var(--muted);font-size:15.5px;max-width:340px}
.ph-join-go{margin-top:8px;padding:10px 22px;border-radius:10px;background:var(--navy);color:#fff;font-weight:700}
.ph-join-creator .ph-join-go{background:var(--fuchsia)}
.ph-join-foot{margin-top:28px;color:var(--muted)}
@media (max-width:700px){.ph-join{padding:36px 16px 48px}.ph-join-cards{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.ph-join-card{transition:none}.ph-join-card:hover{transform:none}}

/* For Educators (/for-educators): how teachers discover and buy resources, linking into the real pages. */
.ph-edu{max-width:1120px;margin:0 auto;padding:48px 22px 72px;color:var(--navy)}
.ph-edu-hero{max-width:760px}
.ph-edu-pill{display:inline-block;margin:0 0 10px;padding:4px 12px;border-radius:999px;background:var(--aqua-soft,#eef4f8);font-size:13px;font-weight:700}
.ph-edu h1{margin:0 0 12px;font:700 clamp(28px,3.6vw,42px)/1.15 Fraunces,Georgia,serif}
.ph-edu-hero p{font-size:17px;color:var(--muted)}
.ph-edu-ctas{display:flex;flex-wrap:wrap;gap:12px}
.ph-edu-btn{display:inline-flex;align-items:center;min-height:46px;padding:10px 20px;border:2px solid var(--fuchsia);border-radius:10px;background:var(--fuchsia);color:#fff;font-weight:700;text-decoration:none}
.ph-edu-btn-alt{background:#fff;color:var(--navy);border-color:var(--navy)}
.ph-edu-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:36px 0;padding:0;list-style:none}
.ph-edu-step{padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff}
.ph-edu-step h2{margin:12px 0 6px;font-size:19px}
.ph-edu-step p{margin:0 0 12px;color:var(--muted)}
.ph-edu-step a{color:var(--fuchsia);font-weight:700}
.ph-edu-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--navy);color:#fff}
.ph-edu-more{padding:26px;border-radius:16px;background:var(--aqua-soft,#eef4f8)}
.ph-edu-more h2{margin:0 0 8px;font-size:21px}
@media (max-width:900px){.ph-edu-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.ph-edu{padding:32px 16px 48px}.ph-edu-steps{grid-template-columns:1fr}}
/* Signed in: My Dashboard (icon and label, no box), then the heart, cart and profile menu (31 Oct buyer guide). */
.ph-header a.ph-dashboard{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:6px 8px;border-radius:10px;color:var(--navy);font-weight:700;text-decoration:none;white-space:nowrap}
.ph-header a.ph-dashboard:hover,.ph-header a.ph-dashboard[aria-current=page]{background:var(--aqua-soft,#eef4f8)}
.ph-header a.ph-dashboard .ico{width:24px;height:24px}
@media (max-width:1040px){.ph-header .ph-dashboard .ph-label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}.ph-header a.ph-dashboard{width:44px;justify-content:center;padding:0}}