/* Utilities not present in the purged Tailwind bundle but used by the SPA. */

.text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
@media (min-width: 768px) {
    .md\:text-4xl { font-size: 2.25rem; line-height: 2.5rem; }
    /* Lead form (2-col grid) full-width rows: consent dropdown, error, submit.
       Purged from app.css (only sm:col-span-2 survived) — restore it so the
       consent row sits on its own line between the fields and the submit. */
    .md\:col-span-2 { grid-column: span 2 / span 2; }
}

.opacity-70 { opacity: 0.7; }

.border-red-500 { border-color: rgb(239 68 68); }

.space-y-1 > * + * { margin-top: 0.25rem; }

/* Product card image hint — give the body a tiny breathing room on mobile. */
main { display: block; }

/* Ensure dropdown menu visibility on hover (compiled CSS already has the rule;
   this is a no-op fallback for the SPA's keyboard-focus path). */
.tc-dropdown-menu { z-index: 40; }

/* ---- Products view ----
   The product cards + advisory banner are built as runtime template strings in
   js/app.js, so Tailwind's content scan never saw these classes and purged
   them. Restore the ones that view depends on. */
.gap-4 { gap: 1rem; }              /* card internal vertical spacing */
.mt-auto { margin-top: auto; }     /* pins "Get a quote" to the card bottom → buttons align across cards */
.mb-8 { margin-bottom: 2rem; }     /* separation between the advisory banner and the cards */
.items-start { align-items: flex-start; }
.justify-start { justify-content: flex-start; } /* feature <li>: ticks align in a left column, not centred per row */
.rounded-2xl { border-radius: 1rem; }

/* Product card responsive width (docs/16 responsive guardrail). #productsList is
   a centred flex-wrap row (flex flex-wrap justify-center), so card width is set
   here, mobile-first: full-width on phones (cards stack top-to-bottom); a fixed
   width from the `sm` breakpoint up so one card sits centred and multiple cards
   wrap as a centred row on tablet/PC. */
.product-card { width: 100%; max-width: 100%; }
@media (min-width: 640px) {
    .product-card { width: 340px; }
}

/* On-brand advisory banner fill. Tailwind's arbitrary-opacity `bg-mint/30`
   (soft mint, per brand palette #7fffd4) was purged; restore it so the banner
   reads as a formatted brand-mint panel rather than a bare outline. */
.bg-mint\/30 { background-color: rgb(127 255 212 / 0.30); }

/* ---- Postcode field (Blazor port) ----
   The SPA uppercased #postcode's value on every `input` event in JS (and
   restored the caret afterwards). Under Blazor the field is displayed
   uppercase with CSS instead, and PostcodeRules.NormaliseForDisplay does the
   real normalisation server-side — this avoids re-rendering the input on every
   keystroke, which would move the caret to the end mid-edit.
   The placeholder must be excluded or it renders as "ENTER YOUR POSTCODE". */
#postcode { text-transform: uppercase; }
#postcode::placeholder { text-transform: none; }