/* ==========================================================================
   Typography system - GIGW / Government of India Digital Brand Identity
   Primary typeface: Noto Sans (+ Noto Sans script families for Indian languages).
   Font files are self-hosted: see noto-sans.css and ./fonts/noto/.
   Loaded after style.css and colours.css.
   ========================================================================== */

:root {
    /* Typeface. Browsers pick glyphs per character, so each Indian script falls
       through to its own Noto family; Latin text is always Noto Sans. */
    --font-primary: 'Noto Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans Bengali',
        'Noto Sans Gujarati', 'Noto Sans Gurmukhi', 'Noto Sans Kannada', 'Noto Sans Malayalam',
        'Noto Sans Oriya', 'Noto Sans Telugu', 'Yu Gothic UI', 'Meiryo', 'Segoe UI', Arial, sans-serif;

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Guideline scale - desktop (reference values, px) */
    --fs-h1-desktop: 36px;
    --fs-h2-desktop: 24px;
    --fs-h3-desktop: 20px;
    --fs-body-desktop: 16px;
    --fs-body-small-desktop: 14px;
    --fs-small-desktop: 12px;

    /* Guideline scale - mobile (reference values, px) */
    --fs-h1-mobile: 24px;
    --fs-h2-mobile: 20px;
    --fs-h3-mobile: 16px;
    --fs-body-mobile: 14px;
    --fs-body-small-mobile: 12px;
    --fs-small-mobile: 10px;

    /* Working tokens (rem, so nested elements never compound).
       The site's text-size control (A- / A / A+) sets <body> to 65% / 75% / 85%;
       the html rules below mirror that onto the root size so the control keeps
       working. At the default "A" size 1rem = 16px, i.e. the px values above. */
    --fs-h1: 2.25rem;        /* 36px */
    --fs-h2: 1.5rem;         /* 24px */
    --fs-h3: 1.25rem;        /* 20px */
    --fs-body: 1rem;         /* 16px - Paragraph 1 */
    --fs-body-small: 0.875rem; /* 14px - Paragraph 2 */
    --fs-small: 0.75rem;     /* 12px */
    --lh-heading: 1.3;
    --lh-body: 1.5;
}

@media (max-width: 767px) {
    :root {
        --fs-h1: 1.5rem;       /* 24px */
        --fs-h2: 1.25rem;      /* 20px */
        --fs-h3: 1rem;         /* 16px */
        --fs-body: 0.875rem;   /* 14px */
        --fs-body-small: 0.75rem; /* 12px */
        --fs-small: 0.625rem;  /* 10px */
    }
}

/* ---------- Base ---------- */
/* !important: 18.css forces html/body to 12px below 1024px, which would shrink every rem token */
html { font-size: 16px !important; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* A- / A+ text-size control (access.js writes font-size on <body>) */
html:has(body[style*="font-size: 65%"]) { font-size: 13.867px !important; }
html:has(body[style*="font-size: 85%"]) { font-size: 18.133px !important; }
body {
    font-family: var(--font-primary);
    font-weight: var(--font-regular);
    line-height: var(--lh-body);
    letter-spacing: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
button, input, select, textarea, optgroup, .btn, .button {
    font-family: var(--font-primary);
    letter-spacing: normal;
}
/* Third-party widgets that set their own family */
.ui, .ui.dropdown, .ui.menu, .ui.form input, .ui.form textarea, .ui.selection.dropdown,
.swal-modal, .swal-text, .swal-title, .swal2-popup, .ui-widget, .ui-datepicker, .datepicker,
.goog-te-gadget, .goog-te-gadget-simple, .modal, .tooltip, .popover {
    font-family: var(--font-primary);
}

/* ---------- Headings ---------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary);
    font-weight: var(--font-semibold);
    line-height: var(--lh-heading);
    letter-spacing: normal;
    margin-top: 0;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4, h5, h6 { font-size: var(--fs-body); }

/* Page title banner (inner pages) = Heading 1 */
.innerBanner .container > span,
.innerBanner h1 {
    font-size: var(--fs-h1);
    font-weight: var(--font-bold);
    line-height: 1.2;
}
/* Content headings */
#innerContent h2, .mcontent h2, .contentPart h2,
.rightPart .menuTitle {
    font-size: var(--fs-h2);
    font-weight: var(--font-semibold);
    line-height: var(--lh-heading);
}
#innerContent h3, .mcontent h3 { font-size: var(--fs-h3); }
#innerContent h4, .mcontent h4 { font-size: var(--fs-body); }

/* Site identity lockup: organisation name = Heading 3 level */
.logo-text { font-size: var(--fs-h3); font-weight: var(--font-bold); line-height: 1.25; margin: 0; }
.logo-subtext { font-size: var(--fs-body-small); font-weight: var(--font-regular); line-height: 1.3; margin: 2px 0 0; }

/* Card / panel headings = Heading 3 (subtitle) */
.info-header, .important-links-title, .grid-section h2 {
    font-size: var(--fs-h3);
    font-weight: var(--font-semibold);
    line-height: var(--lh-heading);
}
.profile-name, h3.Emergency, .connect-info h4, h4.contact-title {
    font-size: var(--fs-body);
    font-weight: var(--font-semibold);
    line-height: var(--lh-heading);
}

/* ---------- Body copy (Paragraph 1) ---------- */
#innerContent .mcontent p, #innerContent .mcontent li,
.mcontent p, .mcontent li, .contentPart p {
    font-size: var(--fs-body);
    line-height: var(--lh-body);
    text-align: left;
}
.mcontent p, .contentPart p { margin: 0 0 1em; }
.mcontent strong, .mcontent b, #innerContent strong { font-weight: var(--font-semibold); }

/* ---------- Paragraph 2 (secondary UI text) ---------- */
.topStrip a, .topStrip li, .footerCont, .footerCont p, .footerLinks a,
.breadcrumb, .breadcrumb a, .breadcrumb li, .pagination a, .pagination li a,
.responsiveTable p, .responsiveTable a, .responsiveTable em, .responsiveTable strong, .responsiveTable u,
.responsiveTable span, .connect-info p, .connect-info a, .profile-links a,
.profile-section .profiles-card p, .profile-cards-content p, .album-content a.title,
.important-link-text span, .menuSubUl a, #menuLeft a, .info-footer a, .info-footer b,
.alert, .goog-te-gadget-simple span, label, .fLabel {
    font-size: var(--fs-body-small);
    line-height: 1.5;
}
/* Form labels and controls stay 16px on mobile so iOS does not zoom on focus */
input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]), select, textarea {
    font-size: var(--fs-body);
    line-height: 1.4;
}
@media (max-width: 767px) {
    input:not([type=submit]):not([type=button]):not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
    label, .fLabel { font-size: var(--fs-body); }
}

/* News / lists */
.news-list .recordBox a { font-size: var(--fs-body); font-weight: var(--font-regular); line-height: 1.5; }
.news-list .recordBox span.date, .album-content div, .designation, .date, span.date {
    font-size: var(--fs-small);
    font-weight: var(--font-regular);
}

/* ---------- Navigation ---------- */
#nav > li > a, #nav > .MenuLi > a, .mainNavigation #nav > li > a {
    font-size: var(--fs-body);
    font-weight: var(--font-medium);
    letter-spacing: normal;
}
#nav ul li a { font-size: var(--fs-body-small); font-weight: var(--font-regular); line-height: 1.5; }
#menuPartWrapper a { font-size: var(--fs-body); font-weight: var(--font-medium); letter-spacing: normal; }
.menu-trigger, .menu-trigger em { font-size: var(--fs-body-small); font-weight: var(--font-medium); }

/* ---------- Buttons ---------- */
button, .btn, input[type=submit], input[type=button], input[type=reset], .button, .view-all-btn,
.tab-btn, .grid-box p, a.btn {
    font-size: var(--fs-body-small);
    font-weight: var(--font-semibold);
    line-height: 1.3;
}
.grid-box p { font-size: var(--fs-body); }

/* ---------- Banner caption / ticker ---------- */
.sliderText p.title, .bannerCaption .title { font-size: var(--fs-body); font-weight: var(--font-medium); line-height: 1.4; }
.sliderText .title > span, .bannerCaption .title > span { font-size: var(--fs-body-small); font-weight: var(--font-regular); }
#marquees .marques_con a, .marquees a { font-size: var(--fs-body); font-weight: 400; }

/* ---------- Tables ---------- */
table { font-variant-numeric: tabular-nums; }
th { font-weight: var(--font-semibold); text-align: center; }
th, td { font-size: var(--fs-body-small); line-height: 1.5; }
td.num, td.number, th.num, th.number, td[data-type=number] { text-align: right; }

/* ---------- Inline content authored in the CMS ---------- */
/* Editors paste fixed pixel sizes; keep them inside the scale. */
.mcontent span[style*="font-size"], .profile-section span[style*="font-size"],
.profiles-card span[style*="font-size"], .profiles-card1 span[style*="font-size"] {
    font-size: inherit !important;
    font-family: var(--font-primary) !important;
}

/* ---------- Rules ---------- */
/* Long text is never forced to upper-case; short labels may be. */
p, li, td, .mcontent, .info-header, .recordBox a, .news-list a { text-transform: none; }
@media (max-width: 767px) {
    .innerBanner .container > span, .innerBanner h1 { overflow-wrap: break-word; }
}
/* Long Indic words must wrap instead of forcing horizontal scroll */
p, li, td, th, a, span, h1, h2, h3, h4, .logo-text, .logo-subtext { overflow-wrap: anywhere; }
nav a, #nav a { overflow-wrap: normal; }


/* ---------- Specificity fixes (existing theme rules are more specific) ---------- */
.logo .logo-text-wrapper p.logo-subtext, .logo .logo-text-wrapper .logo-subtext1 { font-size: var(--fs-body-small); line-height: 1.3; }
.logo .logo-text-wrapper h1.logo-text { font-size: var(--fs-h3); }
.sliderText p.title { font-size: var(--fs-body); }
.sliderText p.title span, .sliderText p.title a { font-size: var(--fs-body-small); font-weight: var(--font-medium); }
.sliderText p.title strong { font-size: var(--fs-body); font-weight: var(--font-semibold); }
.mcontent .responsiveTable p, .mcontent .responsiveTable li { font-size: var(--fs-body-small); }
p.designation, .profile-cards-content p.designation { font-size: var(--fs-small); }
#marquees .mar_up p { font-size: var(--fs-body); font-weight: var(--font-bold); }

/* ---------- Logo lockup: State Emblem + organisation name ----------
   The emblem keeps its natural aspect ratio (height drives, width is auto); the
   official Emblem_of_India.svg from the logo_management table is used unchanged. */
.logo { display: flex; align-items: center; gap: 12px; }
.logo .logo-img { flex: none; width: auto; height: 63px; max-width: none; object-fit: contain; }
.logo .logo-text-wrapper { min-width: 0; }
.logo .logo-text, .logo .logo-subtext, .logo .logo-subtext1 { text-shadow: none; margin-left: 0; }
.logo .logo-text { color: var(--color-black); }
.logo .logo-subtext, .logo .logo-subtext1 { color: var(--color-grey-03); }
@media (max-width: 767px) {
    .logo .logo-img { height: 52px; }
    .logo { gap: 10px; }
}
.footerSocial { justify-content: center; }

/* Indic scripts have tall ascenders/marks and stacked conjuncts: give headings more room
   when the page (or Google Translate) sets an Indian-language lang. */
:lang(hi) h1, :lang(hi) h2, :lang(hi) h3, :lang(bn) h1, :lang(bn) h2, :lang(bn) h3,
:lang(gu) h1, :lang(gu) h2, :lang(gu) h3, :lang(pa) h1, :lang(pa) h2, :lang(pa) h3,
:lang(kn) h1, :lang(kn) h2, :lang(kn) h3, :lang(ml) h1, :lang(ml) h2, :lang(ml) h3,
:lang(or) h1, :lang(or) h2, :lang(or) h3, :lang(ta) h1, :lang(ta) h2, :lang(ta) h3,
:lang(te) h1, :lang(te) h2, :lang(te) h3, :lang(mr) h1, :lang(mr) h2, :lang(mr) h3 { line-height: 1.5; }
:lang(hi) body, :lang(bn) body, :lang(gu) body, :lang(pa) body, :lang(kn) body, :lang(ml) body,
:lang(or) body, :lang(ta) body, :lang(te) body, :lang(mr) body { line-height: 1.7; }

/* Body text is left-aligned (editors paste text-align: justify, which opens rivers at narrow widths) */
.mcontent [style*="justify"], .contentPart [style*="justify"], #innerContent [style*="justify"] { text-align: left !important; }
.mcontent p, .mcontent li, .mcontent td, .contentPart p { text-align: left; }
/* Heavy shadows reduce legibility of the page title */
.innerBanner .container > span, .innerBanner h1 { text-shadow: none; }

/* Form fields have fixed ~324px widths in the theme; let them shrink inside narrow content columns */
@media (max-width: 480px) {
    .fielsRow, .fielsRow .fieldName, .fielsRow .fieldValues,
    .fieldValues input.textBox, .fieldValues select, .fieldValues textarea, .fieldValues .textBox {
        width: 100% !important; max-width: 100%; box-sizing: border-box; min-width: 0;
    }
    .fieldValues { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
    .fieldValues input.textBox[name*="aptcha" i], .fieldValues input.textBox[id*="aptcha" i] { width: auto !important; flex: 1 1 120px; }
}

/* One button size per breakpoint (Submit / Reset / View All etc. must match) */
.fieldValues input[type="submit"], .fieldValues input[type="reset"], .fieldValues input[type="button"], .fieldValues button,
.fielsRow .button, .view-all-btn, .tab-btn {
    font-size: var(--fs-body-small) !important; font-weight: var(--font-semibold) !important;
}
@media (max-width: 767px) {
    .fieldValues input[type="submit"], .fieldValues input[type="reset"], .fieldValues input[type="button"], .fieldValues button,
    .fielsRow .button, .view-all-btn, .tab-btn { font-size: var(--fs-body) !important; }
}

/* DBIM 4.5: line-height 1.2-1.5 x size everywhere */
.mcontent p, .mcontent li, #innerContent .mcontent p, #innerContent .mcontent li, .contentPart p, .responsiveTable p { line-height: 1.5; }
#nav > li > a, .mainNavigation #nav > li > a { line-height: 1.5; }
.profile-section a, .footerCont a, .info-footer a, .connect-info a, .recordBox a { line-height: 1.5; }
/* Short labels only: no all-caps */
.important-links-title, .connect-title, #menuPartWrapper a, .mainNavigation a, .tab-btn { text-transform: none !important; }