/* ---------------------------------------------------------------------------
   GWTD — Government Website Template Design
   Shared chrome for the PUBLIC-facing pages (landing, booking, confirmation,
   status tracker).

   Follows the DICT/iGovPhil Government Website Template Design guidelines:
     - standard component order: top bar, masthead, banner, content, agency
       footer, standard footer
     - content area on a WHITE background (#ffffff) — this is the part the
       current staff pages break, with 12 of them on #121212
     - Transparency Seal in the top bar (Sec. 93, General Appropriations Act 2013)
     - accessibility controls: high contrast, grayscale, font size

   Staff//internal pages are deliberately NOT covered by this. GWTD governs
   public government websites, not internal tooling.
--------------------------------------------------------------------------- */

:root {
    --gov-blue:      #0038a8;   /* Philippine flag blue */
    --gov-red:       #ce1126;   /* Philippine flag red */
    --gov-yellow:    #fcd116;   /* Philippine flag yellow */
    --gov-ink:       #1a1a2e;
    --gov-muted:     #4b5563;
    --gov-line:      #e2e8f0;
    --gov-bg:        #f5f7fa;
    --gov-content:   #ffffff;
    --gov-focus:     #ffdd00;
    --gov-font-scale: 1;
}

.gov-body {
    margin: 0;
    font-family: 'Segoe UI', Arial, Helvetica, sans-serif;
    font-size: calc(15px * var(--gov-font-scale));
    line-height: 1.6;
    color: var(--gov-ink);
    background: var(--gov-bg);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

/* ── Accessibility modes ─────────────────────────────────────────────── */
/* GWTD asks for high contrast and grayscale modes plus a font-size toggle. */

.gov-grayscale { filter: grayscale(100%); }

.gov-contrast {
    --gov-bg:      #000;
    --gov-content: #000;
    --gov-ink:     #fff;
    --gov-muted:   #ffe14d;
    --gov-line:    #fff;
}
.gov-contrast .gov-masthead,
.gov-contrast .gov-content,
.gov-contrast .gov-card { background: #000 !important; color: #fff !important; }
.gov-contrast a { color: #ffe14d !important; }
.gov-contrast .gov-card { border: 2px solid #fff !important; }

/* Keyboard focus must always be visible — WCAG 2.4.7. */
.gov-body a:focus-visible,
.gov-body button:focus-visible,
.gov-body input:focus-visible,
.gov-body select:focus-visible,
.gov-body textarea:focus-visible {
    outline: 3px solid var(--gov-focus);
    outline-offset: 2px;
}

/* Skip link — WCAG 2.4.1 bypass blocks. */
.gov-skip {
    position: absolute; left: -9999px; top: 0; z-index: 999;
    background: var(--gov-blue); color: #fff; padding: 10px 18px;
    text-decoration: none; font-weight: 700;
}
.gov-skip:focus { left: 0; }

/* ── 1. Top bar ──────────────────────────────────────────────────────── */

.gov-topbar {
    background: var(--gov-blue);
    color: #fff;
    font-size: calc(12px * var(--gov-font-scale));
}
.gov-topbar-inner {
    max-width: 1100px; margin: 0 auto; padding: 7px 20px;
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
}
.gov-topbar a { color: #fff; text-decoration: none; }
.gov-topbar a:hover { text-decoration: underline; }

.gov-seal {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 3px 10px; border: 1px dashed rgba(255,255,255,.55); border-radius: 4px;
}
.gov-seal .placeholder-tag {
    font-size: 9px; text-transform: uppercase; letter-spacing: .5px;
    background: var(--gov-yellow); color: #000; padding: 1px 5px; border-radius: 3px; font-weight: 700;
}

.gov-a11y { display: flex; align-items: center; gap: 6px; }
.gov-a11y button {
    background: rgba(255,255,255,.14); color: #fff; border: 1px solid rgba(255,255,255,.3);
    border-radius: 4px; padding: 3px 9px; font-size: calc(11px * var(--gov-font-scale));
    cursor: pointer; font-family: inherit; line-height: 1.4;
}
.gov-a11y button:hover { background: rgba(255,255,255,.28); }
.gov-a11y button[aria-pressed="true"] { background: var(--gov-yellow); color: #000; border-color: var(--gov-yellow); font-weight: 700; }

/* ── 2. Masthead ─────────────────────────────────────────────────────── */

.gov-masthead { background: var(--gov-content); border-bottom: 3px solid var(--gov-blue); }
.gov-masthead-inner {
    max-width: 1100px; margin: 0 auto; padding: 14px 20px;
    display: flex; align-items: center; gap: 16px; justify-content: space-between;
}

.gov-brand {
    display: flex; align-items: center; gap: 16px;
    text-decoration: none; color: inherit; min-width: 0;
}

/* GWTD caps the logo at 100px height; 72 leaves room for the text beside it.
   Both supplied logos are JPEGs with a light background rather than
   transparent PNGs, so multiply blends that ground into the white masthead
   instead of showing a pale box. It is reversed under high contrast, where
   the page background is black and multiply would erase the artwork. */
.gov-logo-img {
    height: 72px; width: auto; flex-shrink: 0; display: block;
    mix-blend-mode: multiply;
}
.gov-city-seal {
    height: 60px; width: auto; flex-shrink: 0; display: block;
    mix-blend-mode: multiply;
}
.gov-contrast .gov-logo-img,
.gov-contrast .gov-city-seal {
    mix-blend-mode: normal;
    background: #fff; padding: 3px; border-radius: 4px;
}

/* Placeholder, still used if a logo path is unset. */
.gov-logo {
    width: 68px; height: 68px; flex-shrink: 0;
    border: 2px dashed #b9c2cf; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    text-align: center; font-size: 9px; line-height: 1.25; color: #6b7280;
    background: #f8fafc;
}

.gov-titles { min-width: 0; }
.gov-republic {
    font-size: calc(11px * var(--gov-font-scale));
    text-transform: uppercase; letter-spacing: .8px; color: var(--gov-muted); margin: 0;
}
.gov-agency {
    font-size: calc(18px * var(--gov-font-scale));
    font-weight: 800; margin: 1px 0 0; color: var(--gov-ink); line-height: 1.25;
}
.gov-division { font-size: calc(13px * var(--gov-font-scale)); color: var(--gov-muted); margin: 2px 0 0; }

/* ── 3. Content ──────────────────────────────────────────────────────── */

.gov-main { flex: 1; padding: 28px 20px 40px; }
.gov-content { max-width: 1100px; margin: 0 auto; }

/* GWTD: the content area is white. */
.gov-card {
    background: var(--gov-content);
    border: 1px solid var(--gov-line);
    border-radius: 10px;
    padding: 30px 28px;
    max-width: 620px;
    margin: 0 auto;
}

/* ── 4/5. Footers ────────────────────────────────────────────────────── */

.gov-agency-footer { background: #1f2937; color: #d1d5db; font-size: calc(13px * var(--gov-font-scale)); }
.gov-agency-footer-inner {
    max-width: 1100px; margin: 0 auto; padding: 22px 20px;
    display: flex; gap: 26px; flex-wrap: wrap; justify-content: space-between;
}
.gov-agency-footer h3 { font-size: calc(13px * var(--gov-font-scale)); color: #fff; margin: 0 0 7px; }
.gov-agency-footer p  { margin: 0 0 3px; }
.gov-agency-footer a  { color: #93c5fd; }

.gov-standard-footer { background: var(--gov-blue); color: #fff; font-size: calc(12px * var(--gov-font-scale)); }
.gov-standard-footer-inner {
    max-width: 1100px; margin: 0 auto; padding: 13px 20px;
    display: flex; gap: 14px; flex-wrap: wrap; justify-content: space-between; align-items: center;
}
.gov-standard-footer a { color: #fff; }

@media (max-width: 640px) {
    .gov-masthead-inner { gap: 12px; }
    .gov-logo-img { height: 54px; }
    .gov-city-seal { display: none; }   /* keep the masthead readable on a phone */
    .gov-logo { width: 52px; height: 52px; font-size: 8px; }
    .gov-agency { font-size: calc(15px * var(--gov-font-scale)); }
    .gov-card { padding: 22px 18px; }
    .gov-main { padding: 20px 14px 30px; }
    .gov-topbar-inner { justify-content: center; }
}

@media print {
    .gov-topbar, .gov-a11y, .gov-standard-footer { display: none !important; }
}

/* ── Inline contact panel (includes/gov_contact.php) ──────────────────────
   Grey panel, blue left rule: GOV.UK's "inset text" pattern. It has to read
   as an aside, not as another thing to fill in — someone who has just been
   told "not approved" should see it as help, not as more process. */
.gov-contact {
    margin: 30px 0 0;
    padding: 18px 22px;
    background: var(--gov-bg);
    border-left: 5px solid var(--gov-blue);
}
.gov-contact-title {
    font-size: calc(17px * var(--gov-font-scale));
    color: var(--gov-ink); margin: 0 0 6px;
}
.gov-contact-intro {
    font-size: calc(15px * var(--gov-font-scale));
    color: var(--gov-muted); line-height: 1.6; margin: 0 0 14px;
}

.gov-contact-list { margin: 0; }
.gov-contact-row {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 9px 0; border-bottom: 1px solid var(--gov-line);
}
.gov-contact-row:last-child { border-bottom: none; }

.gov-contact-row dt {
    flex: 0 0 110px; font-weight: 700;
    font-size: calc(15px * var(--gov-font-scale)); color: var(--gov-ink);
}
.gov-contact-row dd {
    flex: 1 1 200px; margin: 0; line-height: 1.6;
    font-size: calc(15px * var(--gov-font-scale)); color: var(--gov-ink);
}
/* On a phone the number is the whole point of this panel, so it stays a
   tappable link rather than being flattened to plain text. */
.gov-contact-row dd a { color: var(--gov-blue); font-weight: 600; }

.gov-contact-hint {
    display: block; margin-top: 2px;
    font-size: calc(13px * var(--gov-font-scale)); color: var(--gov-muted);
}

@media (max-width: 640px) {
    .gov-contact { padding: 16px 16px; }
    .gov-contact-row dt { flex: 1 1 100%; }
}