/* =========================================================================
   We Banquets — CDN resilience stylesheet (local, always shipped).
   Loaded BEFORE the Tailwind / Font Awesome CDNs.

   Everything here is scoped to html.no-tw / html.no-fa, which the <link> and
   <script> onerror handlers in app/views/layouts/head.php set ONLY when the
   matching CDN fails to load. When both CDNs load, this file changes nothing.
   ========================================================================= */

/* -------- 1. Font Awesome missing (html.no-fa) --------------------------
   Icon-only links (footer socials, the WhatsApp float) carry their meaning in
   the glyph alone, so give them a text stand-in. Icons that sit beside a text
   label just collapse to nothing, which is fine. */
.no-fa .fa-brands::before {
  font: 800 .72em/1 Nunito, ui-sans-serif, system-ui, sans-serif;
  letter-spacing: -.02em;
}
.no-fa .fa-whatsapp::before    { content: "WA"; }
.no-fa .fa-instagram::before   { content: "IG"; }
.no-fa .fa-facebook-f::before  { content: "f"; font-size: 1em; }
.no-fa .fa-youtube::before     { content: "YT"; }
.no-fa .fa-linkedin-in::before { content: "in"; }
.no-fa .fa-x-twitter::before   { content: "X"; font-size: 1em; }

/* -------- 2. Tailwind missing (html.no-tw) ------------------------------
   Utility classes do nothing, so style the raw elements: readable type, a
   real header/footer, capped media, usable form controls. Not the design —
   just a presentable page. */
.no-tw body {
  margin: 0;
  font: 16px/1.6 Nunito, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #111827;
  background: #fff;
}
.no-tw img { max-width: 100%; height: auto; }
.no-tw img[alt=""] { display: none; }           /* decorative hero / overlay art */
.no-tw svg { width: 1.15em; height: 1.15em; vertical-align: -.15em; }

.no-tw header > div,
.no-tw footer > div,
.no-tw main > div,
.no-tw section > div { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

.no-tw header { background: #fff; border-bottom: 1px solid #e3e6ea; padding: 12px 0; }
.no-tw header img { max-height: 38px; width: auto; }
.no-tw header nav { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 8px; }

.no-tw main { display: block; padding: 16px 0 32px; }

.no-tw a { color: #002451; text-decoration: none; }
.no-tw a:hover { text-decoration: underline; }

.no-tw h1 { font-size: 1.85rem; }
.no-tw h2 { font-size: 1.35rem; }
.no-tw h3 { font-size: 1.1rem; }
.no-tw h1, .no-tw h2, .no-tw h3 { line-height: 1.25; margin: 1.4em 0 .5em; color: #001736; }
.no-tw p { margin: 0 0 1rem; }
.no-tw ul, .no-tw ol { margin: 0 0 1rem; padding-left: 1.2rem; }

.no-tw label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: 4px; }
.no-tw input, .no-tw select, .no-tw textarea {
  display: block; width: 100%; max-width: 420px; min-height: 44px;
  margin: 0 0 12px; padding: 10px 12px;
  border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; font: inherit;
}
.no-tw button, .no-tw [type="submit"] {
  min-height: 44px; min-width: 44px; padding: 10px 18px;
  border: 0; border-radius: 8px; background: #E32127; color: #fff;
  font: inherit; font-weight: 700; cursor: pointer;
}

.no-tw footer { margin-top: 32px; padding: 24px 0; background: #f6f7f9; border-top: 1px solid #e3e6ea; }
.no-tw footer ul { padding: 0; list-style: none; }