/* =============================================================================
   RESPONSIVE.CSS — global cross-device polish layer.
   -----------------------------------------------------------------------------
   The site's layout is already built on Bootstrap 5's grid (col-md-*,
   col-lg-*, navbar-expand-lg, table-responsive, etc.), so most pages
   already reflow correctly between desktop/tablet/mobile. This file is a
   final cascade layer (loaded LAST, after sipdc-theme.css, frontend.css
   and content-cards.css) that:

     1. Adds a couple of safety nets every page benefits from (fluid
        media, no accidental horizontal scrollbars, sane tap targets).
     2. Fills in the gaps at the very-small-phone end (< 400px) that the
        existing per-page breakpoints (992px / 768px / 576px) don't
        specifically cover.
     3. Polishes spacing/typography so text and buttons don't feel
        cramped on a phone, without changing anything on tablet/desktop.
     4. Applies the same care to the Admin Panel (admin.css covers the
        sidebar; this file rounds out the topbar, content padding, and
        forms so the panel is fully usable from a phone too).

   Nothing in here overrides desktop/tablet styling — every rule below is
   scoped to a max-width media query.
   ============================================================================= */

/* -----------------------------------------------------------------------
   1. UNIVERSAL SAFETY NET
   ----------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: hidden; /* belt-and-braces: stops any stray element (a too-wide
                            table, an unbounded flex row, etc.) from creating a
                            horizontal page scrollbar on narrow viewports */
}

img, svg, video, iframe, embed, object {
    max-width: 100%;
}

/* Any admin-uploaded image dropped straight into rich text content
   (news articles, service descriptions, etc.) should never overflow its
   column on a phone, even if the original file is huge. */
.brand-rich-text img,
.brand-card-text img,
.brand-bio-text img {
    height: auto;
}

/* Comfortable minimum tap-target size on touch devices, per WCAG 2.5.5 /
   Apple & Google mobile guidelines, without changing desktop sizing. */
@media (max-width: 991.98px) {
    .navbar .nav-link,
    .navbar .dropdown-item,
    .sidebar-link {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .btn {
        min-height: 40px;
    }
}

/* -----------------------------------------------------------------------
   2. TABLETS & LARGE PHONES (<= 767.98px)
   ----------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .mobile-search-form {
        display: flex;
        gap: 0.4rem;
        padding: 0.5rem 0;
    }
    .mobile-search-form .form-control { flex: 1; }

    .section-py { padding-top: 2.75rem; padding-bottom: 2.75rem; }

    h1 { font-size: 1.85rem; }
    h2 { font-size: 1.55rem; }
    h3 { font-size: 1.3rem; }

    .hero h1 { font-size: 2rem; }
    .hero { padding: 3rem 0; }

    /* Button groups / action rows that sit side-by-side on desktop
       (e.g. "Apply Now" + "Download PDF") stack cleanly and go full
       width so they're easy to tap and never get cut off. */
    .btn-group-responsive,
    .d-flex.gap-2.flex-wrap > .btn,
    .d-flex.gap-3.flex-wrap > .btn {
        flex: 1 1 auto;
    }

    /* Long page titles with inline actions (admin "pageActions" pattern
       and public section headers) wrap onto their own line instead of
       squeezing the title. */
    .d-flex.justify-content-between.align-items-center.mb-4,
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        row-gap: 0.75rem;
    }
}

/* -----------------------------------------------------------------------
   3. PHONES (<= 575.98px)
   ----------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .container, .container-fluid { padding-left: 1rem; padding-right: 1rem; }

    h1 { font-size: 1.6rem; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.15rem; }

    .hero h1, .page-header h1 { font-size: 1.5rem !important; }
    .hero p.lead, .page-header .lead { font-size: 0.95rem !important; }

    .section-py { padding-top: 2.25rem; padding-bottom: 2.25rem; }

    /* Stat/number highlight blocks are the first thing that feels
       cramped on a small phone — give them a touch more breathing room
       and a smaller number so three or four still fit per row. */
    .stat-card { padding: 20px 14px; }

    /* Forms: full-width submit buttons read as more tappable than an
       inline button floating at whatever width its label produced. */
    form .btn.btn-primary.w-100,
    .card-footer form .btn {
        min-height: 46px;
    }

    /* Card grids: tighten the default Bootstrap gutter slightly so two
       narrow cards (e.g. col-6 stat tiles) don't feel squeezed. */
    .row.g-3 > * { padding-top: 0.4rem; }

    /* Breadcrumbs wrap instead of overflowing under a long page title. */
    .breadcrumb { flex-wrap: wrap; }
}

/* -----------------------------------------------------------------------
   4. VERY SMALL PHONES (<= 374.98px — iPhone SE / small Android)
   ----------------------------------------------------------------------- */
@media (max-width: 374.98px) {
    .hero h1, .page-header h1 { font-size: 1.3rem !important; }
    .brand-card-title { font-size: 1rem; }
    .stat-number { font-size: 1.5rem !important; }
    .admin-content { padding: 1rem !important; }
}

/* -----------------------------------------------------------------------
   5. ADMIN PANEL — phone/tablet polish
   ----------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    .admin-content { padding: 1.25rem; }

    /* Topbar: language switcher + profile menu wrap under the sidebar
       toggle instead of being squeezed into one unreadable row. */
    .admin-topbar {
        flex-wrap: wrap;
        row-gap: 0.5rem;
        padding: 0.65rem 1rem;
    }
    .admin-topbar .ms-auto { margin-left: 0 !important; }

    .admin-stat-card { padding: 1rem; }
}

@media (max-width: 575.98px) {
    .admin-content { padding: 1rem; }

    /* Admin form rows (row g-3 with several col-md-*) already stack via
       Bootstrap; just make sure the card padding doesn't eat too much
       of a 320-375px-wide screen. */
    .card-body { padding: 1rem; }
    .card-footer { padding: 0.85rem 1rem; }

    /* The login-card / verify-2fa card component (auth pages) shouldn't
       touch the screen edges on a small phone. */
    .login-card { padding: 1.75rem 1.25rem; margin: 0 0.75rem; }
}

/* -----------------------------------------------------------------------
   6. LANDSCAPE PHONES — hero/page-header shouldn't eat the whole
      viewport height when it's short and wide.
   ----------------------------------------------------------------------- */
@media (max-height: 480px) and (orientation: landscape) {
    .hero-carousel, .hero-content { height: 320px !important; }
    .page-header { min-height: 220px !important; }
}

/* -----------------------------------------------------------------------
   7. PRINT — admin chrome and floating widgets have no business on a
      printed page (e.g. printing a news article or a vacancy listing).
   ----------------------------------------------------------------------- */
@media print {
    .scroll-top-btn,
    .sipdc-assistant,
    .navbar,
    .topbar,
    footer,
    .admin-sidebar,
    .admin-topbar {
        display: none !important;
    }
}

/* -----------------------------------------------------------------------
   8. DESKTOP HOVER DROPDOWNS (>= 992px)
      Triggers main navigation dropdown menus on mouse hover for desktop screens,
      leaving mobile touch toggling intact.
   ----------------------------------------------------------------------- */
@media (min-width: 992px) {
    /* Show dropdown menu on nav item hover */
    .navbar .nav-item.dropdown:hover > .dropdown-menu {
        display: block !important;
        margin-top: 0; /* Ensures no gap breaks mouse tracking */
        animation: subDropFade 0.2s ease forwards;
    }

    /* Show multi-level nested dropdowns on submenu item hover */
    .navbar .dropdown-submenu:hover > .dropdown-menu {
        display: block !important;
        top: 0;
        left: 100%;
        margin-top: -6px;
    }

    /* Keep dropdown menu active when cursor moves into it */
    .navbar .dropdown-menu {
        margin-top: 0;
    }
}

/* -----------------------------------------------------------------------
   9. MOBILE GUTTER FIX — Bootstrap's `.g-5` row gutter (used for several
      wide two-column sections: homepage About/Board, Contact page) sets
      a larger negative row margin than `.container`'s own padding
      compensates for at narrow widths, which was pushing real page
      content ~8px past the edge of small phones (invisible thanks to
      the `overflow-x: hidden` safety net above, but still a genuine
      layout bug worth closing at the root). Scoped to phones only —
      tablet and desktop keep the full gutter, unchanged.
   ----------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .row.g-5,
    .row.gx-5 {
        --bs-gutter-x: 1.5rem;
    }
}

/* -----------------------------------------------------------------------
   10. TEXT JUSTIFICATION — long-form paragraph content (news articles,
       service/product descriptions, org-unit overviews, about text, etc.)
       reads more like a published, professional document when justified
       on both edges, matching the polish expected of a national industrial
       corporation's site. Scoped to actual paragraph copy only — never
       navigation, buttons, badges, cards' short labels, or headings, which
       must stay left-aligned to read naturally.
       `hyphens: auto` avoids the large, ugly gaps justification can create
       when a long word barely fits a line.
   ----------------------------------------------------------------------- */
.brand-rich-text,
.brand-rich-text p,
.brand-card-text,
.brand-bio-text,
.brand-lede,
.sipdc-details-rich-text,
.org-unit-desc,
.sipdc-agro-intro-text,
.modal-body p,
article p,
.content-body p {
    text-align: justify;
    text-justify: inter-word;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* On very narrow phones, a justified paragraph often only fits 3-5 words
   per line — at that width, forcing full justification creates worse
   spacing (rivers of whitespace) than it solves, so ease off to a normal
   left-aligned read below 480px, same as most mobile-optimized news apps. */
@media (max-width: 480px) {
    .brand-rich-text,
    .brand-rich-text p,
    .brand-card-text,
    .brand-bio-text,
    .brand-lede,
    .sipdc-details-rich-text,
    .org-unit-desc,
    .sipdc-agro-intro-text,
    .modal-body p,
    article p,
    .content-body p {
        text-align: left;
    }
}