/* ============================================================================
   InFront Tenders — shared "content band" design system
   ----------------------------------------------------------------------------
   Adapted from the reference files supplied for the How It Works and FAQ
   redesign ("infront tenders how it works update.html", "infront tenders FAQ
   update.html", "infront-tenders.css"). Used today by HowItWorksPage.vue and
   FaqPage.vue; reuse the same .itd-page wrapper on any future page that
   should share this look (dark band heading, numbered steps, FAQ accordion).

   Every rule here is scoped under .itd-page (the wrapper div each page
   renders around its content) instead of being truly global like the
   reference file. The real header/nav/footer already exist as their own
   Vue components (InFrontHeader.vue / InFrontFooter.vue) with their own
   hard-won responsive behaviour — this stylesheet intentionally leaves them
   alone rather than reintroducing the reference file's own nav/footer/burger
   markup and risking a collision.
   ============================================================================ */

.itd-page{
  --itd-white:#FFFFFF;
  --itd-bar:#2C2C31;
  --itd-band:#242428;
  --itd-copper:#C7995C;
  --itd-blue:#2A5DB0;
  --itd-crimson:#D6455A;
  --itd-onLight:#1A1A18;
  --itd-onLight2:#3E3C39;
  --itd-onDark:#FFFFFF;
  --itd-onDark2:#D4D1CB;
  --itd-hairDark:rgba(255,255,255,.08);
  --itd-hairLight:rgba(0,0,0,.12);
  --itd-page-w:1160px;
  --itd-readable-w:900px;
  --itd-gutter:32px;
  --itd-gutter-sm:20px;

  color: var(--itd-onLight);
  font-family: var(--font-family), Poppins, system-ui, sans-serif;
}

.itd-page h1,
.itd-page h2,
.itd-page h3{ margin:0; font-weight:600; letter-spacing:-.4px; }
/* Body copy is explicitly Regular (400), never inherited/left ambiguous —
   there is no Poppins Light face loaded in this project, and asking for a
   weight with no matching @font-face is exactly what read as too faint on a
   light background. Weight 600 above is reserved for the large display
   headings (h1.page, step titles, etc). */
.itd-page p{ margin:0; line-height:1.6; font-weight:400; }


/* ----------------------------------------------------------------------------
   BUTTON, one spec everywhere on these pages.
   Width is the only thing allowed to vary, and it follows the label — never
   set an explicit width on it.
---------------------------------------------------------------------------- */
.itd-page .btn{
  display:inline-block;
  background:var(--itd-bar);
  color:#fff;
  text-decoration:none;
  border:4px solid var(--itd-copper);
  border-radius:35px;
  font-size:18px;
  font-weight:500;
  padding:15px 35px;
  text-align:center;
  transition:background .18s ease,color .18s ease;
}
.itd-page .btn:hover{ background:var(--itd-copper); color:var(--itd-bar); }

/* Secondary action is a link, never a second button */
.itd-page .alt{ display:block; margin-top:18px; font-size:16px; color:var(--itd-onLight2); }

/* Inline link. Blue on light, copper on dark (blue fails contrast on dark). */
.itd-page a.q{ font-weight:500; text-decoration:none; border-bottom:1px solid; }
.itd-page .band.light a.q{ color:var(--itd-blue); border-bottom-color:rgba(0,0,0,.25); }
.itd-page .band.light a.q:hover{ color:var(--itd-onLight); border-bottom-color:var(--itd-onLight); }
.itd-page .band.dark a.q{ color:var(--itd-copper); border-bottom-color:rgba(199,153,92,.45); }
.itd-page .band.dark a.q:hover{ color:#fff; border-bottom-color:#fff; }


/* ----------------------------------------------------------------------------
   BANDS — a page is built from full-width bands. Change background only
   where the subject changes.
---------------------------------------------------------------------------- */
.itd-page .band{ width:100%; }
.itd-page .band.dark{ background:var(--itd-band); color:var(--itd-onDark); }
.itd-page .band.light{ background:var(--itd-white); color:var(--itd-onLight); }

.itd-page .inner{
  width:100%; max-width:var(--itd-page-w);
  margin:0 auto; padding:0 var(--itd-gutter);
  display:flow-root; /* stop a child's top margin escaping the band */
}
.itd-page .inner.readable{ max-width:var(--itd-readable-w); }

.itd-page .rule{ height:1px; background:var(--itd-copper); opacity:.6; }


/* ----------------------------------------------------------------------------
   PAGE HEADING
---------------------------------------------------------------------------- */
.itd-page h1.page{ font-size:40px; line-height:1.12; margin-bottom:14px; }
.itd-page .band.dark h1.page{ color:var(--itd-onDark); }

/* No max-width here on purpose — this is one short lead sentence, not a
   running paragraph, and it's ~95 characters at 18px. A narrower cap (the
   720px this used to have) makes it wrap onto two lines even on ordinary
   desktop widths; the page's own .inner (1160px, minus gutters) is already
   the real width constraint every other element on the page respects. */
.itd-page .standfirst{ font-size:18px; margin:0 0 48px; }
.itd-page .band.dark .standfirst{ color:var(--itd-onDark2); }
.itd-page .band.light .standfirst{ color:var(--itd-onLight2); }


/* ----------------------------------------------------------------------------
   NUMBERED STEPS — solid copper discs, near-black numeral. Hover empties the
   disc; decorative only, since phones have no hover.

   Spacing between the three stacked children (number, heading, body text) is
   set per-pair via explicit margins: 20px from the number to its heading and
   16px from the heading to its text (the agreed spacing). These used to be
   8px and 6px, with the rest coming from Quasar's 60px h2 line height, which
   is now reset site-wide (app.scss).
---------------------------------------------------------------------------- */
.itd-page .steps{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:34px; }
.itd-page .step{ display:flex; flex-direction:column; }
.itd-page .step .n{ margin:0 0 20px; }
.itd-page .step h2{ font-size:19px; line-height:1.25; margin:0 0 16px; }
.itd-page .band.dark .step h2{ color:var(--itd-onDark); }
.itd-page .band.dark .step p{ color:var(--itd-onDark2); }
.itd-page .band.light .step p{ color:var(--itd-onLight2); }
.itd-page .step p{ font-size:15px; margin:0; }

.itd-page .n{
  width:42px; height:42px; border-radius:50%;
  border:2px solid var(--itd-copper);
  background:var(--itd-copper);
  color:var(--itd-band);
  display:flex; align-items:center; justify-content:center;
  font-size:18px; font-weight:600; line-height:1;
  transition:background .2s ease,color .2s ease;
}
.itd-page .step:hover .n{ background:transparent; color:var(--itd-copper); }


/* ----------------------------------------------------------------------------
   CLOSING GROUP — narrow and centred, so the fine print sits under the
   button and inherits its gravity.
---------------------------------------------------------------------------- */
.itd-page .close{ max-width:740px; margin:0 auto; text-align:center; }
.itd-page .close .lead{ font-size:20px; font-weight:500; margin-bottom:20px; }

.itd-page .fine{
  margin-top:44px; padding-top:26px;
  border-top:1px solid var(--itd-hairLight);
  display:flex; flex-direction:column; gap:14px;
}
.itd-page .band.dark .fine{ border-top-color:var(--itd-hairDark); }
.itd-page .fine p{ font-size:14px; line-height:1.7; text-wrap:balance; }
.itd-page .band.light .fine p{ color:var(--itd-onLight2); }
.itd-page .band.dark .fine p{ color:var(--itd-onDark2); }

.itd-page .tag{
  display:inline-block; margin-right:8px;
  font-size:13px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase;
}
.itd-page .band.light .tag{ color:var(--itd-blue); }
.itd-page .band.dark .tag{ color:var(--itd-copper); }


/* ----------------------------------------------------------------------------
   FAQ ACCORDION — native <details>/<summary>. No JavaScript, keyboard
   accessible, works with find-in-page.

   Markup:
     <details>
       <summary><span>Question text</span><i></i></summary>
       <p>Answer.</p>
     </details>

   The dividers are deliberately near-invisible — not decoration, they mark
   where an opened answer ends. Sections are separated by space and by the
   copper heading, not by rules.
---------------------------------------------------------------------------- */
.itd-page .group{ margin-top:54px; }
.itd-page .group:first-of-type{ margin-top:0; }
.itd-page .group h2{ font-size:21px; font-weight:600; margin-bottom:16px; }
.itd-page .band.dark .group h2{ color:var(--itd-copper); }
/* On a light band the copper heading fails contrast, so it stays near-black
   and a short copper bar carries the colour instead. */
.itd-page .band.light .group h2{ color:var(--itd-onLight); position:relative; padding-top:18px; }
.itd-page .band.light .group h2::before{
  content:""; position:absolute; top:0; left:0;
  width:44px; height:3px; background:var(--itd-copper);
}

.itd-page details{ border-bottom:1px solid; }
.itd-page .band.dark details{ border-bottom-color:var(--itd-hairDark); }
.itd-page .band.light details{ border-bottom-color:var(--itd-hairLight); }

.itd-page summary{
  list-style:none; cursor:pointer;
  display:flex; align-items:flex-start; gap:20px;
  padding:20px 0;
  font-size:17px; font-weight:500; line-height:1.45;
}
.itd-page summary::-webkit-details-marker{ display:none; }
.itd-page summary span{ flex:1; }
.itd-page .band.dark summary{ color:var(--itd-onDark); }
.itd-page .band.light summary{ color:var(--itd-onLight); }
.itd-page summary:hover{ color:var(--itd-copper); }

/* the plus, which loses its vertical stroke when open */
.itd-page summary i{ flex:0 0 22px; height:22px; position:relative; margin-top:2px; }
.itd-page summary i::before,
.itd-page summary i::after{
  content:""; position:absolute; background:var(--itd-copper);
  left:50%; top:50%; transform:translate(-50%,-50%);
  transition:transform .18s ease,opacity .18s ease;
}
.itd-page summary i::before{ width:16px; height:2px; }
.itd-page summary i::after{ width:2px; height:16px; }
.itd-page details[open] summary i::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.itd-page details > p{
  font-size:15px; line-height:1.7;
  padding:0 42px 28px 0; margin-top:-2px; max-width:680px;
}
.itd-page details > p + p{ padding-top:12px; }
.itd-page .band.dark details > p{ color:var(--itd-onDark2); }
.itd-page .band.light details > p{ color:var(--itd-onLight2); }
.itd-page .pending{ color:var(--itd-crimson); font-weight:500; }


/* ----------------------------------------------------------------------------
   BREAKPOINTS
---------------------------------------------------------------------------- */
@media (max-width:1040px){
  .itd-page .steps{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 36px; }
}

@media (max-width:760px){
  .itd-page .inner{ padding:0 var(--itd-gutter-sm); }

  .itd-page h1.page{ font-size:28px; }
  .itd-page .standfirst{ font-size:16px; margin-bottom:30px; }

  /* number and heading centre against each other, description drops below:
     one grid row for number + heading, the text under the heading (S-2) */
  .itd-page .steps{ grid-template-columns:1fr; gap:26px; }
  .itd-page .step{ display:grid; grid-template-columns:38px minmax(0,1fr); column-gap:20px; row-gap:4px; align-items:center; }
  .itd-page .n{ width:38px; height:38px; font-size:17px; }
  .itd-page .step .n{ margin:0; } /* cancel the desktop column layout's number→heading margin — this layout uses `gap` instead */
  .itd-page .step h2{ font-size:18px; line-height:1.3; margin:0; }
  .itd-page .step p{ grid-column:2; }
  /* centre on the letters, not the font's line box: Poppins sits differently
     in its line box on Mac and Windows, which made the numbers look high */
  .itd-page .step .n span,
  .itd-page .step h2{ text-box:trim-both cap alphabetic; }
  .itd-page .step .n span{ display:block; line-height:1; }
  /* optical nudge: a circle next to text reads as high when mathematically centred */
  .itd-page .step .n{ position:relative; top:2px; }

  .itd-page .close .lead{ font-size:18px; }
  /* full width but capped, or it becomes a slab on a half-size window */
  .itd-page .close .btn,
  .itd-page .b3 .btn{ display:inline-block; width:100%; max-width:340px; padding:15px 0; }
  .itd-page .fine{ margin-top:34px; }

  .itd-page .group{ margin-top:40px; }
  .itd-page summary{ font-size:16px; gap:14px; padding:17px 0; }
  .itd-page details > p{ padding-right:0; }
}