/* ==========================================================================
   Suncity RWA - responsive layer (phones, tablets, laptops, large screens)
   Loaded after css/style.css. Desktop (1024px and wider) keeps the original design;
   everything below 1024px adapts. Breakpoints used across the site:
     <= 479   small phones          480-767  phones / large phones
     768-1023 tablets (iPad)        >= 1024  laptops and desktops
   ========================================================================== */

/* ---- Safety rules for every screen ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { overflow-x: clip; }
img, video, canvas, svg, iframe { max-width: 100%; }
img, video { height: auto; }
table { max-width: 100%; }
.main-content { min-width: 0; }
* { -webkit-tap-highlight-color: rgba(26, 35, 126, .12); }

/* ---- Desktop dropdown opened by hover (mouse) or first tap (touch laptops/tablets in landscape) ---- */
.has-dropdown.dd-open > .dropdown-menu { display: block; }

/* ---- Small laptops / iPad landscape (1024-1279px): keep the menu on one line next to the logo ---- */
@media (min-width: 1024px) and (max-width: 1279.98px) {
    body .nav-link { white-space: nowrap; padding: .5rem .65rem; }
    body .nav-menu { flex-wrap: nowrap; gap: 0; }
}

/* ---- Laptops and desktops (1280px+): menu items on one line (they used to wrap, e.g. "News & / Circulars") ---- */
@media (min-width: 1280px) {
    body .nav-link { white-space: nowrap; padding: .5rem .8rem; }
    body .nav-menu { flex-wrap: nowrap; gap: .1rem; }
}

/* ---- Tablets and phones: top bar ---- */
@media (max-width: 1023.98px) {
    body .top-header-content { flex-wrap: wrap; justify-content: center; gap: 4px 16px; }
    body .contact-info { flex-wrap: wrap; justify-content: center; gap: 2px 16px; font-size: .85rem; }
    body .social-links { justify-content: center; }
}

/* Logo row inside the menu panel: hidden on desktop, shown in the mobile/tablet panel */
.nav-panel-logo { display: none; }

/* ---- Tablets and phones: off-canvas navigation panel ---- */
@media (max-width: 1023.98px) {
    body .header-content { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    body .logo { min-width: 0; flex: 1 1 auto; }

    body .mobile-menu-toggle {
        display: flex; align-items: center; justify-content: center;
        position: relative; z-index: 1003; flex: 0 0 auto;
        width: 46px; height: 46px; padding: 0;
    }
    body .mobile-menu-toggle span { width: 24px; }

    body .main-nav {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: min(86vw, 340px); height: 100vh; height: 100dvh;
        display: block; background: #fff; box-shadow: 0 0 40px rgba(0, 0, 0, .25);
        padding: 18px 14px 28px; overflow-y: auto; -webkit-overflow-scrolling: touch;
        transform: translateX(-105%); visibility: hidden;
        transition: transform .3s ease, visibility 0s linear .3s;
        z-index: 1002;
    }
    body .main-nav.active { transform: none; visibility: visible; transition: transform .3s ease; }

    body .nav-menu { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; }
    body .nav-panel-logo { display: block; padding: 2px 14px 14px; margin: 0 0 8px; border-bottom: 1px solid #e3e7f1; list-style: none; }
    body .nav-panel-logo a { display: inline-block; }
  
    body .nav-item { width: 100%; }
    body .nav-link { width: 100%; min-height: 48px; padding: 12px 14px; font-size: 1.05rem; white-space: normal; justify-content: space-between; }
    body .dropdown-icon { display: none; }
    body .dropdown-menu {
        position: static !important; display: block !important;
        min-width: 0; margin: 2px 0 8px 14px; padding: 4px;
        background: #f4f6fb; box-shadow: none; border-radius: 8px;
    }
    body .dropdown-menu::before { display: none; }
    body .dropdown-link { min-height: 44px; padding: 11px 14px; font-size: 1rem; }

    .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 20, 60, .45); z-index: 1001; }
    .nav-backdrop.show { display: block; }
    body.nav-open { overflow: hidden; }
}

/* ---- Small readable text ---- */
@media (max-width: 767.98px) {
    /* iOS zooms into inputs smaller than 16px; keep forms steady */
    body input[type="text"], body input[type="email"], body input[type="tel"], body input[type="password"],
    body input[type="number"], body input[type="search"], body input[type="date"], body select, body textarea { font-size: 16px; }
}

/* ---- Touch screens: comfortable tap targets (finger-sized) ---- */
@media (pointer: coarse) {
    body .contact-item a, body .social-links a { display: inline-flex; align-items: center; min-height: 36px; }
    body .footer-links a, body .footer-contact a, body .footer-legal a {
        display: inline-block; padding: 9px 0; min-height: 40px; line-height: 1.4;
    }
    body .footer-social a, body .social-icon { min-width: 40px; min-height: 40px; }
    body .filter-tag, body .nc-filter-btn, body .btn { min-height: 40px; }
    body .nc-filter-btn, body .filter-tag { display: inline-flex; align-items: center; }
}

/* ---- Home page: community feed ---- */
@media (max-width: 1024px) {
    /* The sponsored / classifieds column was hidden on tablets and phones; show it under the feed instead */
    body .right-sidebar {
        display: grid; grid-column: 1 / -1; position: static;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; align-items: start;
    }
    body .right-sidebar > * { min-width: 0; }
}
@media (max-width: 560px) {
    body .issue-card-header { flex-wrap: wrap; padding: 14px 14px 10px; }
    body .issue-meta { flex: 1 1 0; min-width: 0; }
    body .issue-badges { flex: 1 1 100%; order: 3; }
    body .issue-title { font-size: 1rem; }
}

/* ---- Financial Records: stack each record as a card on phones (no sideways scrolling) ---- */
@media (max-width: 640px) {
    body .rtable, body .rtable tbody, body .rtable tr, body .rtable td { display: block; width: 100%; }
    body .rtable thead { display: none; }
    body .rtable tr { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-bottom: 1px solid #eef0f4; }
    body .rtable tr:last-child { border-bottom: none; }
    body .rtable td { padding: 0; border: 0; }
    body .rtable td:nth-child(2) { order: -1; font-size: 15px; }
    body .rtable td:nth-child(1)::before { content: "Date: "; color: #888; font-size: 12px; }
    body .rtable td:nth-child(3)::before { content: "Amount (\20B9): "; color: #888; font-size: 12px; font-weight: 400; }
    body .rtable td:nth-child(4) { margin-top: 6px; }
    body .rtable td:nth-child(4) .doc-link {
        display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px;
        background: #eef0fb; border-radius: 8px; font-size: 14px;
    }
}
@media (max-width: 640px) {
    body .rtable td:nth-child(4):not(:has(a)) { display: none; }
}
/* Phones: top bar shows only the QRT number and social icons */
@media (max-width: 767.98px) {
    body .contact-item:not(.contact-item-qrt) { display: none; }
    body .top-header-content { flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; }
    body .contact-info { justify-content: flex-start; }
}
/* Panel logo = same size as the header logo (70px / 50px / 40px) */
body .nav-panel-logo img { display: block; width: auto; max-width: none; height: 70px; }
@media (max-width: 768px) { body .nav-panel-logo img { height: 50px; } }
@media (max-width: 480px) { body .nav-panel-logo img { height: 40px; } }

/* ---- Phones (under 768px): compact footer = About on top, then Quick Links | Important Contacts side by side ---- */
@media (max-width: 767.98px) {
    body .main-footer { padding: 18px 0 8px; }
    body .footer-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 14px 14px; }
    body .footer-column { padding: 0; min-width: 0; }
    body .footer-grid .footer-column:nth-child(1) { grid-column: 1 / -1; }   /* About: full width */
    body .footer-grid .footer-column:nth-child(3) { display: none; }         /* Our Services: hidden on phones */

    body .footer-heading { font-size: .95rem; margin-bottom: 8px; padding-bottom: 4px; }
    body .footer-heading::after { width: 30px; }
    body .footer-text { font-size: .82rem; line-height: 1.5; margin-bottom: 8px; }
    body .footer-social { gap: 8px; }
    body .footer-social a, body .social-icon { width: 32px; height: 32px; min-width: 0; min-height: 0; font-size: .85rem; }

    body .footer-links { gap: 0; }
    body .footer-links li { gap: 6px; }
    body .footer-links a { font-size: .82rem; font-weight: 400; line-height: 1.3; padding: 6px 0; min-height: 0; }

    body .footer-contact { gap: 7px; }
    body .footer-contact li { gap: 6px; font-size: .78rem; font-weight: 400; line-height: 1.4; }
    body .footer-contact i { min-width: 12px; font-size: .75rem; margin-top: .15rem; }
    body .footer-contact a { font-size: .78rem; padding: 0; min-height: 0; overflow-wrap: anywhere; }

    body .footer-bottom { padding: 10px 0; }
    body .footer-bottom-content { gap: 4px; }
    body .copyright p { font-size: .75rem; line-height: 1.4; }
    body .footer-legal { font-size: .75rem; gap: 6px; flex-wrap: wrap; justify-content: center; }
    body .footer-legal a { font-size: .75rem; padding: 4px 0; min-height: 0; }
}