/*
 * St Catherine's Bluestone Campaign — design system tokens and base styles.
 *
 * Source of truth: the "St Catherine's Bluestone Campaign" design system
 * (claude.ai artifact DPQR12Kr2K3sVPnSsFGNWi, tokens.json v1). Values here are
 * copied exactly; change them there first, then here.
 *
 * Loaded by views/layouts/front-end-main.php only, after site.css, so the
 * admin backend is untouched.
 *
 * Bootstrap 3 sets `html { font-size: 10px }`, so 1rem = 10px on this site.
 * Every size below is in px for that reason — do not convert to rem.
 */

/* ── Tokens: Navy theme (the campaign default) ─────────────────────────── */
:root {
   /* Colour */
   --ds-surface: #003058;
   --ds-surface-raised: #0b3d6b;
   --ds-surface-sunken: #002344;
   --ds-surface-inverse: #ffffff;
   --ds-ink: #ffffff;
   --ds-ink-inverse: #003058;
   --ds-ink-muted: #b6d6ef;
   --ds-navy-289: #003058;
   --ds-blue-284: #6caddf;
   --ds-blue-284-tint: #b6d6ef;
   --ds-gold-crest: #ffe14f;
   --ds-on-brand-blue: #003058;
   --ds-on-gold: #003058;
   --ds-border: #1d5382;
   --ds-border-strong: #6caddf;
   --ds-focus: #ffe14f;
   --ds-success: #7ad6a6;
   --ds-danger: #ff9d8a;

   /* Type */
   --ds-font-sans: Arial, Helvetica, "Helvetica Neue", sans-serif;

   /* Space — 4px grid */
   --ds-space-1: 4px;
   --ds-space-2: 8px;
   --ds-space-3: 12px;
   --ds-space-4: 16px;
   --ds-space-5: 24px;
   --ds-space-6: 32px;
   --ds-space-7: 48px;
   --ds-space-8: 64px;
   --ds-space-9: 96px;
   --ds-space-10: 128px;

   /* Radius */
   --ds-radius-none: 0;
   --ds-radius-sm: 2px;
   --ds-radius-md: 4px;
   --ds-radius-lg: 8px;
   --ds-radius-pill: 999px;

   /* Shadow — on Navy, separate with surfaces and borders instead */
   --ds-shadow-none: none;
   --ds-shadow-sm: 0 1px 2px rgba(0, 16, 32, 0.45);
   --ds-shadow-md: 0 4px 12px rgba(0, 16, 32, 0.5);
   --ds-shadow-lg: 0 12px 32px rgba(0, 16, 32, 0.55);
}

/* ── Tokens: Light theme — forms, receipts and print-style panels ──────── */
.ds-theme-light {
   --ds-surface: #ffffff;
   --ds-surface-raised: #f2f7fb;
   --ds-surface-sunken: #e6eef5;
   --ds-surface-inverse: #003058;
   --ds-ink: #003058;
   --ds-ink-inverse: #ffffff;
   --ds-ink-muted: #4a5f73;
   --ds-border: #c9d8e4;
   --ds-border-strong: #4a5f73;
   --ds-focus: #003058;
   --ds-success: #1d6b4a;
   --ds-danger: #a3312a;
   --ds-shadow-sm: 0 1px 2px rgba(0, 24, 45, 0.16);
   --ds-shadow-md: 0 4px 12px rgba(0, 24, 45, 0.18);
   --ds-shadow-lg: 0 12px 32px rgba(0, 24, 45, 0.24);

   background-color: var(--ds-surface);
   color: var(--ds-ink);
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
   font-family: var(--ds-font-sans);
   font-size: 16px;
   line-height: 26px;
   color: var(--ds-ink);
   background-color: var(--ds-surface);
}

/* Headings step down the scale in strict order: h1 display-lg, h2 heading-1,
   h3 heading-2, h4 heading-3. display-xl is opt-in via .ds-display-xl, once
   per page. */
body h1, body h2, body h3, body h4, body h5, body h6 {
   font-family: var(--ds-font-sans);
   font-weight: 700;
   color: var(--ds-ink);
}
body h1 { font-size: 40px; line-height: 46px; letter-spacing: -0.015em; }
body h2 { font-size: 32px; line-height: 38px; letter-spacing: -0.01em; }
body h3 { font-size: 24px; line-height: 30px; letter-spacing: -0.005em; }
body h4 { font-size: 20px; line-height: 26px; letter-spacing: 0; }

body a {
   color: var(--ds-blue-284);
}
body a:hover,
body a:focus {
   color: var(--ds-ink);
}

/* Focus: 2px solid ring at a space-1 offset, on everything interactive, in
   both themes. Never removed. */
body a:focus-visible,
body button:focus-visible,
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible,
body [tabindex]:focus-visible,
body .btn:focus-visible {
   outline: 2px solid var(--ds-focus);
   outline-offset: var(--ds-space-1);
   box-shadow: none;
}

/* ── Type utilities ────────────────────────────────────────────────────── */
.ds-display-xl { font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -0.02em; }
.ds-display-lg { font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.015em; }
.ds-heading-1  { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.01em; }
.ds-heading-2  { font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: -0.005em; }
.ds-heading-3  { font-size: 20px; line-height: 26px; font-weight: 700; }
.ds-eyebrow {
   font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.14em;
   text-transform: uppercase;
   color: var(--ds-blue-284);
}
.ds-body-lg   { font-size: 18px; line-height: 28px; font-weight: 400; }
.ds-body      { font-size: 16px; line-height: 26px; font-weight: 400; }
.ds-body-sm   { font-size: 14px; line-height: 22px; font-weight: 400; }
.ds-caption   { font-size: 12px; line-height: 18px; font-weight: 400; letter-spacing: 0.01em; color: var(--ds-ink-muted); }
.ds-amount-xl { font-size: 64px; line-height: 64px; font-weight: 700; letter-spacing: -0.02em; }
.ds-amount    { font-size: 28px; line-height: 32px; font-weight: 700; letter-spacing: -0.01em; }
.ds-muted     { color: var(--ds-ink-muted); }

@media (max-width: 767px) {
   /* The hero headline drops to display-lg under 768px. */
   .ds-display-xl { font-size: 40px; line-height: 46px; letter-spacing: -0.015em; }
   .ds-amount-xl  { font-size: 48px; line-height: 52px; }
}

/* ── Surfaces ──────────────────────────────────────────────────────────── */
.ds-card {
   background: var(--ds-surface-raised);
   border: 1px solid var(--ds-border);
   border-radius: var(--ds-radius-md);
   padding: var(--ds-space-5);
   box-shadow: var(--ds-shadow-none);
   color: var(--ds-ink);
}
.ds-theme-light .ds-card,
.ds-card.ds-theme-light {
   box-shadow: var(--ds-shadow-sm);
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
/* Shape and hover follow the school's own site (stcatherines.net.au,
   `.chr-button`): square corners, a solid 6px bar under the button, a
   right-pointing chevron, and on hover the bar rises to fill the button from
   the bottom up (0.3s ease).
   Two deliberate departures from the school's button, both for the design
   system's contrast and type rules: the resting label is on-brand-blue (the
   school's white-on-Light-Blue is 2.4:1), and labels stay in sentence case at
   16px rather than 10–12px uppercase.
   On Navy grounds the bar is white — the school's own `--white` variant for
   dark sections — so it and the fill stay visible against the page. */
:root {
   --ds-btn-bar: #ffffff;
   --ds-btn-hover-ink: var(--ds-on-brand-blue);
}
.ds-theme-light {
   --ds-btn-bar: var(--ds-navy-289);
   --ds-btn-hover-ink: #ffffff;
}

/* Primary. Covers the site's own button classes and Bootstrap's primary.
   `.home-description a.choose-seat-button` is listed so the whole group
   outranks site.css's rule of that name. */
body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
         .home-description a.choose-seat-button, .btn-primary) {
   position: relative;
   z-index: 0;                 /* own stacking context for the bar at -1 */
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 180px;
   min-height: 54px;
   margin-bottom: 6px;         /* room for the bar */
   padding: 15px 50px 15px 25px;
   font-family: var(--ds-font-sans);
   font-size: 16px;
   line-height: 24px;
   font-weight: 700;
   text-align: center;
   text-decoration: none;
   text-transform: none;
   letter-spacing: 0;
   border: 0;
   border-radius: var(--ds-radius-none);
   background: var(--ds-blue-284);
   color: var(--ds-on-brand-blue);
   box-shadow: none;
   opacity: 1;
   transition: color 0.3s ease;
}
/* The bar: sits just under the button and grows upward over it on hover. */
body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
         .home-description a.choose-seat-button, .btn-primary)::before {
   content: '';
   position: absolute;
   left: 0;
   bottom: -6px;
   width: 100%;
   height: 6px;
   background: var(--ds-btn-bar);
   z-index: -1;
   transition: height 0.3s ease;
}
/* The chevron: the school's arrow, masked so it takes the label colour. */
body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
         .home-description a.choose-seat-button, .btn-primary)::after {
   content: '';
   position: absolute;
   top: 0;
   bottom: 0;
   right: 25px;
   width: 7px;
   height: 12px;
   margin: auto;
   background-color: currentColor;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 0 24 40'%3E%3Cpolygon points='25.82 19.99 8 37.3 10.6 39.98 31.18 19.99 10.6 0 8 2.68'/%3E%3C/svg%3E") center / contain no-repeat;
           mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='8 0 24 40'%3E%3Cpolygon points='25.82 19.99 8 37.3 10.6 39.98 31.18 19.99 10.6 0 8 2.68'/%3E%3C/svg%3E") center / contain no-repeat;
   z-index: 1;
}
body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
         .home-description a.choose-seat-button, .btn-primary):is(:hover, :focus, :active) {
   background: var(--ds-blue-284);
   color: var(--ds-on-brand-blue);
   text-decoration: none;
   opacity: 1;
}
/* Fill on hover (pointer devices only — the school animates from 992px up)
   and on keyboard focus, which also keeps its focus ring. */
@media (hover: hover) {
   body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
            .home-description a.choose-seat-button, .btn-primary):hover {
      color: var(--ds-btn-hover-ink);
   }
   body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
            .home-description a.choose-seat-button, .btn-primary):hover::before {
      height: calc(100% + 6px);
   }
}
body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
         .home-description a.choose-seat-button, .btn-primary):focus-visible {
   color: var(--ds-btn-hover-ink);
}
body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
         .home-description a.choose-seat-button, .btn-primary):focus-visible::before {
   height: calc(100% + 6px);
}
body :is(.ds-btn, .main-btn, button.choose-seat-button, .btn-primary):disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

@media (max-width: 991px) {
   /* The school steps its button down to 42px below desktop; 48px keeps a
      comfortable touch target at our 16px label. */
   body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
            .home-description a.choose-seat-button, .btn-primary) {
      min-width: 140px;
      min-height: 48px;
      padding: 12px 44px 12px 20px;
   }
   body :is(.ds-btn, .main-btn, a.choose-seat-button, button.choose-seat-button,
            .home-description a.choose-seat-button, .btn-primary)::after {
      right: 20px;
   }
}

/* Secondary: transparent with a meaningful (border-strong) outline and no
   resting bar; on hover the Light Blue fill rises from the bottom in the
   same 0.3s motion. The compound selectors let it sit on top of a primary
   class, e.g. `choose-seat-button ds-btn-secondary`. */
body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
         .home-description a.choose-seat-button.ds-btn-secondary, .btn-default) {
   position: relative;
   z-index: 0;
   font-family: var(--ds-font-sans);
   font-weight: 700;
   background: transparent;
   border: 1px solid var(--ds-border-strong);
   border-radius: var(--ds-radius-none);
   color: var(--ds-ink);
   box-shadow: none;
   transition: color 0.3s ease;
}
body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
         .home-description a.choose-seat-button.ds-btn-secondary, .btn-default)::before {
   content: '';
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   height: 0;
   background: var(--ds-blue-284);
   z-index: -1;
   transition: height 0.3s ease;
}
body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
         .home-description a.choose-seat-button.ds-btn-secondary, .btn-default):is(:hover, :focus, :active) {
   background: transparent;
   border-color: var(--ds-border-strong);
   color: var(--ds-ink);
}
@media (hover: hover) {
   body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
            .home-description a.choose-seat-button.ds-btn-secondary, .btn-default):hover {
      color: var(--ds-on-brand-blue);
   }
   body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
            .home-description a.choose-seat-button.ds-btn-secondary, .btn-default):hover::before {
      height: 100%;
   }
}
body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
         .home-description a.choose-seat-button.ds-btn-secondary, .btn-default):focus-visible {
   color: var(--ds-on-brand-blue);
}
body :is(.ds-btn-secondary, a.choose-seat-button.ds-btn-secondary,
         .home-description a.choose-seat-button.ds-btn-secondary, .btn-default):focus-visible::before {
   height: 100%;
}

@media (prefers-reduced-motion: reduce) {
   body :is(.ds-btn, .main-btn, .choose-seat-button, .btn-primary,
            .ds-btn-secondary, .btn-default),
   body :is(.ds-btn, .main-btn, .choose-seat-button, .btn-primary,
            .ds-btn-secondary, .btn-default)::before {
      transition: none;
   }
}

/* ── Forms ─────────────────────────────────────────────────────────────── */
/* Fields are white with Navy type on every page, so they read as fields
   against the Navy ground. Labels sit on the page, so they stay white.
   Fixed values rather than --ds-ink/--ds-surface so a .ds-theme-light panel
   doesn't flip them. Placeholder is the Light theme's ink-muted (6.6:1 on
   white). .basic-input and .textarea-input are listed to outrank site.css,
   which sets them to black. */
:root {
   --ds-field-bg: #ffffff;
   --ds-field-ink: #003058;
   --ds-field-placeholder: #4a5f73;
   --ds-label-ink: #ffffff;
}
body .form-control,
body input:not([type]),
body input[type="text"],
body input[type="email"],
body input[type="tel"],
body input[type="number"],
body input[type="password"],
body input[type="search"],
body input[type="url"],
body input[type="date"],
body .basic-input,
body .textarea-input,
body select,
body textarea {
   font-family: var(--ds-font-sans);
   font-size: 16px;
   background-color: var(--ds-field-bg);
   border: 1px solid var(--ds-border-strong);
   border-radius: var(--ds-radius-sm);
   color: var(--ds-field-ink);
   box-shadow: none;
}
body select option {
   background-color: var(--ds-field-bg);
   color: var(--ds-field-ink);
}
body .form-control {
   height: auto;
   padding: var(--ds-space-3) var(--ds-space-4);
   line-height: 24px;
}
body .form-control::placeholder,
body input::placeholder,
body textarea::placeholder {
   color: var(--ds-field-placeholder);
   opacity: 1;
}
body .form-control:focus {
   border-color: var(--ds-border-strong);
   box-shadow: none;
}
body label,
body .control-label {
   font-size: 16px;
   font-weight: 700;
   color: var(--ds-label-ink);
   margin-bottom: var(--ds-space-2);
}

/* Checkboxes: a white box with a Navy tick. Drawn with appearance: none
   because accent-color can't set the box and tick colours separately. The
   size and padding reset beat .basic-input's 40px height when it's on a
   checkbox. */
body input[type="checkbox"] {
   -webkit-appearance: none;
           appearance: none;
   display: inline-block;
   width: 20px;
   height: 20px;
   padding: 0;
   vertical-align: -4px;
   flex: none;
   background: var(--ds-field-bg) center / 14px 14px no-repeat;
   border: 1px solid var(--ds-border-strong);
   border-radius: var(--ds-radius-sm);
   cursor: pointer;
}
body input[type="checkbox"]:checked {
   background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.5l3.5 3.5 7.5-8' fill='none' stroke='%23003058' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
body input[type="checkbox"]:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}

/* Select2 (the affiliation picker, seat stage 3) follows the same field
   colours. */
body .select2-container .select2-selection {
   background-color: var(--ds-field-bg);
   border: 1px solid var(--ds-border-strong);
   border-radius: var(--ds-radius-sm);
}
body .select2-container .select2-selection__rendered,
body .select2-container .select2-search__field,
body .select2-container .select2-results__option,
body .select2-container .select2-selection__placeholder {
   color: var(--ds-field-ink);
}
body .select2-container .select2-selection__placeholder {
   color: var(--ds-field-placeholder);
}
body .select2-dropdown {
   background-color: var(--ds-field-bg);
   border-color: var(--ds-border-strong);
}
body .select2-container .select2-results__option--highlighted[aria-selected],
body .select2-container .select2-results__option--highlighted {
   background-color: var(--ds-field-ink);
   color: var(--ds-field-bg);
}
body .help-block,
body .hint-block {
   font-size: 14px;
   line-height: 22px;
   color: var(--ds-ink-muted);
}

/* Validation — always paired with the message text Yii renders. */
body .has-error .form-control { border-color: var(--ds-danger); }
body .has-error .help-block,
body .has-error .control-label { color: var(--ds-danger); }
body .has-success .form-control { border-color: var(--ds-success); }

body .alert {
   border-radius: var(--ds-radius-md);
   border: 1px solid var(--ds-border);
   background: var(--ds-surface-raised);
   color: var(--ds-ink);
}
body .alert-danger  { border-color: var(--ds-danger); }
body .alert-success { border-color: var(--ds-success); }

/* ── Tables ────────────────────────────────────────────────────────────── */
body .table {
   color: var(--ds-ink);
   font-size: 14px;
   line-height: 22px;
}
body .table > thead > tr > th,
body .table > tbody > tr > td,
body .table > tbody > tr > th {
   border-color: var(--ds-border);
}
body .table-striped > tbody > tr:nth-of-type(odd) {
   background-color: var(--ds-surface-raised);
}

/* ── Modals ────────────────────────────────────────────────────────────── */
body .modal-content {
   background: var(--ds-surface-raised);
   color: var(--ds-ink);
   border: 1px solid var(--ds-border);
   border-radius: var(--ds-radius-lg);
   box-shadow: var(--ds-shadow-lg);
}
body .modal-header,
body .modal-footer {
   border-color: var(--ds-border);
}
body .modal-content .close {
   color: var(--ds-ink);
   opacity: 1;
   text-shadow: none;
}

/* ── Progress meter ────────────────────────────────────────────────────── */
body .progress {
   background: var(--ds-surface-sunken);
   border-radius: var(--ds-radius-pill);
   box-shadow: none;
}
body .progress-bar {
   background: var(--ds-gold-crest);
   color: var(--ds-on-gold);
   border-radius: var(--ds-radius-pill);
   box-shadow: none;
}
.ds-theme-light .progress-bar {
   background: var(--ds-navy-289);
   color: #ffffff;
}

/* ── site.css overrides ────────────────────────────────────────────────── */
/* site.css is shared with the admin, so its front-end quirks are corrected
   here rather than edited in place. */

/* site.css forces a white fill with a gold (#cca052) label on hover, with
   !important — 2.3:1, below the text minimum. Keep the Light Blue ground
   and let the rising bar carry the hover. */
body .main-btn:hover,
body .main-btn:focus,
body .submit-btn:hover {
   background: var(--ds-blue-284) !important;
   color: var(--ds-btn-hover-ink) !important;
}

/* site.css rounds these into pills; buttons are square like the school's. */
body .site-seat .main-btn {
   border-radius: var(--ds-radius-none);
}

/* Stripe card field: matches the other inputs. The text inside the iframe is
   coloured from seat_stage_6.php's Stripe `style` option. */
body #card-element {
   background: var(--ds-field-bg);
   border: 1px solid var(--ds-border-strong);
   border-radius: var(--ds-radius-sm);
   padding: var(--ds-space-3) var(--ds-space-4);
   box-shadow: none;
}
body #card-element.StripeElement--focus {
   border-color: var(--ds-border-strong);
   outline: 2px solid var(--ds-focus);
   outline-offset: var(--ds-space-1);
   box-shadow: none;
}
body #card-element.StripeElement--invalid {
   border-color: var(--ds-danger);
}
body .card-secure-note {
   font-size: 14px;
   line-height: 22px;
   color: var(--ds-ink-muted);
}