/* ==========================================================================
   NYALA TYPOGRAPHY & MULTI-DEVICE RESPONSIVE ACCESSIBILITY SYSTEM
   Designed for Bahir Dar City Administration Public & Administrative Portals
   Bilingual: Amharic (Ethiopic) & English (Latin)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. FONT DEFINITIONS
   Prioritizes local OS installation on Windows, falls back to web font on
   iOS, Android, macOS, Linux.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Nyala';
    src: local('Nyala'), local('Nyala Regular'),
         url('nyala.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nyala';
    src: local('Nyala'), local('Nyala Bold'),
         url('nyala.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Nyala';
    src: local('Nyala'), local('Nyala Regular'),
         url('nyala.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. DEVICE-ADAPTIVE ROOT FONT SIZING (FLUID SCALING)
   Ensures ideal proportions across smartphones, tablets, laptops, and 4K.
   -------------------------------------------------------------------------- */
html {
    /* Compact smartphones (e.g., iPhone SE, Galaxy A-series, <= 380px) */
    font-size: 15px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
    box-sizing: border-box;
}

/* Standard smartphones (381px - 639px e.g. iPhone 13/14/15, Pixel) */
@media screen and (min-width: 381px) {
    html {
        font-size: 16px; /* Crucial: Prevents iOS Safari input focus auto-zoom */
    }
}

/* Phablets & small tablets (640px - 767px) */
@media screen and (min-width: 640px) {
    html {
        font-size: 16.5px;
    }
}

/* Tablets & iPads (768px - 1023px) */
@media screen and (min-width: 768px) {
    html {
        font-size: 17px;
    }
}

/* Laptops & standard desktop (1024px - 1439px) */
@media screen and (min-width: 1024px) {
    html {
        font-size: 17.5px;
    }
}

/* Large monitors & wide desktops (1440px - 1919px) */
@media screen and (min-width: 1440px) {
    html {
        font-size: 18px;
    }
}

/* Ultra-wide & 4K displays (>= 1920px) */
@media screen and (min-width: 1920px) {
    html {
        font-size: 19px;
    }
}

/* --------------------------------------------------------------------------
   3. UNIVERSAL FONT-FAMILY ENFORCEMENT WITH NYALA
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: inherit;
}

html, body, button, input, select, textarea, p, span, a, li, label, table, th, td, blockquote {
    font-family: 'Nyala', 'Noto Sans Ethiopic', 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
}

/* Latin / English Mode Typography Priority (Tall, crisp, modern x-height) */
html[lang="en"] body,
html[lang="en"] button,
html[lang="en"] input,
html[lang="en"] select,
html[lang="en"] textarea,
html[lang="en"] p,
html[lang="en"] span,
html[lang="en"] a,
html[lang="en"] li,
html[lang="en"] label,
html[lang="en"] table,
html[lang="en"] th,
html[lang="en"] td,
html[lang="en"] blockquote,
html[lang="en"] .font-sans {
    font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Nyala', 'Noto Sans Ethiopic', sans-serif !important;
}

html[lang="en"] h1,
html[lang="en"] h2,
html[lang="en"] h3,
html[lang="en"] h4,
html[lang="en"] h5,
html[lang="en"] h6,
html[lang="en"] .font-serif,
html[lang="en"] .brand-title-main {
    font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', 'Nyala', 'Noto Serif Ethiopic', serif !important;
}

/* ABSOLUTE PROTECTION FOR FONT AWESOME AND ICONS FROM FONT OVERRIDE */
.fa, .fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, [class*="fa-"], [class^="fa-"], i[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "FontAwesome" !important;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

body {
    overflow-x: hidden;
    overflow-x: clip;
    max-width: 100vw;
    line-height: 1.68;
    color: #1e293b;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    touch-action: manipulation;
}

/* Headings and decorative titles */
h1, h2, h3, h4, h5, h6, .font-serif, .font-sans, .brand-title-main {
    font-family: 'Nyala', 'Noto Serif Ethiopic', Georgia, serif !important;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   4. DEVICE-ADAPTIVE FLUID TYPOGRAPHY (CLAMP-BASED)
   Ensures headings never blow out on small devices or shrink on desktop.
   -------------------------------------------------------------------------- */
h1, .hero-title {
    font-size: clamp(1.85rem, 4.5vw + 0.6rem, 3.6rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.01em;
}

h2 {
    font-size: clamp(1.45rem, 3vw + 0.45rem, 2.5rem) !important;
    line-height: 1.28 !important;
    letter-spacing: normal;
}

h3 {
    font-size: clamp(1.2rem, 1.8vw + 0.35rem, 1.85rem) !important;
    line-height: 1.35 !important;
}

h4 {
    font-size: clamp(1.05rem, 1.2vw + 0.3rem, 1.45rem) !important;
    line-height: 1.4 !important;
}

h5, h6 {
    font-size: clamp(0.95rem, 0.8vw + 0.25rem, 1.2rem) !important;
    line-height: 1.45 !important;
}

p, li, dd {
    font-size: clamp(0.95rem, 0.3vw + 0.85rem, 1.1rem);
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

/* Micro-text Legibility Protection on Mobile for Nyala & Latin */
.text-xs {
    font-size: clamp(0.82rem, 0.25vw + 0.8rem, 0.92rem) !important;
    line-height: 1.5 !important;
}

.text-sm {
    font-size: clamp(0.92rem, 0.3vw + 0.88rem, 1.02rem) !important;
    line-height: 1.55 !important;
}

.text-base {
    font-size: clamp(1rem, 0.35vw + 0.95rem, 1.12rem) !important;
    line-height: 1.68 !important;
}

.text-lg {
    font-size: clamp(1.05rem, 0.45vw + 0.9rem, 1.24rem) !important;
    line-height: 1.6 !important;
}

.text-xl {
    font-size: clamp(1.15rem, 0.6vw + 0.95rem, 1.45rem) !important;
    line-height: 1.5 !important;
}

.text-2xl {
    font-size: clamp(1.3rem, 1.2vw + 0.95rem, 1.75rem) !important;
    line-height: 1.35 !important;
}

.text-3xl {
    font-size: clamp(1.5rem, 2vw + 0.9rem, 2.15rem) !important;
    line-height: 1.3 !important;
}

.text-4xl {
    font-size: clamp(1.75rem, 2.8vw + 0.8rem, 2.65rem) !important;
    line-height: 1.25 !important;
}

.text-5xl {
    font-size: clamp(2rem, 3.8vw + 0.7rem, 3.25rem) !important;
    line-height: 1.2 !important;
}

.text-6xl, .text-7xl {
    font-size: clamp(2.25rem, 4.8vw + 0.6rem, 3.85rem) !important;
    line-height: 1.18 !important;
}

/* --------------------------------------------------------------------------
   5. BILINGUAL AMHARIC (ETHIOPIC) SPECIALIZED ADJUSTMENTS
   Enhances line-height and vertical space so diacritics never touch or clip.
   -------------------------------------------------------------------------- */
html[lang="am"] {
    font-feature-settings: "kern" 1, "liga" 1;
}

html[lang="am"] body,
html[lang="am"] p,
html[lang="am"] li,
html[lang="am"] span,
html[lang="am"] a {
    line-height: 1.76 !important;
    letter-spacing: 0.012em;
    word-break: normal;
    overflow-wrap: break-word;
}

html[lang="am"] h1,
html[lang="am"] h2,
html[lang="am"] h3,
html[lang="am"] h4,
html[lang="am"] h5,
html[lang="am"] h6,
html[lang="am"] .font-serif,
html[lang="am"] .font-sans {
    line-height: 1.38 !important;
    letter-spacing: 0.005em;
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   6. PRO-LEVEL ACCESSIBILITY & MOBILE TOUCH INTERACTION (WCAG 2.1 AA/AAA)
   -------------------------------------------------------------------------- */
/* Touch targets: comfortable minimum sizes for fingers on touch devices */
@media screen and (max-width: 768px) {
    a, button, input[type="button"], input[type="submit"], input[type="reset"], .btn {
        min-height: 44px;
        min-width: 44px;
    }
    
    .lang-toggle-wrap a {
        min-height: 36px;
        min-width: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    
    /* Responsive Table Containers */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Safe Viewport Padding for Notched Devices (iPhone X, 12, 13, 14, 15, 16) */
@supports (padding: max(0px)) {
    body {
        padding-left: min(0px, env(safe-area-inset-left));
        padding-right: min(0px, env(safe-area-inset-right));
    }
}

/* Accessible Focus Rings for Keyboard Navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2.5px solid #d4af37 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.25) !important;
    border-radius: 4px;
}

/* Responsive Image and Media Fluidity */
img, svg, video, canvas, iframe {
    max-width: 100%;
    height: auto;
}

/* Remove tap highlight flicker on touch screens */
* {
    -webkit-tap-highlight-color: rgba(212, 175, 55, 0.15);
}

/* Custom Accessibility Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}