/* Designed and developed by Nodix, a division of FTK Technologies, ftktechnologies@gmail.com */
/* FACHS BRAND CSS. One file for every FACHS site (Group, School, College, Advisory, Insurance, Training).
   Master copy: Brand/brand.css. Change it there, then copy it into each site as brand.css. Style guide: Brand/brand-guide.html.
   Part 1 is the tokens: colours, type, scale, radius. Part 2 is the base styles: body, headings, text, links, buttons, menu links, forms.
   A site's own style.css only does layout. It never sets its own font, font-size, heading, link, button or form look. */
:root {
  /* Blues */
  --fachs-navy-900: #181f3f;   /* brand sheet Navy Blue, RGB 24 31 63 */
  --fachs-navy-700: #2f3059;   /* college headings and panels */
  --fachs-blue-600: #30318b;   /* training and advisory brand blue */
  /* Night: one tonal scale built from the brand navy (#181f3f). 900 is the hero ground; go lighter for panels, borders and tints, darker for deep grounds. */
  --fachs-night-950: #0c1327;
  --fachs-night-900: #181f3f;
  --fachs-night-800: #212f59;
  --fachs-night-700: #314172;
  --fachs-night-600: #455892;
  --fachs-night-500: #6276b2;
  --fachs-night-400: #909fcb;
  --fachs-night-300: #b9c2df;
  --fachs-night-200: #dbe0f0;
  --fachs-night-100: #edf0f8;
  --fachs-night-50:  #f6f7fb;
  /* Crimson: the action colour. Buttons, links on light grounds, the logo flash. Official brand sheet (9 Nov 2026): Purple #970E38, Navy #181F3F. */
  --fachs-crimson-600: #970e38; /* brand sheet Purple, RGB 151 14 56 */
  --fachs-crimson-700: #7d0c2e;
  /* Sky: sparing highlight, and links on dark grounds (6:1 on navy-900) */
  --fachs-sky-500: #26a8e0;
  /* Neutrals */
  --fachs-ink: #3a3a3a;
  --fachs-paper: #f9f9f9;
  --fachs-white: #ffffff;
  /* Type: Open Sans is on all four sampled sites. Montserrat is the school's heading face
     and sits closest to the Varela Round and Poppins the other sites use. */
  --fachs-font-head: "Montserrat", "Varela Round", system-ui, sans-serif;
  --fachs-font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fachs-font-code: var(--fachs-font-head);   /* small labels in capitals use the heading face; no third typeface */
  /* Type scale: seven sizes for every FACHS site. Set no font-size outside these.
     The names are WordPress theme.json font-size slugs (x-small to xxx-large). In a WordPress theme, theme.json (fachs-theme.json
     in this folder) sets --wp--preset--font-size--* and these tokens follow it; on a static site the clamp() fallback applies.
     Each size grows with screen width; the larger ones are also capped by screen height so they fit a short laptop. */
  --fachs-font-size-x-small:   var(--wp--preset--font-size--x-small, clamp(.75rem, .73rem + .05vw, .8125rem));               /* 12–13px  captions, labels in capitals, dates, fine print, footer and legal links */
  --fachs-font-size-small:     var(--wp--preset--font-size--small, clamp(.875rem, .85rem + .1vw, .9375rem));                   /* 14–15px  card text, job titles, form labels, menus, tables, secondary lines */
  --fachs-font-size-medium:    var(--wp--preset--font-size--medium, clamp(1rem, .97rem + .1vw, 1.0625rem));               /* 16–17px  body text, buttons, form fields (never below 16px, so iOS does not zoom) */
  --fachs-font-size-large:     var(--wp--preset--font-size--large, clamp(1.0625rem, 1rem + .25vw, 1.25rem)); /* 17–20px  lead paragraph under a heading, card titles, FAQ questions, names */
  --fachs-font-size-x-large:   var(--wp--preset--font-size--x-large, clamp(1.25rem, min(1.05rem + .7vw, 3.2vh), 1.625rem));        /* 20–26px  sub-headings (h3), pop-up titles */
  --fachs-font-size-xx-large:  var(--wp--preset--font-size--xx-large, clamp(1.5rem, min(1.1rem + 1.6vw, 5vh), 2.375rem));    /* 24–38px  section headings (h2); the h1 of inner pages (grade, phase, about, fees, legal) */
  --fachs-font-size-xxx-large: var(--wp--preset--font-size--xxx-large, clamp(1.875rem, min(1rem + 3vw, 7vh), 3.25rem));      /* 30–52px  the home page h1 only */
  /* Line height and letter spacing that go with the sizes */
  --fachs-line-height-tight: 1.1;   /* h1, h2 */
  --fachs-line-height-snug:  1.3;   /* h3, card titles, labels */
  --fachs-line-height-body:  1.55;  /* paragraphs */
  --fachs-letter-spacing-display: -.015em; /* h1, h2 */
  --fachs-letter-spacing-caps:    .08em;   /* small labels in capitals */
  /* One radius system */
  --fachs-radius: 6px;

  /* Supporting colours (11 Nov 2026). Built from the brand pair, used for panels, borders, text on white and states. */
  /* Greys: neutral scale. 700 is the body ink. 500 is large text and icons only; use 600 or darker for small text. */
  --fachs-grey-50:  #f9f9f9;
  --fachs-grey-100: #f1f1f1;
  --fachs-grey-200: #e3e3e3;
  --fachs-grey-300: #cfcfcf;
  --fachs-grey-400: #a8a8a8;
  --fachs-grey-500: #7d7d7d;
  --fachs-grey-600: #5c5c5c;
  --fachs-grey-700: #3a3a3a;
  --fachs-grey-800: #262626;
  --fachs-grey-900: #141414;
  /* Purple shades: 600 is the brand purple. Light shades for tints and hover grounds, dark shades for pressed states. */
  --fachs-crimson-50:  #fbf1f4;
  --fachs-crimson-100: #f4dde4;
  --fachs-crimson-200: #e6b5c4;
  --fachs-crimson-300: #cf7f98;
  --fachs-crimson-400: #b34868;
  --fachs-crimson-800: #5f0923;
  --fachs-crimson-900: #430619;
  /* Sky shades: links on dark grounds and focus rings. */
  --fachs-sky-100: #e4f4fb;
  --fachs-sky-300: #86cdee;
  --fachs-sky-700: #1479a6;
  /* States, for forms and notices only. Always paired with text or an icon, never colour alone. */
  --fachs-success: #1e7a46;
  --fachs-warning: #9a5b00;
  --fachs-danger:  #b3261e;
  /* Role aliases: use these in components so the meaning stays clear. */
  --fachs-surface:       var(--fachs-white);
  --fachs-surface-alt:   var(--fachs-night-50);
  --fachs-border:        var(--fachs-night-200);
  --fachs-border-strong: var(--fachs-night-400);
  --fachs-text:          var(--fachs-ink);
  --fachs-text-muted:    var(--fachs-grey-600);
  --fachs-heading:       var(--fachs-navy-900);
  --fachs-action:        var(--fachs-crimson-600);
  --fachs-action-hover:  var(--fachs-crimson-700);
}

/* ============ PART 2: BASE STYLES. Identical on every site. ============ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--fachs-font-body); font-size: var(--fachs-font-size-medium); line-height: var(--fachs-line-height-body); color: var(--fachs-ink); background: var(--fachs-white); overflow-wrap: break-word; }
img { max-width: 100%; height: auto; }
/* Headings: h1 home page title, h2 section, h3 sub-section and card title, h4 small title. Same size on every site. */
h1, h2, h3, h4, h5, h6 { font-family: var(--fachs-font-head); color: var(--fachs-navy-900); margin: 0; text-transform: none; }
h1 { font-size: var(--fachs-font-size-xxx-large); line-height: var(--fachs-line-height-tight); letter-spacing: var(--fachs-letter-spacing-display); font-weight: 800; }
h2 { font-size: var(--fachs-font-size-xx-large); line-height: var(--fachs-line-height-tight); letter-spacing: var(--fachs-letter-spacing-display); font-weight: 800; }
h3 { font-size: var(--fachs-font-size-x-large); line-height: var(--fachs-line-height-snug); letter-spacing: 0; font-weight: 700; }
h4 { font-size: var(--fachs-font-size-large); line-height: var(--fachs-line-height-snug); letter-spacing: 0; font-weight: 700; }
h5 { font-size: var(--fachs-font-size-medium); line-height: var(--fachs-line-height-snug); letter-spacing: 0; font-weight: 700; }
h6 { font-size: var(--fachs-font-size-small); line-height: var(--fachs-line-height-snug); letter-spacing: 0; font-weight: 700; }
h3 a, h4 a { color: inherit; text-decoration: none; }
h3 a:hover, h4 a:hover { color: var(--fachs-crimson-600); }
p { margin: 0 0 1em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--fachs-font-size-large); line-height: var(--fachs-line-height-body); }
small, .small { font-size: var(--fachs-font-size-small); }
a { color: var(--fachs-crimson-600); text-underline-offset: 3px; }
a:hover { color: var(--fachs-crimson-700); }
:focus-visible { outline: 3px solid var(--fachs-sky-500); outline-offset: 2px; }
address { font-style: normal; }
/* Buttons: ONE button for every site and every use. Purple, 6px corners, Open Sans bold 16px. */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .8rem 1.4rem; border: 2px solid var(--fachs-crimson-600); border-radius: var(--fachs-radius); background: var(--fachs-crimson-600); color: var(--fachs-white); font: 700 var(--fachs-font-size-medium)/1.2 var(--fachs-font-body); letter-spacing: 0; text-transform: none; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
.btn:hover { background: var(--fachs-crimson-700); border-color: var(--fachs-crimson-700); color: var(--fachs-white); }
.btn:active { transform: translateY(1px); }
.btn--line { background: transparent; color: var(--fachs-crimson-600); }
.btn--line:hover { background: var(--fachs-crimson-600); border-color: var(--fachs-crimson-600); color: var(--fachs-white); }
.btn--small { padding: .55rem 1rem; font-size: var(--fachs-font-size-small); }
/* On a navy ground the button stays purple, the outline button turns white. */
.on-dark .btn--line, .section--navy .btn--line, .hero .btn--line, .band .btn--line, .cta .btn--line { color: var(--fachs-white); border-color: var(--fachs-white); }
.on-dark .btn--line:hover, .section--navy .btn--line:hover, .hero .btn--line:hover, .band .btn--line:hover, .cta .btn--line:hover { background: var(--fachs-white); color: var(--fachs-navy-900); }
/* Menu links: 14 to 15px, semibold, navy; purple underline on hover and on the current page. */
.nav > a:not(.btn), .nav__item > button { font-family: var(--fachs-font-body); font-weight: 600; font-size: var(--fachs-font-size-small); letter-spacing: 0; text-transform: none; color: var(--fachs-navy-900); text-decoration: none; }
.nav > a:not(.btn):hover, .nav > a[aria-current="page"], .nav__item > button:hover, .nav__item.is-active > button { color: var(--fachs-navy-900); }
/* Forms: one look. */
label { font-weight: 600; font-size: var(--fachs-font-size-small); color: var(--fachs-navy-900); }
input, select, textarea { font: var(--fachs-font-size-medium)/1.4 var(--fachs-font-body); color: var(--fachs-ink); }
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea { width: 100%; min-width: 0; padding: .6rem .75rem; border: 1px solid var(--fachs-night-400); border-radius: var(--fachs-radius); background: var(--fachs-white); }
[aria-invalid="true"] { border-color: var(--fachs-danger); box-shadow: 0 0 0 1px var(--fachs-danger); }
/* Citations: a quote is large text with a hairline rule; the source is small grey text. */
blockquote { margin: 0 0 1em; padding: 0 0 0 1.25rem; border-left: 1px solid var(--fachs-night-300); font-size: var(--fachs-font-size-large); line-height: var(--fachs-line-height-body); color: var(--fachs-ink); max-width: 62ch; }
blockquote p { max-width: none; }
cite, figcaption, .cite { display: block; margin-top: .5rem; font-style: normal; font-size: var(--fachs-font-size-small); color: var(--fachs-grey-600); }
/* Images: 6px corners, no shadow, no border. Ratios: .ratio-16x10 (default photo), .ratio-4x3, .ratio-1x1 (portraits). */
img { display: block; }
.img, figure img { border-radius: var(--fachs-radius); }
.ratio-16x10, .ratio-4x3, .ratio-1x1 { width: 100%; object-fit: cover; }
.ratio-16x10 { aspect-ratio: 16 / 10; } .ratio-4x3 { aspect-ratio: 4 / 3; } .ratio-1x1 { aspect-ratio: 1 / 1; }
/* Cards and panels: hairline border, 6px corners, no shadow. */
.card, .panel { border: 1px solid var(--fachs-night-200); border-radius: var(--fachs-radius); background: var(--fachs-white); padding: clamp(1rem, 2.5vw, 1.5rem); }
.card > img:first-child { border-radius: calc(var(--fachs-radius) - 1px) calc(var(--fachs-radius) - 1px) 0 0; }
.card h3, .card h4 { margin-bottom: .5rem; }