/* S&N Training and Services: shared styles for every page.
   Page markup uses these tokens inline as var(--name). */

/* ===== Tokens ===== */
:root{
  /* Brand (locked, see README) */
  --black:#101010;        /* header, hero, dark bands, text */
  --red:#D42A2A;          /* primary CTA, prices, accents */
  --red-dark:#B02020;     /* CTA hover, error text */
  --amber:#E8A33D;        /* badges and small highlights only, never buttons */
  --amber-deep:#B87A1E;   /* outline on amber shapes so they read on white (3.6:1) */
  --paper:#F6F5F2;        /* page background, text on dark */
  --grey:#4A4D52;         /* secondary text on light */

  /* Light surfaces */
  --white:#FFFFFF;        /* cards */
  --band:#EDEBE6;         /* light bands, image placeholders */
  --line:#E4E2DD;         /* borders and dividers */
  --field-line:#C9C6BF;   /* form field and pill borders */
  --red-tint:#FDF3F3;     /* selected option background */
  --ink-soft:#2A2C30;     /* dense body text on white */

  /* Dark surfaces */
  --panel:#161616;        /* menu panels */
  --panel-card:#1F1F1F;   /* cards inside menu panels */
  --panel-line:#2E2E2E;   /* borders inside menu panels */
  --black-hover:#2A2A2A;  /* dark button hover, footer divider */
  --on-dark:#D6D4CF;      /* lead text on dark */
  --on-dark-muted:#BDBAB3;/* secondary text on dark */
  --muted:#8E8C87;        /* placeholder labels, fine print on dark */

  /* Motion */
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);     /* things arriving: menus, panels */
  --ease-drawer:cubic-bezier(0.32, 0.72, 0, 1);  /* full-screen panels */
}

/* ===== Base ===== */
/* No grey tap flash on phones (the :active states below replace it), no font inflation in landscape */
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--paper)}
a{color:var(--black)}
/* Icons sit beside text in flex rows; long text must wrap, never squash the icon */
svg{flex-shrink:0}
summary{cursor:pointer;list-style:none}summary::-webkit-details-marker{display:none}
details[open] .faq-plus{transform:rotate(45deg)}
::selection{background:var(--red);color:var(--paper)}

/* ===== Touch ===== */
/* Taps fire straight away (no double-tap-zoom wait). Controls don't select their label or pop the
   link callout on long-press; text links in body copy stay selectable. */
a,button,summary,select,label{touch-action:manipulation}
button,summary,a.btn-red,a.btn-dark,a.btn-ghost,a.btn-ghost-light,a.mnav-call,a.menuitem,a.pill,a.card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* ===== Hover states ===== */
/* Mouse only: on touch, a tapped element would keep its hover look until the next tap elsewhere */
@media (hover:hover) and (pointer:fine){
  a:hover{color:var(--red)}
  a.btn-red:hover,button.btn-red:hover{background:var(--red-dark) !important;color:var(--paper)}
  a.btn-dark:hover{background:var(--black-hover) !important;color:var(--paper)}
  a.btn-ghost:hover{background:var(--black) !important;color:var(--paper) !important}
  a.btn-ghost-light:hover,a.mnav-call:hover{background:var(--paper) !important;color:var(--black) !important}
  a.nav:hover,a.foot:hover{color:var(--amber)}
  button.navbtn:hover{color:var(--amber) !important}
  a.menuitem:hover{border-color:var(--red) !important;color:var(--paper)}
  a.crumb:hover{color:var(--paper) !important}
  a.pill:hover,button.pill:hover,a.card:hover{border-color:var(--black) !important}
  a.lnk:hover{color:var(--red) !important}
  .hdr-burger:hover{border-color:var(--paper) !important}
}

/* ===== Press states ===== */
/* Every input type: feedback the moment a finger or button goes down, not on release */
.btn-red,.btn-dark,.btn-ghost,.btn-ghost-light,.mnav-call,.hdr-burger{transition:transform 160ms var(--ease-out)}
.btn-red:active,.btn-dark:active,.btn-ghost:active,.btn-ghost-light:active,.mnav-call:active,.hdr-burger:active{transform:scale(0.97)}
a.btn-red:active,button.btn-red:active{background:var(--red-dark) !important}
a.btn-dark:active{background:var(--black-hover) !important}
a.menuitem:active{border-color:var(--red) !important}
a.pill:active,button.pill:active,a.card:active{border-color:var(--black) !important}
button.navbtn:active,a.nav:active,a.foot:active{color:var(--amber) !important}

/* ===== Keyboard and screen readers ===== */
/* Red ring with an off-white gap: visible on light, dark and red backgrounds */
:focus-visible{outline:2px solid var(--red);outline-offset:2px;box-shadow:0 0 0 2px var(--paper)}
main:focus,main:focus-visible{outline:none;box-shadow:none}
.skip{position:absolute;left:16px;top:-80px;z-index:100;background:var(--paper);color:var(--black);padding:12px 16px;border-radius:5px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
/* In-page links land below the sticky header */
html{scroll-padding-top:140px}

/* Shown only when JavaScript is off: the pages are drawn by script until the real build */
.noscript{max-width:640px;margin:48px auto;padding:0 24px;font:17px/1.6 'Work Sans',sans-serif;color:var(--black)}

/* ===== Reading ===== */
/* Body copy wraps at a comfortable line length even in full-width sections */
main p{max-width:72ch}

/* ===== Tap targets ===== */
/* Small text links get a bigger hit area without moving the layout */
.hdr-top a,footer a.foot{display:inline-block;padding:6px 0;margin:-6px 0}
a.crumb{display:inline-block;padding:13px 0;margin:-13px 0}
@media (pointer:coarse){
  footer a.foot{display:flex;align-items:center;min-height:44px;padding:0;margin:0}
  footer span > a.foot{display:inline-flex}
}

/* ===== Header ===== */
/* Below 1200px the menus move into a full-screen panel */
.hdr-burger{display:none}
.hdr-burger svg{flex:0 0 auto}
.mnav{display:none}
/* Menu panels drop in from the header on open and close instantly
   (the page runtime removes them straight away, so exits can't animate) */
.hdr-drop{transition:opacity 200ms var(--ease-out),transform 200ms var(--ease-out)}
@starting-style{.hdr-drop{opacity:0;transform:translateY(-8px)}}
@media (max-width:1199px){
  html{scroll-padding-top:88px}
  .hdr{height:72px !important;margin-bottom:-72px !important}
  .hdr-top{display:none}
  .hdr-row{flex-wrap:nowrap !important;padding:10px 20px !important;gap:12px !important}
  .hdr-logo{min-width:0;flex:0 1 auto}
  .hdr-logo img{height:46px !important;max-width:100%;object-fit:contain;object-position:left center}
  .hdr-nav{flex:0 0 auto;flex-wrap:nowrap !important;gap:8px !important}
  .hdr-nav .btn-red{white-space:nowrap}
  .hdr-nav .navbtn{display:none !important}
  .hdr-burger{display:inline-flex}
  .hdr-drop{display:none !important}
  .mnav{display:block;position:fixed;top:72px;left:0;right:0;bottom:0;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);border-top:1px solid rgba(246,245,242,0.12);transition:opacity 240ms var(--ease-drawer),transform 240ms var(--ease-drawer)}
  @starting-style{.mnav{opacity:0;transform:translateY(-12px)}}
  .hero-pad{padding-top:112px !important}
}
@media (max-width:480px){
  .hdr-row{padding:10px 16px !important}
  .hdr-logo img{height:40px !important}
  .hdr-nav .btn-red{padding:0 14px !important}
  .hero-pad{padding-left:16px !important;padding-right:16px !important}
}
@media (max-width:359px){
  .hdr-burger .burger-txt{display:none}
}

/* ===== Page patterns ===== */
/* Exam table (course pages): one row per exam; on phones each row becomes a small block */
.exams{width:100%;max-width:880px;border-collapse:separate;border-spacing:0;background:var(--white);border:1px solid var(--line);border-radius:6px;font-size:15px;font-variant-numeric:tabular-nums}
.exams th,.exams td{padding:14px 18px;text-align:left;vertical-align:baseline;border-top:1px solid var(--line)}
.exams thead th{border-top:0;padding-bottom:10px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:var(--grey)}
.exams tbody th{font-weight:500;color:var(--black)}
.exams td{white-space:nowrap;color:var(--ink-soft)}
.exams td span{font-size:13px;color:var(--grey)}
@media (max-width:600px){
  .exams thead{display:none}
  .exams,.exams tbody,.exams tr{display:block}
  .exams tr{padding:14px 16px;border-top:1px solid var(--line)}
  .exams tbody tr:first-child{border-top:0}
  .exams th,.exams td{padding:0;border:0}
  .exams tbody th{display:block;margin-bottom:6px}
  .exams td{display:inline-block;margin-right:16px;font-size:14px}
  .exams td::before{content:attr(data-label) " ";color:var(--grey)}
}
/* Review rating: amber stars with a deeper amber edge, so the shapes hold up on white cards */
.stars{display:block;flex:0 0 auto}
.stars path{fill:var(--amber);stroke:var(--amber-deep);stroke-width:1.5;stroke-linejoin:round}
.nowrap{white-space:nowrap}
footer a.foot{text-decoration:none}

/* Homepage reviews: the intro stays in view beside the long ProTrainings widget */
@media (min-width:900px){
  .rev-intro{position:sticky;top:140px}
}
/* The ProTrainings script draws its reviews iframe at a fixed 465px; on phones that pushed
   the whole page sideways. Let it shrink to the column instead. */
.pt-reviews{max-width:100%}
.pt-reviews iframe{max-width:100% !important}

/* Course dates filter bar sits under the header; on phones and tablets it is too tall to pin */
@media (max-width:1199px){
  .cd-filters{top:72px !important}
}
@media (max-width:1023px){
  .cd-filters{position:static !important}
}

/* Date rows on tablets: one line of date, course, price and Book now, so Book now
   never wraps onto a line of its own. The places tag (course dates) sits under the name. */
@media (min-width:601px) and (max-width:1023px){
  .drow{display:grid !important;grid-template-columns:auto minmax(0,1fr) auto auto;column-gap:24px !important;row-gap:6px !important;align-items:center !important}
  .drow-date{grid-column:1;grid-row:1;width:76px}
  .drow-info{grid-column:2;grid-row:1}
  .drow-price{grid-column:3;grid-row:1}
  .drow-book{grid-column:4;grid-row:1}
  .drow-more{display:none !important}
  .drow-tag{grid-column:2;grid-row:2;justify-self:start}
  .drow:has(.drow-tag) .drow-date,.drow:has(.drow-tag) .drow-price,.drow:has(.drow-tag) .drow-book{grid-row:1 / span 2}
}

/* Date rows (homepage, course dates, location pages): on phones the date sits beside
   the course name, with price and Book now on one line below */
@media (max-width:600px){
  .drow{display:grid !important;grid-template-columns:auto 1fr auto;gap:12px 14px !important;padding:16px !important;align-items:center !important}
  .drow-date{grid-column:1;grid-row:1;align-self:start;width:60px;padding:6px 0 !important}
  .drow-date span:nth-child(2){font-size:26px !important}
  .drow-info{grid-column:2 / -1;grid-row:1}
  .drow-info h3{font-size:22px !important}
  .drow-tag{grid-column:2 / -1;grid-row:2;justify-self:start}
  .drow-price{grid-column:1 / 3;align-items:flex-start !important;min-width:0 !important}
  .drow-book{grid-column:3;justify-self:end}
  /* The course name already links to the course page */
  .drow-more{display:none !important}
}

/* ===== Reduced motion: state changes stay, the movement goes ===== */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [style*="transition"]{transition:none !important}
  /* Menu panels still fade in, without the drop */
  .hdr-drop,.mnav{transition:opacity 150ms ease-out !important;transform:none !important}
  /* Buttons keep their colour change on press, without the shrink */
  .btn-red,.btn-dark,.btn-ghost,.btn-ghost-light,.mnav-call,.hdr-burger{transform:none !important}
}