/* ==========================================================================
   PRESSURE TRAINING - LAYOUT AND COMPONENTS

   You should not normally need to edit this file.
   To change wording, open content.js.
   To change colours, open css/themes.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. SIZES USED IN MORE THAN ONE PLACE
   -------------------------------------------------------------------------- */
:root{
  --bar-h: 82px;          /* height of the white bar across the top */
  --nav-breakpoint: 1180px; /* below this width the burger menu takes over */

  /* Text colours that stay the same in every colour scheme */
  --body: #4a5b6b;
  --muted: #5a6b7b;
  --body-strong: #1d2733;

  /* Softened versions of the four accent colours, worked out automatically */
  --c1-bg2: color-mix(in oklab, var(--c1) 15%, white);
  --c1-bd2: color-mix(in oklab, var(--c1) 42%, white);
  --c2-bg2: color-mix(in oklab, var(--c2) 13%, white);
  --c2-bd2: color-mix(in oklab, var(--c2) 38%, white);
  --c3-bg2: color-mix(in oklab, var(--c3) 16%, white);
  --c3-bd2: color-mix(in oklab, var(--c3) 45%, white);
  --c4-bg2: color-mix(in oklab, var(--c4) 15%, white);
  --c4-bd2: color-mix(in oklab, var(--c4) 42%, white);
}


/* --------------------------------------------------------------------------
   2. PAGE BASICS
   -------------------------------------------------------------------------- */
*{ box-sizing: border-box }
html{ scroll-behavior: smooth }

body{
  margin: 0;
  padding-top: var(--bar-h);   /* leaves room for the fixed top bar */
  background: #ffffff;
  color: var(--body-strong);
  font-family: var(--font-body), Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4{ font-family: var(--font-display), Helvetica, Arial, sans-serif; margin: 0 }
p, ul, ol{ margin: 0 }
a{ color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px }
a:hover{ color: var(--brand) }
input, textarea, select, button{ font: inherit; color: inherit }
img{ max-width: 100% }

/* Icon font. Any <span class="msr">home</span> becomes a little icon. */
.msr{
  font-family: 'Material Symbols Rounded';
  font-variation-settings: 'wght' 250;
  line-height: 1;
  font-size: 20px;
  display: inline-block;
  vertical-align: middle;
}


/* --------------------------------------------------------------------------
   3. THE TOP BAR
   -------------------------------------------------------------------------- */
#site-header{
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: #ffffff;
  border-bottom: 1px solid var(--card-bd);
  box-shadow: 0 2px 10px rgba(16, 36, 64, .06);
}

.pt-bar{
  max-width: 1160px; margin: 0 auto; padding: 0 22px;
  height: var(--bar-h);
  display: flex; align-items: center; gap: 18px; flex-wrap: nowrap;
}

/* The navy logo tab, flush to the left edge of the window.
   IMPORTANT: its height is pinned to the top bar. It used to be stretched
   with "bottom: -1px", which made it grow down over the mobile menu and
   hide every link in it. Do not put "bottom" back on this rule. */
.pt-tab{
  position: absolute; left: 0; top: 0;
  height: var(--bar-h);
  display: grid; place-items: center;
  padding: 0 10px;
  background: var(--brand);
  text-decoration: none;
  z-index: 2;
}
.pt-tab-logo{ height: 70px; width: auto; display: block }

/* Invisible spacer that reserves room for the logo tab inside the bar. */
.pt-tab-space{
  flex: 0 0 auto;
  width: clamp(0px, 208px - max(0px, (100vw - 1160px) / 2), 230px);
}


/* --------------------------------------------------------------------------
   4. DESKTOP NAVIGATION
   -------------------------------------------------------------------------- */
.pt-nav{
  flex: 1 1 auto; min-width: 0;
  display: flex; justify-content: flex-start; gap: 4px;
  overflow-x: auto; overflow-y: hidden; padding: 2px 0;
  scrollbar-width: none; -ms-overflow-style: none;
}
.pt-nav::-webkit-scrollbar{ display: none; height: 0 }

.pt-nav-link{
  font-size: 14px; font-weight: 600;
  text-decoration: none; white-space: nowrap; flex: 0 0 auto;
  padding: 8px 12px; border-radius: 8px;
  color: var(--muted);
  background: transparent;
  border: 1px solid transparent;
}
.pt-nav-link:first-child{ margin-left: auto }
.pt-nav-link:hover{ color: var(--brand) }

/* The section you are currently looking at */
.pt-nav-link.is-active{
  font-weight: 700;
  color: var(--brand);
  background: var(--accent-tint);
  border-color: var(--accent-tint-bd);
}

.pt-cta{
  flex: 0 0 auto;
  background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: 14px;
  padding: 12px 18px; border-radius: 9px;
  text-decoration: none; white-space: nowrap;
}
.pt-cta:hover{ background: var(--accent-dk); color: var(--on-accent) }

/* Colour scheme picker. Hidden by default (see content.js). */
.pt-theme{
  flex: 0 0 auto; display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 600; color: var(--muted);
}
.pt-theme .msr{ font-size: 19px; color: var(--accent-ink) }
.pt-theme select{
  border: 1px solid var(--card-bd); background: #ffffff; border-radius: 8px;
  padding: 8px 9px; font-size: 13px; font-weight: 600;
  color: var(--brand); max-width: 150px;
}
.pt-theme[hidden]{ display: none }


/* --------------------------------------------------------------------------
   5. BURGER MENU
   -------------------------------------------------------------------------- */
.pt-burger{
  flex: 0 0 auto; margin-left: auto;
  display: none;                     /* switched on by the media query below */
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--card-bd); border-radius: 10px;
  background: #ffffff; cursor: pointer;
}
.pt-burger .msr{ font-size: 26px; color: var(--brand) }
.pt-burger:hover{ border-color: var(--accent) }
.pt-burger[aria-expanded="true"]{
  background: var(--brand); border-color: var(--brand);
}
.pt-burger[aria-expanded="true"] .msr{ color: #ffffff }

/* The drop-down panel.
   It is deliberately the dark brand colour so it is obvious at a glance that
   this is a menu floating over the page rather than part of the page.
   Every colour in it comes from the active colour scheme, so it works
   correctly in all four schemes. */
.pt-panel{
  display: none;                     /* opened by adding .is-open */
  gap: 6px;
  padding: 12px 16px 18px;
  background: var(--brand);
  border-top: 3px solid var(--accent);
  max-height: calc(100vh - var(--bar-h));
  overflow-y: auto;
  box-shadow: 0 26px 46px rgba(11, 32, 54, .40);
}
.pt-panel.is-open{ display: grid }

.pt-panel-link{
  display: flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600;
  color: #ffffff; text-decoration: none;
  padding: 13px 14px; border-radius: 9px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid var(--brand-hair);
}
.pt-panel-link .msr{ color: var(--accent-lt); font-size: 20px }
.pt-panel-link:hover,
.pt-panel-link:focus-visible{
  background: rgba(255, 255, 255, .16);
  border-color: var(--accent);
  color: #ffffff;
}
.pt-panel-link.is-active{
  background: rgba(255, 255, 255, .16);
  border-color: var(--accent);
}

.pt-panel-cta{
  margin-top: 6px;
  background: var(--accent); color: var(--on-accent);
  font-weight: 800; font-size: 15px;
  padding: 14px 16px; border-radius: 9px;
  text-decoration: none; text-align: center;
}
.pt-panel-cta:hover{ background: var(--accent-lt); color: var(--on-accent) }

/* Dimmed backdrop. Tapping it closes the menu. */
.pt-scrim{
  position: fixed; inset: var(--bar-h) 0 0 0; z-index: 50;
  background: rgba(11, 32, 54, .34);
  border: 0;
}
.pt-scrim[hidden]{ display: none }

/* Below the breakpoint: hide the desktop nav, show the burger. */
@media (max-width: 1179px){
  .pt-nav, .pt-cta{ display: none }
  .pt-burger{ display: grid }
}
/* At or above the breakpoint the panel can never be open. */
@media (min-width: 1180px){
  .pt-panel, .pt-panel.is-open, .pt-scrim{ display: none }
}

@media (max-width: 560px){
  .pt-tab{ padding: 0 8px }
  .pt-tab-logo{ height: 52px }
  .pt-tab-space{ width: 150px }
  .pt-bar{ gap: 10px; padding: 0 16px }
}


/* --------------------------------------------------------------------------
   6. EXPANDING PANELS (the "+" boxes)
   -------------------------------------------------------------------------- */
summary{ cursor: pointer; list-style: none }
summary::-webkit-details-marker{ display: none }
summary::after{
  content: "+";
  float: right; margin-left: 12px;
  font-family: var(--font-display), sans-serif;
  font-weight: 700; color: var(--accent); font-size: 22px; line-height: 1;
}
details[open] > summary::after{ content: "\2013" }

/* The two "Inside a session" cards.
   They get the same 5px coloured cap as the course cards further down the
   page, so they read as proper cards rather than plain grey boxes. */
.pt-session-card{
  background: #ffffff;
  border: 1px solid var(--card-bd);
  border-top: 5px solid var(--c1);
  border-radius: 16px;
  padding: 26px 28px;
  box-shadow: 0 16px 34px rgba(16, 36, 64, .13);
}
.pt-session-c3{ border-top-color: var(--c3) }

.pt-session-summary{
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-display), sans-serif;
  font-size: 19px; font-weight: 700; color: var(--brand);
}

/* On a normal computer screen these two are open and stay open, so nothing
   important is hidden behind a click. The "+" only appears on small screens,
   where collapsing them saves a lot of scrolling. */
@media (min-width: 900px){
  .pt-session-card > summary{ cursor: default }
  /* The [open] part is needed so this beats the details[open] rule above,
     which is otherwise more specific and would put the "-" back. */
  .pt-session-card[open] > summary::after,
  .pt-session-card > summary::after{ content: none }
}


/* --------------------------------------------------------------------------
   HOVER EFFECTS
   Each rule fires when the mouse is over an element carrying the matching
   data-hv="..." attribute.
   -------------------------------------------------------------------------- */
[data-hv="hv-1"]:hover{background:var(--accent-lt)}
[data-hv="hv-2"]:hover{border-color:var(--accent)}
[data-hv="hv-3"]:hover{background:var(--accent-dk)}
[data-hv="hv-4"]:hover{color:#ffffff}
[data-hv="hv-5"]:hover{color:var(--accent)}

/* --------------------------------------------------------------------------
   SMALL TEXT STYLES
   Used by the <span class="t.."> and <b class="t.."> tags that appear
   inside some of the wording in content.js. They control things like
   "make this bit smaller" or "give this a dotted underline".
   -------------------------------------------------------------------------- */
.t1{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--c1-bg);display:grid;place-items:center}
.t2{font-size:15.5px;color:#ffffff;line-height:1.5}
.t3{font-weight:700}
.t4{color:var(--on-brand-soft)}
.t5{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--c3-bg);display:grid;place-items:center}
.t6{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--c4-bg);display:grid;place-items:center}
.t7{border-bottom:1px dotted var(--accent)}
.t8{flex:0 0 auto;width:46px;height:46px;border-radius:12px;background:#ffffff;display:grid;place-items:center}
.t9{display:flex;flex-direction:column}
.t10{font-size:14px;color:var(--body)}
.t11{font-family:var(--font-display),sans-serif;font-size:23px;font-weight:800;color:var(--brand);line-height:1.15;border-bottom:1px dotted var(--accent);align-self:flex-start}
.t12{font-family:var(--font-display),sans-serif;font-size:23px;font-weight:800;color:var(--brand);line-height:1.15}
.t13{display:block;width:48px;height:3px;border-radius:2px;background:var(--accent)}
.t14{display:grid;place-items:center;width:86px;height:86px;border-radius:50%;border:1.5px solid var(--accent);margin-bottom:18px}
.t15{display:block;width:38px;height:3px;border-radius:2px;background:var(--accent);margin-bottom:18px}
.t16{flex:0 0 auto;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--brand);color:#ffffff;font-size:14px}
.t17{text-align:left;line-height:1.4}
.t18{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;border:1.5px solid rgba(255,255,255,.45);margin-bottom:18px}
.t19{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--c1);flex:0 0 auto}
.t20{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent-tint);color:var(--accent-ink);padding:5px 11px;border-radius:20px}
.t21{font-size:13.5px;font-weight:600;color:var(--muted)}
.t22{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--c3);flex:0 0 auto}
.t23{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--c3-bg);color:var(--c3-ink);padding:5px 11px;border-radius:20px}
.t24{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--c2);flex:0 0 auto}
.t25{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid var(--c4);flex:0 0 auto}
.t26{display:grid;place-items:center;width:54px;height:54px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);flex:0 0 auto}
.t27{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;background:var(--accent);color:var(--on-accent);padding:5px 11px;border-radius:20px}
.t28{font-size:13.5px;font-weight:600;color:var(--on-brand-mute)}
.t29{flex:0 0 auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1.5px solid var(--accent)}
.t30{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--c1)}
.t31{flex:0 0 auto;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1.5px solid var(--c3)}
.t32{color:var(--on-brand-mute)}
.t33{font-weight:600;text-align:right}
.t34{font-weight:600;text-align:right;border-bottom:1px dotted var(--accent)}
.t35{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--c2);margin-bottom:16px}
.t36{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--c3);margin-bottom:16px}
.t37{border-bottom:2px dotted var(--accent)}
.t38{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--c4);margin-bottom:16px}
.t39{background:var(--accent-tint);border:1px solid var(--accent-tint-bd);border-radius:20px;padding:7px 14px;font-size:14.5px;font-weight:600;color:var(--brand)}
.t40{position:absolute;inset:0;display:grid;place-items:center;background:rgba(31,45,61,.42)}
.t41{font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#ffffff;background:rgba(17,26,36,.85);padding:9px 16px;border-radius:8px;transform:rotate(-6deg)}
.t42{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;border:1.5px solid var(--c1);margin-bottom:16px}
.t43{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--muted);background:#ffffff;border:1px solid var(--card-bd);border-radius:8px;padding:8px 0}
.t44{flex:1;text-align:center;font-size:12px;font-weight:700;color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);border-radius:8px;padding:8px 0}
.t45{text-align:center;font-size:13px;font-weight:700;color:var(--brand);background:#ffffff;border:1.5px solid var(--brand-hair);border-radius:8px;padding:11px 0}