/* ===========================================================================
   policy.css — the seven policy pages

   SOURCE FILE. scripts/build-theme.py copies this into the theme; it must not
   be edited there, because the build empties astra-child/assets/ on every run.

   One stylesheet for all seven: Privacy Policy, Terms & Conditions,
   Accessibility, CA Privacy Act, Cookies, Disclaimer and Opt-Out Preferences.
   They are the same document in seven parts and should read as one thing.

   Long-form prose is the one thing the site had no styles for - every other
   page is composed of designed sections. So this is a type scale rather than
   a layout: a readable measure, generous spacing, and the site's own fonts
   and orange for links.
   =========================================================================== */

/* --- the hero ------------------------------------------------------------- */
.mt-policy-head {
  max-width: 46rem;
}

.mt-policy-dates {
  margin: 18px 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mt-text-on-dark, rgba(255, 255, 255, .72));
}

/* --- the prose ------------------------------------------------------------
   A measure of ~68 characters. Wider reads as a wall and these pages are
   already long; narrower makes them look longer still. */
.mt-policy {
  max-width: 68ch;
  color: var(--mt-text, #1c2d4a);
  font-size: 16px;
  line-height: 1.75;
}

.mt-policy> :first-child {
  margin-top: 0;
}

.mt-policy h2 {
  margin: 52px 0 14px;
  font-family: var(--font-heading, inherit);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--mt-navy, #1c2d4a);
}

/* a short orange rule above each section, the same device the cards use */
.mt-policy h2::before {
  content: "";
  display: block;
  width: 30px;
  height: 3px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: var(--mt-orange);
}

.mt-policy h3 {
  margin: 30px 0 8px;
  font-size: 16px;
  font-weight: 800;
  color: var(--mt-navy, #1c2d4a);
}

.mt-policy p {
  margin: 0 0 16px;
}

.mt-policy strong {
  font-weight: 700;
  color: var(--mt-navy, #1c2d4a);
}

.mt-policy a {
  color: var(--mt-orange-dark, #e06820);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

.mt-policy a:hover {
  color: var(--mt-navy, #1c2d4a);
}

.mt-policy a:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 2px;
}

/* --- lists ---------------------------------------------------------------- */
.mt-policy ul {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

.mt-policy li {
  position: relative;
  margin: 0 0 9px;
  padding-left: 22px;
}

/* a drawn marker rather than a bullet glyph, so it keeps the orange and is
   not read out as punctuation */
.mt-policy li::before {
  content: "";
  position: absolute;
  top: .62em;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mt-orange);
}

/* --- the contact block at the foot of each policy ------------------------- */
.mt-policy__contact {
  margin: 22px 0 0;
  padding: 20px 22px;
  border: 1px solid var(--mt-border, rgba(28, 45, 74, .14));
  border-radius: 16px;
  background: var(--mt-bg-soft, #f7f8fa);
  font-weight: 600;
  line-height: 1.9;
}

/* --- the cookie table ------------------------------------------------------
   It has three columns and long cells, so on a phone it scrolls sideways
   rather than being crushed. build-policies.py puts tabindex="0" and a
   role/aria-label on the wrapper so the scroll is reachable by keyboard; the
   focus ring below is what makes that visible. */
.mt-policy__scroll:focus-visible {
  outline: 3px solid var(--mt-orange);
  outline-offset: 2px;
}

.mt-policy__scroll {
  margin: 0 0 20px;
  overflow-x: auto;
  border: 1px solid var(--mt-border, rgba(28, 45, 74, .14));
  border-radius: 16px;
}

.mt-policy__table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 14px;
}

.mt-policy__table th {
  padding: 13px 16px;
  background: var(--mt-navy, #1c2d4a);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
}

.mt-policy__table td {
  padding: 13px 16px;
  border-top: 1px solid var(--mt-border, rgba(28, 45, 74, .12));
  vertical-align: top;
}

.mt-policy__table tbody tr:nth-child(even) {
  background: rgba(28, 45, 74, .03);
}

/* --- the Complianz data-request form ---------------------------------------
   [cmplz-data-request], on Opt-Out Preferences only. The plugin outputs bare
   labels and inputs with no styling of its own worth keeping, so without this
   the form lands in the middle of the prose as browser-default boxes.

   The site has no other form - /contact/ books through Calendly - so there was
   nothing to match. The parts are taken from what the pages already use: the
   card from .mt-policy__contact, the button from the hero's primary CTA
   (orange, navy text, pill), the focus ring from .mt-policy a.

   Every rule is scoped to `.mt-policy #cmplz-datarequest-form` rather than to
   the id alone. Complianz's own stylesheet may load after this one, and an id
   plus a class outranks that id by itself, so the form keeps this treatment
   whichever order the two arrive in. */
.mt-policy #cmplz-datarequest-form {
  margin: 26px 0 24px;
  padding: 24px;
  border: 1px solid var(--mt-border);
  border-radius: 16px;
  background: var(--mt-bg-soft);
}

/* The "first name" field is a honeypot. It is not the Name field - that one is
   cmplz_datarequest_name, sits below it and is required - and anything typed
   in here marks the request as spam. Complianz hides it in its own stylesheet;
   this repeats it so a visitor is never shown two Name boxes, one of which
   silently discards their request, if that stylesheet is missing or deferred.
   !important because being visible is the one failure that cannot be allowed
   to depend on load order. */
.mt-policy #cmplz-datarequest-form label.cmplz-first-name {
  display: none !important;
}

.mt-policy #cmplz-datarequest-form>div {
  margin: 0 0 16px;
}

.mt-policy #cmplz-datarequest-form label {
  display: block;
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  color: var(--mt-navy);
}

.mt-policy #cmplz-datarequest-form input[type="text"],
.mt-policy #cmplz-datarequest-form input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--mt-border);
  border-radius: 10px;
  background: #fff;
  color: var(--mt-text);
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}

.mt-policy #cmplz-datarequest-form input::placeholder {
  color: var(--mt-text-muted);
}

.mt-policy #cmplz-datarequest-form input[type="text"]:focus,
.mt-policy #cmplz-datarequest-form input[type="email"]:focus {
  border-color: var(--mt-orange);
  outline: 3px solid rgba(255, 107, 53, .3);
  outline-offset: 0;
}

/* The three request types. The rule that opens the group keys off "a checkbox
   row that follows a row which is not one", not off :first-of-type or a count:
   how many of these appear, and whether the region selector above them renders
   at all, are both Complianz settings. */
.mt-policy #cmplz-datarequest-form .cmplz_datarequest {
  margin: 0 0 11px;
}

.mt-policy #cmplz-datarequest-form div:not(.cmplz_datarequest)+.cmplz_datarequest {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--mt-border);
}

.mt-policy #cmplz-datarequest-form .cmplz_datarequest label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5;
  color: var(--mt-text);
  cursor: pointer;
}

.mt-policy #cmplz-datarequest-form input[type="checkbox"] {
  flex: none;
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  accent-color: var(--mt-orange);
  cursor: pointer;
}

/* Two ids and a class, because the plugin's own button rule is an id plus an
   attribute selector and would otherwise win. */
.mt-policy #cmplz-datarequest-form #cmplz-datarequest-submit {
  -webkit-appearance: none;
  appearance: none;
  width: auto;
  margin: 8px 0 0;
  padding: 13px 28px;
  border: 0;
  border-radius: 999px;
  background: var(--mt-orange);
  color: var(--mt-navy);
  font: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
  transition: background-color .2s ease;
}

.mt-policy #cmplz-datarequest-form #cmplz-datarequest-submit:hover {
  background: var(--mt-orange-dark);
}

/* a navy ring, because an orange one on an orange button is not a ring */
.mt-policy #cmplz-datarequest-form #cmplz-datarequest-submit:focus-visible {
  outline: 3px solid var(--mt-navy);
  outline-offset: 2px;
}

@media (max-width:560px) {
  .mt-policy #cmplz-datarequest-form {
    padding: 18px;
  }
}