/* INSET days page. Every rule is scoped to .inset-page.
   Colours are the site's own: #FCB810 (primary), #C0901D (link gold),
   #212529 (text), #f8f9fa (bg-light), #404040 (footer). */

/* Hero image band: same role as .bg-img-hero-center on /Training/Settings/,
   but a real <picture> so it can have srcset, WebP and alt text. */
.inset-page .inset-hero {
  position: relative;
  overflow: hidden;
  height: clamp(260px, 42vw, 60vh);
}
.inset-page .inset-hero picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 25%; /* keeps the tutor's face in frame on narrow crops */
}
.inset-page .inset-hero .breadcrumb-wrap {
  position: relative;
  z-index: 1;
}
.inset-page .inset-hero .elklan-top-curve {
  z-index: 1;
  margin: 0;
}

/* Visible focus for keyboard users on every interactive element. */
.inset-page a:focus-visible,
.inset-page button:focus-visible,
.inset-page summary:focus-visible,
.inset-page .btn:focus-visible {
  outline: 3px solid #212529;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #FCB810;
}
.inset-page .form-control:focus,
.inset-page .custom-select:focus,
.inset-page .custom-control-input:focus ~ .custom-control-label::before {
  border-color: #212529;
  box-shadow: 0 0 0 0.2rem rgba(252, 184, 16, 0.6);
}

.inset-page section {
  scroll-margin-top: 110px; /* matches html scroll-padding-top on the template */
}

/* Tick list used in "What staff gain" and "What's included". */
.inset-page .inset-ticks {
  list-style: none;
  padding-left: 0;
}
.inset-page .inset-ticks li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 0.75rem;
}
.inset-page .inset-ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.3rem;
  width: 1.1rem;
  height: 0.6rem;
  border-left: 3px solid #C0901D;
  border-bottom: 3px solid #C0901D;
  transform: rotate(-45deg);
}

/* Price table: real table on wide screens, stacked rows on phones. */
.inset-page .inset-prices caption {
  caption-side: top;
  color: #212529;
}
.inset-page .inset-prices thead th {
  background: #FCB810;
  border-bottom: 0;
}
.inset-page .inset-prices td,
.inset-page .inset-prices th {
  vertical-align: middle;
}
.inset-page .inset-vat {
  font-weight: 700;
  font-size: 1.25rem;
  border-left: 6px solid #FCB810;
  padding-left: 0.75rem;
}
@media (max-width: 575.98px) {
  .inset-page .inset-prices thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
  }
  .inset-page .inset-prices tr {
    display: block;
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    margin-bottom: 1rem;
  }
  .inset-page .inset-prices tbody th {
    display: block;
    background: #FCB810;
    border: 0;
  }
  .inset-page .inset-prices td {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid #dee2e6;
  }
  .inset-page .inset-prices td::before {
    content: attr(data-label);
    font-weight: 400;
  }
}

/* FAQ: native details/summary with the site's pale card shadow. */
.inset-page .inset-faq details {
  background: #fff;
  border-radius: 0.3rem;
  margin-bottom: 1rem;
}
.inset-page .inset-faq summary {
  cursor: pointer;
  padding: 1rem 3rem 1rem 1.25rem;
  position: relative;
  list-style: none;
  font-family: "Gotham SSm A", "Gotham SSm B", sans-serif;
}
.inset-page .inset-faq summary::-webkit-details-marker {
  display: none;
}
.inset-page .inset-faq summary::after {
  content: "+";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  line-height: 1;
}
.inset-page .inset-faq details[open] summary::after {
  content: "\2212";
}
.inset-page .inset-faq .inset-faq-answer {
  padding: 0 1.25rem 1rem;
}

/* Enquiry image sits beside the form on large screens only. */
.inset-page .inset-enquire-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  max-height: 640px;
}

/* Form notices. */
.inset-page .inset-form-status:empty {
  display: none;
}

/* ---- Prototype only ------------------------------------------------------
   Draft highlights show only when <main> has .inset-show-drafts.
   Build with `python3 tools/build.py --final` to switch them off. */
.inset-page .inset-prototype-notice {
  display: none;
}
.inset-show-drafts .inset-prototype-notice {
  display: block;
  background: #212529;
  color: #fff;
  padding: 0.5rem 1rem;
  margin: 1.75rem 15px 0;
  border-radius: 0.3rem;
  font-size: 0.875rem;
  text-align: center;
}
.inset-show-drafts [data-placeholder] {
  outline: 2px dashed #C0901D;
  outline-offset: 4px;
}
.inset-show-drafts [data-placeholder]::before {
  content: "Draft";
  display: inline-block;
  margin: 0 0.5rem 0.25rem 0;
  vertical-align: middle;
  background: #212529;
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  padding: 0.25rem 0.4rem;
  border-radius: 0.2rem;
  font-family: sans-serif;
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* One real H1 at every width, styled with the site's .display-4 (Gotham Narrow, 300).
   This title is much longer than the template's, so it uses display-4 (56px) at most and steps down on smaller screens. */
.inset-page .inset-h1 {
  font-family: "Gotham Narrow A", "Gotham Narrow B", "Gotham Narrow SSm A", "Gotham Narrow SSm B", -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 2rem;
  margin-bottom: 1rem;
}
@media (min-width: 768px) {
  .inset-page .inset-h1 { font-size: 2.75rem; }
}
@media (min-width: 992px) {
  .inset-page .inset-h1 { font-size: 3.5rem; }
}
.inset-show-drafts [data-placeholder]:not([data-placeholder=""])::before {
  content: "Draft: " attr(data-placeholder);
}
.inset-page .inset-prototype-only {
  display: none;
}
.inset-show-drafts .inset-prototype-only {
  display: block;
}
@media (max-width: 991.98px) {
  .inset-page .inset-enquire-img {
    max-height: 260px;
  }
}

/* width/height attributes are set on every image to stop layout shift; let CSS keep the ratio. */
.inset-page .card-img-top {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Form errors come from aria-invalid (set by js/inset.js), so only real errors are styled. */
.inset-page .form-control[aria-invalid="true"],
.inset-page .custom-select[aria-invalid="true"] {
  border-color: #dc3545;
}
.inset-page [aria-invalid="true"] ~ .invalid-feedback {
  display: block;
}
.inset-page .form-check-input[aria-invalid="true"] ~ .form-check-label {
  color: #dc3545;
}

/* Keep the enquiry photo in view beside the long form on large screens. */
@media (min-width: 992px) {
  .inset-page #enquire picture {
    display: block;
    position: sticky;
    top: 120px;
  }
}

/* The site's gold link colour disappears on the yellow blocks, so links there use the dark text colour. */
.inset-page .bg-elklan-primary a:not(.btn) {
  color: #272727;
  text-decoration: underline;
}