/* Documents page — "Click the below to view or download" section
   (Figma node 18715:13072). New for the Documents page: the two-column
   document grid, the plain single-row .document-card, and the new
   .doc-accordion component (PDS + Forms — Figma component set
   18715:14860, all four Property 1 variants inspected).

   The section HEADER (eyebrow/heading/subcopy) reuses
   .accordion-tabs-section__header verbatim (css/category-page.css) rather
   than duplicating it here — same centred eyebrow+H2+subcopy shell already
   established by the Insurance page, just with this grid as the body
   instead of a .tab-group. Only what's genuinely new to this page lives in
   this file. */

/* ---- Section body: two-column document grid ---- */

.document-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl); /* 24px — matches Figma's own column gap */
  width: 100%;
}

.document-column {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl); /* 24px — same gap between the accordion and each stacked card */
  min-width: 0;
}

/* ---- Shared row-card shell ----
   Visual shell common to a closed .doc-accordion header and a plain
   .document-card: white fill, 1px light-grey border, 10px radius, 24/20px
   padding. Kept as one base class rather than duplicating the same four
   declarations twice. */

.document-row-shell {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m); /* 12px */
  width: 100%;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 10px;
  padding: var(--space-2xl) var(--space-xl); /* 24px 20px */
  box-sizing: border-box;
  /* Lets a card be a deep-link target (e.g. the Documents utility menu/
     Search's popular searches, see js/navigation.js) and still land clear
     of .site-header's fixed 76px offset + its own ~88px height — same
     200px clearance used by every other anchor target on the site (see
     css/form.css's own comment on this value). */
  scroll-margin-top: 200px;
}

/* ---- Plain document card (Privacy Policy, Financial Hardship, etc.) ----
   A single non-expanding download row — same shell as a closed accordion,
   entirely an <a> since the whole card is one action. */

.document-card {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

.document-card__icon {
  flex-shrink: 0;
  margin-top: 3px; /* optically centres the 16×20 file icon against the first line of an 18px/25.2 heading */
}

.document-card__title {
  flex: 1 1 0%;
  min-width: 0;
  color: var(--colour-header-grey);
}

.document-card__download {
  flex-shrink: 0;
  margin-top: 3px;
}

/* ================================================================
   Document accordion (.doc-accordion) — new reusable component
   ================================================================
   Card-style header (icon + title + chevron) that expands into grouped,
   divided lists of download rows. Two content shapes both use the exact
   same markup/behaviour, only the body content differs (see documents.html):
   PDS (Current/Previous + a closing contact note) and Forms (Application/
   Inspection groups). Height animates via grid-template-rows, same
   technique as .faq-accordion (css/faq-accordion.css) — chosen over a
   JS-measured height so opening one never has to know the height of any
   other, and the page beneath it is simply pushed down in normal flow. */

.doc-accordion {
  width: 100%;
  scroll-margin-top: 200px; /* deep-link target — see .document-row-shell's own comment on this value */
}

/* Trigger is wrapped in an <h3> for correct heading semantics in the
   surrounding page outline — reset here since the browser's default
   heading margin would otherwise inflate the card's height. */
.doc-accordion h3 {
  margin: 0;
}

.doc-accordion__trigger {
  display: flex;
  align-items: flex-start;
  gap: var(--space-m); /* 12px */
  width: 100%;
  margin: 0;
  padding: var(--space-2xl) var(--space-xl); /* 24px 20px, matches .document-row-shell */
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-radius: 10px;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
}

/* Once expanded the panel sits inside the same card, so the trigger's own
   bottom corners/border go square and its border-bottom drops out —
   the panel below supplies the card's bottom edge instead. */
.doc-accordion--expanded .doc-accordion__trigger {
  border-bottom: none;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  padding-bottom: var(--space-l); /* 16px — Figma's own reduced gap above the first group when open */
}

.doc-accordion__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.doc-accordion__title {
  flex: 1 1 0%;
  min-width: 0;
  color: #2A2C2E; /* raw Figma value, not a bound variable — matches the same untokenised expanded-title colour already used by .faq-accordion__item--expanded .faq-accordion__question (css/faq-accordion.css) */
}

.doc-accordion__chevron {
  flex-shrink: 0;
  margin-top: 7px;
  transition: transform 0.2s ease;
}

.doc-accordion--expanded .doc-accordion__chevron {
  transform: rotate(180deg);
}

.doc-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  background: var(--colour-white);
  border: 1px solid var(--colour-light-grey);
  border-top: none;
  border-width: 0; /* zero while closed (it has zero height either way) so the card reads as one seamless shape rather than an empty sliver border under a closed header — colour/sides are ready, just switched on below */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  transition: grid-template-rows 0.3s ease;
}

.doc-accordion--expanded .doc-accordion__panel {
  grid-template-rows: 1fr;
  border-width: 0 1px 1px;
}

.doc-accordion__panel-inner {
  min-height: 0;
  overflow: hidden;
}

.doc-accordion__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl); /* 32px — Figma's own gap between groups/dividers/note */
  padding: 0 20px 24px 48px; /* left offset lines the body copy up under the title, right/bottom match the card's own 20/24px padding */
  box-sizing: border-box;
}

.doc-accordion__group {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl); /* 20px between the group label/description and its row list */
}

.doc-accordion__group-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.doc-accordion__group-title {
  margin: 0;
  color: var(--colour-charcoal);
}

.doc-accordion__group-desc {
  margin: 0;
  color: var(--colour-body-grey);
}

.doc-accordion__rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-l); /* 16px */
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-accordion__row-link {
  display: flex;
  align-items: center;
  gap: var(--space-m); /* 12px */
  color: var(--colour-brand-teal);
  text-decoration: none;
}

.doc-accordion__row-link:hover .doc-accordion__row-text,
.doc-accordion__row-link:focus-visible .doc-accordion__row-text {
  text-decoration: underline;
}

.doc-accordion__row-icon {
  flex-shrink: 0;
}

.doc-accordion__row-text {
  flex: 1 1 0%;
  min-width: 0;
}

.doc-accordion__row-download {
  flex-shrink: 0;
}

.doc-accordion__divider {
  width: 100%;
  height: 0;
  margin: 0;
  border: none;
  border-top: 1px solid var(--colour-light-grey);
}

.doc-accordion__note {
  margin: 0;
  color: var(--colour-body-grey);
}

.doc-accordion__note a {
  color: var(--colour-brand-teal);
  text-decoration: none;
}

.doc-accordion__note a:hover,
.doc-accordion__note a:focus-visible {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .doc-accordion__panel,
  .doc-accordion__chevron {
    transition: none;
  }
}

/* ================================================================
   Responsive
   ================================================================ */

@media (max-width: 1023px) {
  .document-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3xl); /* 32px between the two stacked columns */
  }
}

@media (max-width: 767px) {
  .document-row-shell,
  .doc-accordion__trigger {
    padding: var(--space-xl) var(--space-l); /* 20px 16px */
  }

  .doc-accordion__body {
    padding-left: var(--space-l); /* body copy no longer needs to line up under the (still-present) icon at this width */
    padding-right: var(--space-l);
    padding-bottom: var(--space-xl);
  }
}