/* ============================================================================
   Devashray Portal - Shared Base Styles
   Complements Tailwind CDN config (colors, fonts, spacing tokens).
   ============================================================================ */

@layer base {
    html,
    body {
        margin: 0;
        padding: 0;
    }
    body {
        overscroll-behavior: none;
    }
    main > :first-child {
        margin-top: 0 !important;
    }
    main > :last-child {
        margin-bottom: 0 !important;
    }
}

/* Hide scrollbars for cleaner devotional look */
::-webkit-scrollbar {
    display: none;
}

/* Material Symbols - base sizing so utilities like text-[18px] work properly */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Smooth-scroll for in-page anchors (e.g., donation portal anchor) */
html {
    scroll-behavior: smooth;
}

/* Focus outline for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #7b1106;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Responsive helper - line clamp utility (in case Tailwind plugin missing) */
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Hide horizontal scrollbar on the panchang ticker */
.overflow-x-auto {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.overflow-x-auto::-webkit-scrollbar {
    display: none;
}

/* Mobile menu animation */
#mobileMenu {
    transition: max-height 0.25s ease-in-out;
    overflow: hidden;
}
#mobileMenu.open {
    display: block !important;
}

/* ============================================================================
   MOBILE PROFESSIONAL REFINEMENT  (≤639px — below Tailwind `sm` breakpoint)
   The design system ships desktop-first type/spacing tokens (headline-xl 48px,
   headline-lg 36px, px-margin 48px…). On phones this makes every page look
   oversized. This layer rescales the SAME tokens to a compact editorial mobile
   rhythm. Desktop (≥640px) is completely untouched.
   Tailwind Play CDN re-injects its stylesheet last, so !important is required.
   ============================================================================ */
@media (max-width: 639.98px) {
    html {
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }
    body {
        overflow-wrap: break-word;
    }

    /* ---- Named type tokens (mobile scale) ----
       Noto Serif Bengali runs optically ~30% larger than Latin serif at the
       same px, and page hero titles are long multi-clause Bengali sentences.
       Headings therefore step down two full notches so page tops read as
       compact editorial headers instead of poster type. */
    .text-headline-xl { font-size: 1.4375rem !important; line-height: 1.35 !important; letter-spacing: -0.01em !important; } /* 23px */
    .text-headline-lg-mobile { font-size: 1.4375rem !important; line-height: 1.35 !important; } /* 23px */
    .text-headline-xl-mobile { font-size: 1.4375rem !important; line-height: 1.35 !important; } /* 23px */
    .text-headline-lg { font-size: 1.3125rem !important; line-height: 1.4  !important; } /* 21px */
    .text-headline-md { font-size: 1.125rem  !important; line-height: 1.4  !important; } /* 18px */
    .text-headline-sm { font-size: 1rem      !important; line-height: 1.45 !important; } /* 16px */
    .text-title-lg    { font-size: 0.9375rem !important; line-height: 1.5  !important; } /* 15px */
    .text-title-md    { font-size: 0.875rem  !important; line-height: 1.5  !important; } /* 14px */
    .text-body-lg     { font-size: 0.9375rem !important; line-height: 1.7  !important; } /* 15px */
    .text-body-md     { font-size: 0.875rem  !important; line-height: 1.65 !important; } /* 14px */

    /* ---- Standard Tailwind sizes used in markup ---- */
    .text-3xl { font-size: 1.25rem   !important; line-height: 1.35 !important; } /* 20px */
    .text-2xl { font-size: 1.125rem  !important; line-height: 1.4  !important; } /* 18px */
    .text-xl  { font-size: 1rem      !important; line-height: 1.45 !important; } /* 16px */
    .text-lg  { font-size: 0.9375rem !important; line-height: 1.5  !important; } /* 15px */

    /* ---- Large display accents (stats, prices, hero numerals) ---- */
    .text-\[40px\] { font-size: 1.5rem    !important; line-height: 1.25 !important; } /* 24px */
    .text-\[36px\] { font-size: 1.375rem  !important; line-height: 1.25 !important; } /* 22px */
    .text-\[32px\] { font-size: 1.3125rem !important; line-height: 1.3  !important; } /* 21px */
    .text-\[30px\] { font-size: 1.25rem   !important; line-height: 1.3  !important; } /* 20px */
    .text-\[28px\] { font-size: 1.125rem  !important; line-height: 1.35 !important; } /* 18px */
    .text-\[26px\] { font-size: 1.0625rem !important; line-height: 1.35 !important; } /* 17px */

    /* ---- Body-ish arbitrary sizes (cards, paragraphs, icons) ---- */
    .text-\[24px\] { font-size: 1.125rem  !important; line-height: 1.4 !important; }
    .text-\[22px\] { font-size: 1.0625rem !important; line-height: 1.4 !important; }
    .text-\[20px\] { font-size: 1rem      !important; line-height: 1.4 !important; }
    .text-\[18px\] { font-size: 0.9375rem !important; line-height: 1.5 !important; }
    .text-\[16px\] { font-size: 0.90625rem !important; line-height: 1.5 !important; }
    .text-\[15px\] { font-size: 0.875rem  !important; line-height: 1.5 !important; }

    /* ---- Layout rhythm ---- */
    .px-margin    { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
    .py-16        { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    .py-12        { padding-top: 2rem   !important; padding-bottom: 2rem   !important; }
    .p-8          { padding: 1.15rem !important; }
    .p-6          { padding: 1rem    !important; }
    .gap-gutter   { gap: 1rem    !important; }
    .gap-space-xl { gap: 1rem    !important; }
    .gap-space-lg { gap: 0.75rem !important; }

    /* ---- Card / hero imagery ---- */
    .h-80 { height: 250px !important; }
    .h-64 { height: 200px !important; }
    .h-60 { height: 185px !important; }

    /* ---- Compact sticky header (ticker 30px + bar 60px = 90px) ---- */
    header .h-20 { height: 3.75rem !important; }
    header img[class*="h-11"] { height: 2.25rem !important; }
    .pt-\[108px\] { padding-top: 6rem !important; }
    /* keep the panchang ticker + language switcher on one line */
    header .bg-surface-container-high > div:last-child {
        flex-shrink: 0 !important;
        white-space: nowrap;
    }

    /* ---- Shrinkability: stop min-width:auto from stretching the mobile
       layout viewport (fixed w-full header inherits the inflated width) ---- */
    main .flex-1,
    main [class*="col-span"],
    main [class*="grid"] > * { min-width: 0; }

    /* ---- iOS Safari: keep form fields ≥16px to stop focus auto-zoom ---- */
    input[class], textarea[class], select[class] { font-size: 16px !important; }
}

/* ============================================================================
   MOBILE NAV DRAWER (hamburger menu) — compact professional typography
   The drawer previously inherited the display type scale: Bengali labels
   rendered in Noto Serif Bengali at 15-16px, which reads optically like
   ~20px Latin text — oversized and unpolished. This layer rebuilds the
   drawer as compact UI chrome (Material-3 navigation-drawer proportions):
   Noto Sans Bengali face, 14px rows, tight vertical rhythm, smooth entrance.
   Applies at every width where the drawer is visible (phones + tablets,
   below the xl desktop breakpoint).
   !important is required because the Tailwind Play CDN re-injects its
   stylesheet after this file.
   ============================================================================ */
#mobileMenu {
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    box-shadow: 0 24px 38px -20px rgba(47, 49, 46, 0.28);
}
/* smooth entrance each time the drawer is opened (restarts on display toggle) */
#mobileMenu:not(.hidden) {
    animation: dv-drawer-in 0.22s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@keyframes dv-drawer-in {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    #mobileMenu:not(.hidden) { animation: none; }
}
/* UI face for the whole drawer (sans Bengali reads far more compact;
   Plus Jakarta Sans first so English labels use the brand Latin face) */
#mobileMenu a {
    font-family: 'Plus Jakarta Sans', 'Noto Sans Bengali', 'Noto Sans', sans-serif !important;
    letter-spacing: 0 !important;
}
/* tight vertical rhythm inside the drawer */
#mobileMenu > div {
    gap: 2px !important;
    padding-top: 8px !important;
    padding-bottom: 12px !important;
}
/* primary navigation rows: 14px, tight rhythm, comfortable touch targets */
#mobileMenu a[data-path] {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    padding: 9px 12px !important;
    min-height: 40px;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#mobileMenu a[data-path].bg-primary-container { font-weight: 600 !important; }
/* bottom quick-action buttons: compact pill labels */
#mobileMenu div.flex.items-center a {
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
}
/* login / register row */
#mobileMenu #mobile-login-link {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
    padding: 11px 12px !important;
    margin-top: 6px !important;
}

/* ============================================================================
   TOPBAR PANCHANG TICKER — news-ticker marquee on small screens
   The full panchang line (~456px at 10px type) only fits from ~1024px up;
   below that the header hard-clips it, so phones/tablets scroll it
   continuously instead (the "আজকের পঞ্জিকা:" label stays fixed). A negative
   animation-delay makes the start of the line visible immediately on load,
   and the brief pause between sweeps gives a natural reading reset.
   Desktop (≥1024px) keeps the static line.
   ============================================================================ */
@keyframes dv-ticker-scroll {
    from { transform: translateX(100%); }
    to   { transform: translateX(-100%); }
}
@media (max-width: 1023.98px) {
    header [data-i18n="panjika_ticker"] {
        display: inline-block;
        white-space: nowrap;
        animation: dv-ticker-scroll 14s linear infinite;
        animation-delay: -5s;
        will-change: transform;
    }
}
@media (prefers-reduced-motion: reduce) {
    header [data-i18n="panjika_ticker"] { animation: none; }
}