/**
 * Common Subsidiary Landing Page
 *
 * Loaded only on template-subsidiary.php (see inc/jsl-subsidiary.php).
 *
 * Two sections: an intro (heading + description + artwork) and the optional
 * office address / contact form block. The site header and footer are the
 * theme's own and are not restyled here beyond making the fixed navbar legible
 * over this template's white page.
 *
 * Every component selector is namespaced under .jsl-sub so none of it can leak
 * into, or be clobbered by, the theme's global bootstrap.min.css / master.css /
 * responsive.css. That is also why this file avoids the shared .container and
 * .row class names.
 */

/* =========================================================================
   1. Theme navbar legibility
   -------------------------------------------------------------------------
   header.php renders one fixed navbar, transparent with white links, because
   most templates open on a dark hero. This template opens on white, so those
   links would be invisible. Give the bar a solid white background and dark
   links, the same approach master.css already takes for
   .page-template-template-case-study-salt-trailer.

   Only needed from 1200px up: master.css:15904 already forces a solid white
   panel with dark links across the whole hamburger range below that.
   ========================================================================= */

@media (min-width: 1200px) {
  .page-template-template-subsidiary nav.navbar.bootsnav.navbar-transparent.white {
    background: #fff;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08);
  }

  .page-template-template-subsidiary nav.navbar.bootsnav.navbar-transparent.white ul.nav > li > a,
  .page-template-template-subsidiary nav.navbar.bootsnav.navbar-transparent.white .attr-nav > ul > li > a {
    color: #212121 !important;
  }
}

/* =========================================================================
   2. Tokens
   ========================================================================= */

/*
 * NOTE ON UNITS: this file uses px, not rem, deliberately.
 *
 * bootstrap.min.css sets `html { font-size: 10px }` site-wide, so 1rem is 10px
 * here, not the 16px the design assumes. Authoring in rem rendered every size
 * at 62.5% of spec (17px body text came out at 10.6px). px keeps this component
 * visually identical to the design regardless of the global root size.
 */

.jsl-sub {
  /* Brand - molten steel orange. The gradient pair matches the theme's own
     convention (see .fp-value in case-study-ldss-2.css). */
  --jsl-brand-400: #ff953d;
  --jsl-brand-500: #ea8033;
  --jsl-brand-600: #e87e26;

  --jsl-ink: #1d1d1d;
  --jsl-ink-soft: #4a4f57;
  --jsl-line: #e2e8f0;
  --jsl-surface: #f8fafc;

  /* All fonts in these stacks are free / open-licensed:
       Plus Jakarta Sans - SIL OFL 1.1 (Tokotype)
       Inter             - SIL OFL 1.1 (Rasmus Andersson)
       Liberation Sans   - SIL OFL 1.1 (Red Hat), metric-compatible with Arial
       DejaVu Sans       - free Bitstream Vera derivative
       sans-serif        - generic CSS family
     No proprietary face (Helvetica, Arial, Segoe UI) is named anywhere. */
  --jsl-font-head: "Plus Jakarta Sans", "Inter", "Liberation Sans", "DejaVu Sans", sans-serif;
  --jsl-font-body: "Inter", "Liberation Sans", "DejaVu Sans", sans-serif;

  --jsl-max: 1280px;
  --jsl-pad: 24px;

  /* Height of the theme's fixed navbar, used to offset the first section.
     100px at the top of the page (bootsnav.css:146); it shrinks to 80px once
     scrolled, which does not matter here because the offset only has to clear
     the bar at scroll position zero. */
  --jsl-nav-h: 100px;

  /* Width of the artwork column in the design, and its aspect ratio. Both
     grids and single images sit in this slot. */
  --jsl-media-ratio: 73 / 70;
  --jsl-mosaic-gap: 12px;

  font-family: var(--jsl-font-body);
  color: var(--jsl-ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jsl-sub *,
.jsl-sub *::before,
.jsl-sub *::after {
  box-sizing: border-box;
}

/*
 * Reset the theme's global typography inside this template only.
 *
 * These use :where() deliberately. Written as `.jsl-sub h2` the reset would
 * score (0,1,1) and BEAT every single-class component rule like
 * `.jsl-sub-contact__heading { margin-bottom: 24px }` at (0,1,0) - which
 * silently zeroes the heading and paragraph spacing.
 *
 * :where() contributes zero specificity, so these resets score (0,1,0) and the
 * component rules that follow win on source order, as intended.
 */
.jsl-sub :where(h1, h2, h3, p, ul, ol, figure, blockquote) {
  margin: 0;
  padding: 0;
}

.jsl-sub :where(img) {
  display: block;
  max-width: 100%;
}

/* WebP Express rewrites every <img> into <picture><source><img>. Without this
   the inline <picture> keeps its own text-line height and the img inside it
   cannot resolve height:100% against the tile. */
.jsl-sub :where(picture) {
  display: block;
  width: 100%;
  height: 100%;
}

.jsl-sub-wrap {
  width: 100%;
  max-width: var(--jsl-max);
  margin: 0 auto;
  padding: 0 var(--jsl-pad);
}

/* =========================================================================
   3. Intro: heading, description, artwork
   ========================================================================= */

.jsl-sub-intro {
  /* The navbar is fixed, so nothing above reserves its height. */
  padding: calc(var(--jsl-nav-h) + 56px) 0 72px;
}

.jsl-sub-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.jsl-sub-intro__title {
  font-family: var(--jsl-font-head);
  font-size: 32px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  /* Gradient fill with a solid colour underneath: browsers that do not support
     background-clip:text still get readable orange rather than transparent. */
  color: var(--jsl-brand-600);
  background: linear-gradient(90deg, var(--jsl-brand-600), var(--jsl-brand-400));
  -webkit-background-clip: text;
  background-clip: text;
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .jsl-sub-intro__title {
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}

.jsl-sub-intro__text {
  margin-top: 32px;
  font-size: 16px;
  line-height: 1.85;
  color: var(--jsl-ink);
}

.jsl-sub-intro__text p {
  margin: 0 0 20px;
}

.jsl-sub-intro__text p:last-child {
  margin-bottom: 0;
}

.jsl-sub-intro__text strong {
  font-weight: 600;
}

.jsl-sub-intro__text a {
  color: var(--jsl-brand-600);
  text-decoration: underline;
}

/* ---- Single image ------------------------------------------------------- */

/*
 * No fixed aspect ratio: the image keeps its own proportions so nothing is
 * cropped. The designs supply roughly 73:70 artwork, which lands on the same
 * height as the mosaic without forcing it.
 */
.jsl-sub-shot img {
  width: 100%;
  height: auto;
}

.jsl-sub-shot picture {
  height: auto;
}

/* ---- Image grid (mosaic) ------------------------------------------------ */

/*
 * Twelve columns, so a tile can be any twelfth of the artwork slot and the
 * per-page collages in the designs are all reproducible from the CMS:
 * 3+9 / 8+4 / 8(x3 rows)+4+4+4 and so on.
 *
 * The slot keeps the design's aspect ratio and the rows share it equally
 * (`minmax(0, 1fr)`), so the artwork occupies the same space on every page no
 * matter how many tiles an editor adds. `dense` lets a short tile backfill the
 * gap left beside a tile that spans several rows.
 */
.jsl-sub-mosaic {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: minmax(0, 1fr);
  grid-auto-flow: row dense;
  gap: var(--jsl-mosaic-gap);
  aspect-ratio: var(--jsl-media-ratio);
}

.jsl-sub-mosaic__tile {
  position: relative;
  overflow: hidden;
  min-height: 0;
  min-width: 0;
}

.jsl-sub-mosaic__tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.jsl-sub-c1 { grid-column: span 1; }
.jsl-sub-c2 { grid-column: span 2; }
.jsl-sub-c3 { grid-column: span 3; }
.jsl-sub-c4 { grid-column: span 4; }
.jsl-sub-c5 { grid-column: span 5; }
.jsl-sub-c6 { grid-column: span 6; }
.jsl-sub-c7 { grid-column: span 7; }
.jsl-sub-c8 { grid-column: span 8; }
.jsl-sub-c9 { grid-column: span 9; }
.jsl-sub-c10 { grid-column: span 10; }
.jsl-sub-c11 { grid-column: span 11; }
.jsl-sub-c12 { grid-column: span 12; }

.jsl-sub-r1 { grid-row: span 1; }
.jsl-sub-r2 { grid-row: span 2; }
.jsl-sub-r3 { grid-row: span 3; }

/* =========================================================================
   4. Office address & contact form
   ========================================================================= */

.jsl-sub-contact {
  padding: 72px 0;
  background: var(--jsl-surface);
  border-top: 1px solid var(--jsl-line);
}

.jsl-sub-contact__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}

.jsl-sub-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-family: var(--jsl-font-head);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--jsl-brand-600);
}

.jsl-sub-contact__heading {
  font-family: var(--jsl-font-head);
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
  color: var(--jsl-ink);
}

.jsl-sub-contact__desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.75;
  color: var(--jsl-ink-soft);
}

.jsl-sub-contact__list {
  margin-top: 32px;
  display: grid;
  gap: 24px;
}

.jsl-sub-contact__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.jsl-sub-ico {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 2px;
  color: var(--jsl-brand-600);
}

.jsl-sub-contact__label {
  display: block;
  font-family: var(--jsl-font-head);
  font-size: 14px;
  font-weight: 700;
  color: var(--jsl-ink);
}

.jsl-sub-contact__value {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--jsl-ink-soft);
}

/* ---- Call to action --------------------------------------------------- */

.jsl-sub-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 32px;
  padding: 13px 26px;
  font-family: var(--jsl-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--jsl-brand-600);
  border-radius: 8px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.jsl-sub-cta:hover,
.jsl-sub-cta:focus {
  color: #fff;
  background: #c96a1c;
  text-decoration: none;
}

.jsl-sub-cta__ico {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* Visible to screen readers only: used for the "(opens in a new tab)" hint. */
.jsl-sub-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Form panel -------------------------------------------------------- */

.jsl-sub-form {
  background: #fff;
  border: 1px solid var(--jsl-line);
  border-radius: 12px;
  padding: 28px;
}

.jsl-sub-form__head {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}

.jsl-sub-form__title {
  font-family: var(--jsl-font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--jsl-ink);
}

.jsl-sub-form__badge {
  padding: 5px 12px;
  border-radius: 9999px;
  background: rgba(232, 126, 38, 0.1);
  color: var(--jsl-brand-600);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.jsl-sub-form__note {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--jsl-ink-soft);
}

.jsl-sub-form__body {
  margin-top: 24px;
}

/*
 * Contact Form 7 renders its own markup, so these reach inside it. Scoped to
 * .jsl-sub-form so no other form on the site is touched.
 *
 * The three-class prefix is deliberate. master.css styles the site's existing
 * CF7 forms for the dark panels they normally sit in - `.getin_form
 * .form-control { background: #0077FF }` at master.css:10788 is one of several -
 * and those selectors score (0,2,0). A two-class selector here would tie or
 * lose, leaving blue fields on a white card. `.jsl-sub .jsl-sub-form X` scores
 * (0,3,x) and wins outright without reaching for !important.
 */
.jsl-sub .jsl-sub-form label {
  display: block;
  margin-bottom: 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--jsl-ink);
}

.jsl-sub .jsl-sub-form input[type="text"],
.jsl-sub .jsl-sub-form input[type="email"],
.jsl-sub .jsl-sub-form input[type="tel"],
.jsl-sub .jsl-sub-form input[type="url"],
.jsl-sub .jsl-sub-form input[type="number"],
.jsl-sub .jsl-sub-form input[type="date"],
.jsl-sub .jsl-sub-form select,
.jsl-sub .jsl-sub-form textarea,
.jsl-sub .jsl-sub-form .form-control,
.jsl-sub .jsl-sub-form .select-control {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 6px;
  padding: 11px 14px;
  font-family: var(--jsl-font-body);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--jsl-ink);
  background: #fff;
  border: 1px solid var(--jsl-line);
  border-radius: 8px;
  box-shadow: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.jsl-sub .jsl-sub-form textarea,
.jsl-sub .jsl-sub-form .wpcf7-textarea {
  min-height: 120px;
  resize: vertical;
  /* master.css:10831 sets `border: 1px solid #ffffff !important` on the
     textarea of the site's existing CF7 forms, which were built for dark
     panels. White on a white card is invisible, and !important can only be
     answered with !important. */
  border: 1px solid var(--jsl-line) !important;
  padding: 11px 14px !important;
}

.jsl-sub .jsl-sub-form input:focus,
.jsl-sub .jsl-sub-form select:focus,
.jsl-sub .jsl-sub-form textarea:focus,
.jsl-sub .jsl-sub-form .form-control:focus,
.jsl-sub .jsl-sub-form .select-control:focus {
  outline: none;
  border-color: var(--jsl-brand-500);
  box-shadow: 0 0 0 3px rgba(232, 126, 38, 0.15);
}

/* The theme colours placeholders white for its dark form panels
   (master.css:1212-1227), using vendor-prefixed selectors that each need
   answering separately. */
.jsl-sub .jsl-sub-form ::placeholder {
  color: #94a3b8;
  opacity: 1;
}

.jsl-sub .jsl-sub-form .form-control::-webkit-input-placeholder,
.jsl-sub .jsl-sub-form input::-webkit-input-placeholder,
.jsl-sub .jsl-sub-form textarea::-webkit-input-placeholder {
  /* The theme's rules carry !important (master.css:1212), so these must too. */
  color: #94a3b8 !important;
}

.jsl-sub .jsl-sub-form .form-control::-moz-placeholder,
.jsl-sub .jsl-sub-form input::-moz-placeholder,
.jsl-sub .jsl-sub-form textarea::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 1;
}

.jsl-sub .jsl-sub-form .form-control:-ms-input-placeholder,
.jsl-sub .jsl-sub-form input:-ms-input-placeholder,
.jsl-sub .jsl-sub-form textarea:-ms-input-placeholder {
  color: #94a3b8 !important;
}

/* Checkboxes and radios: CF7 puts .wpcf7-form-control on the wrapping span, so
   reset the field styling the rules above would otherwise hand them. */
.jsl-sub .jsl-sub-form .wpcf7-checkbox,
.jsl-sub .jsl-sub-form .wpcf7-radio,
.jsl-sub .jsl-sub-form .wpcf7-acceptance {
  display: block;
  width: auto;
  margin-top: 0;
  padding: 0;
  background: none;
  border: none;
}

.jsl-sub .jsl-sub-form input[type="checkbox"],
.jsl-sub .jsl-sub-form input[type="radio"] {
  width: auto;
  margin-right: 8px;
}

.jsl-sub .jsl-sub-form input[type="submit"],
.jsl-sub .jsl-sub-form button[type="submit"] {
  display: inline-block;
  width: auto;
  height: auto;
  margin-top: 8px;
  padding: 13px 30px;
  font-family: var(--jsl-font-head);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--jsl-brand-600);
  border: none;
  border-radius: 8px;
  box-shadow: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.jsl-sub .jsl-sub-form input[type="submit"]:hover,
.jsl-sub .jsl-sub-form input[type="submit"]:focus,
.jsl-sub .jsl-sub-form button[type="submit"]:hover,
.jsl-sub .jsl-sub-form button[type="submit"]:focus {
  background: #c96a1c;
}

.jsl-sub .jsl-sub-form .wpcf7-not-valid-tip {
  margin-top: 6px;
  font-size: 13px;
}

.jsl-sub .jsl-sub-form .wpcf7-response-output {
  margin: 20px 0 0;
  padding: 12px 16px;
  font-size: 14px;
  border-radius: 8px;
}

/* =========================================================================
   5. Breakpoints
   ========================================================================= */

@media (min-width: 768px) {
  .jsl-sub {
    --jsl-pad: 32px;
  }

  .jsl-sub-intro__title {
    font-size: 38px;
  }

  .jsl-sub-contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .jsl-sub-contact__grid.is-single-col {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }
}

@media (min-width: 992px) {
  .jsl-sub-intro {
    padding: calc(var(--jsl-nav-h) + 110px) 0 140px;
  }

  /* 470px of text beside 730px of artwork with an 80px gutter: the design's
     proportions, expressed as a ratio so they hold at any width. */
  .jsl-sub-intro__grid {
    grid-template-columns: minmax(0, 0.644fr) minmax(0, 1fr);
    gap: 80px;
  }

  .jsl-sub-intro__grid.is-single-col {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
  }

  .jsl-sub-intro__title {
    font-size: 44px;
  }

  .jsl-sub-intro__text {
    margin-top: 56px;
    font-size: 17px;
  }

  .jsl-sub-contact {
    padding: 96px 0;
  }

  .jsl-sub-contact__heading {
    font-size: 30px;
  }

  .jsl-sub-form {
    padding: 36px;
  }
}

@media (max-width: 991px) {
  .jsl-sub {
    --jsl-nav-h: 80px;
  }
}

@media (max-width: 575px) {
  .jsl-sub {
    --jsl-mosaic-gap: 8px;
  }

  /*
   * A twelve-column mosaic at phone width makes a 3-column tile ~70px wide,
   * too small to read. Stack every tile full width and let each keep its own
   * proportions instead.
   */
  .jsl-sub-mosaic {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: auto;
    aspect-ratio: auto;
  }

  .jsl-sub-mosaic__tile {
    grid-column: span 1 !important;
    grid-row: span 1 !important;
  }

  .jsl-sub-mosaic__tile img {
    height: auto;
  }

  .jsl-sub-mosaic__tile picture {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jsl-sub * {
    transition-duration: 0.01ms !important;
  }
}