/* =========================================================
   STOVRIES / TABARRUKK GLOBAL FONT SYSTEM
   File: assets/css/stovries-global-fonts.css
   Purpose:
   One global typography system for frontend sections.
   Use one class line in any section:
   class="st-font-system"
========================================================= */

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400;500;600;700;800&display=swap');

:root{

  /* =====================================================
     1. GLOBAL FONT FAMILY
  ===================================================== */

  --st-font-primary: 'Baloo 2', sans-serif;

  /* =====================================================
     2. GLOBAL FONT WEIGHTS
  ===================================================== */

  --st-weight-regular: 400;
  --st-weight-medium: 500;
  --st-weight-semibold: 600;
  --st-weight-bold: 700;
  --st-weight-black: 800;

  /* =====================================================
     3. GLOBAL LINE HEIGHTS
  ===================================================== */

  --st-lh-tight: 0.92;
  --st-lh-heading: 1.05;
  --st-lh-title: 1.15;
  --st-lh-normal: 1.35;
  --st-lh-body: 1.55;
  --st-lh-loose: 1.75;

  /* =====================================================
     4. GLOBAL LETTER SPACING
  ===================================================== */

  --st-track-tight: -1px;
  --st-track-normal: 0px;
  --st-track-soft: 0.3px;
  --st-track-wide: 1px;

  /* =====================================================
     5. DESKTOP FONT SCALE
     Derived from your hero + CTA + header system
  ===================================================== */

  /* Mega Hero Words */
  --st-fs-hero-small: 108px;     /* COMMUNITY */
  --st-fs-hero-mega: 240px;      /* FOOD */
  --st-fs-hero-large: 140px;     /* SERVICES */

  /* Hero / Page Titles */
  --st-fs-display: 72px;         /* CTA big title */
  --st-fs-page-title: 56px;
  --st-fs-section-title: 42px;
  --st-fs-card-title: 24px;

  /* Supporting Text */
  --st-fs-kicker: 20px;
  --st-fs-subtitle: 22px;
  --st-fs-body-lg: 18px;
  --st-fs-body: 16px;
  --st-fs-body-sm: 14px;
  --st-fs-caption: 12px;

  /* Form / Header / UI */
  --st-fs-nav: 14px;
  --st-fs-search: 16px;
  --st-fs-button: 14px;
  --st-fs-input: 14px;
  --st-fs-label: 12px;

  /* =====================================================
     6. DESKTOP MARGINS FOR TYPOGRAPHY
  ===================================================== */

  --st-mb-kicker: 10px;
  --st-mb-title: 10px;
  --st-mb-subtitle: 16px;
  --st-mb-section-title: 18px;

  /* =====================================================
     7. COLORS
  ===================================================== */

  --st-color-white: #ffffff;
  --st-color-dark: #111111;
  --st-color-text: #222222;
  --st-color-muted: #666666;
  --st-color-soft: #888888;

  --st-color-orange: #F23F19;
  --st-color-yellow: #FFB700;
  --st-color-red: #D20001;
  --st-color-green: #004227;
}

/* =========================================================
   MOBILE FONT SCALE
========================================================= */

@media(max-width:768px){
  :root{

    /* Mega Hero Words */
    --st-fs-hero-small: 50px;
    --st-fs-hero-mega: 114px;
    --st-fs-hero-large: 65px;

    /* Titles */
    --st-fs-display: 42px;
    --st-fs-page-title: 38px;
    --st-fs-section-title: 32px;
    --st-fs-card-title: 22px;

    /* Supporting Text */
    --st-fs-kicker: 16px;
    --st-fs-subtitle: 16px;
    --st-fs-body-lg: 16px;
    --st-fs-body: 15px;
    --st-fs-body-sm: 13px;
    --st-fs-caption: 12px;

    /* Form / Header / UI */
    --st-fs-nav: 14px;
    --st-fs-search: 15px;
    --st-fs-button: 14px;
    --st-fs-input: 14px;
    --st-fs-label: 12px;
  }
}

/* =========================================================
   GLOBAL ACTIVATION CLASS
   Add this class to any frontend section:
   class="st-font-system"
========================================================= */

.st-font-system,
.st-font-system *{
  font-family: var(--st-font-primary);
}

/* =========================================================
   TYPOGRAPHY UTILITY CLASSES
   Use these when you want one-line control
========================================================= */

/* Mega hero words */
.st-font-hero-small{
  font-size: var(--st-fs-hero-small);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-track-wide);
}

.st-font-hero-mega{
  font-size: var(--st-fs-hero-mega);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-track-wide);
}

.st-font-hero-large{
  font-size: var(--st-fs-hero-large);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-track-wide);
}

/* Display / section titles */
.st-font-display{
  font-size: var(--st-fs-display);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-title);
  letter-spacing: var(--st-track-normal);
}

.st-font-page-title{
  font-size: var(--st-fs-page-title);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-title);
}

.st-font-section-title{
  font-size: var(--st-fs-section-title);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-title);
}

.st-font-card-title{
  font-size: var(--st-fs-card-title);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-title);
}

/* Supporting text */
.st-font-kicker{
  font-size: var(--st-fs-kicker);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-normal);
  letter-spacing: var(--st-track-soft);
}

.st-font-subtitle{
  font-size: var(--st-fs-subtitle);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-normal);
}

.st-font-body-lg{
  font-size: var(--st-fs-body-lg);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-body);
}

.st-font-body{
  font-size: var(--st-fs-body);
  font-weight: var(--st-weight-medium);
  line-height: var(--st-lh-body);
}

.st-font-body-sm{
  font-size: var(--st-fs-body-sm);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-normal);
}

.st-font-caption{
  font-size: var(--st-fs-caption);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-normal);
}

/* Header / UI */
.st-font-nav{
  font-size: var(--st-fs-nav);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-normal);
}

.st-font-search{
  font-size: var(--st-fs-search);
  font-weight: var(--st-weight-medium);
  line-height: var(--st-lh-normal);
}

.st-font-button{
  font-size: var(--st-fs-button);
  font-weight: var(--st-weight-black);
  line-height: 1;
}

.st-font-input{
  font-size: var(--st-fs-input);
  font-weight: var(--st-weight-bold);
  line-height: var(--st-lh-normal);
}

.st-font-label{
  font-size: var(--st-fs-label);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-normal);
}

/* =========================================================
   DIRECT MAPPING TO YOUR EXISTING FRONTEND CLASSES
   This means old sections start following global font system
   without rewriting every HTML class.
========================================================= */

/* Hero */
.st-font-system .hero-section-halal,
.hero-section-halal.st-font-system{
  font-family: var(--st-font-primary);
}

.st-font-system .word-halal,
.hero-section-halal.st-font-system .word-halal{
  font-size: var(--st-fs-hero-small);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-track-wide);
}

.st-font-system .word-food,
.hero-section-halal.st-font-system .word-food{
  font-size: var(--st-fs-hero-mega);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-track-wide);
}

.st-font-system .word-services,
.hero-section-halal.st-font-system .word-services{
  font-size: var(--st-fs-hero-large);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-tight);
  letter-spacing: var(--st-track-wide);
}

.st-font-system .hero-subline,
.hero-section-halal.st-font-system .hero-subline{
  font-size: var(--st-fs-subtitle);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-normal);
}

/* Directory */
.st-font-system .tb-title,
.tb-directory-section.st-font-system .tb-title{
  font-size: var(--st-fs-section-title);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-title);
}

.st-font-system .fixed-select,
.tb-directory-section.st-font-system .fixed-select{
  font-size: var(--st-fs-input);
  font-weight: var(--st-weight-bold);
  line-height: var(--st-lh-normal);
}

.st-font-system .tb-total-count,
.tb-directory-section.st-font-system .tb-total-count{
  font-size: var(--st-fs-body-sm);
  font-weight: var(--st-weight-bold);
}

.st-font-system .tb-nav-btn,
.tb-directory-section.st-font-system .tb-nav-btn{
  font-size: var(--st-fs-button);
  font-weight: var(--st-weight-black);
  line-height: 1;
}

/* CTA */
.st-font-system .fr-cta,
.fr-cta.st-font-system{
  font-family: var(--st-font-primary);
}

.st-font-system .fr-cta__kicker,
.fr-cta.st-font-system .fr-cta__kicker{
  font-size: var(--st-fs-kicker);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-normal);
}

.st-font-system .fr-cta__title,
.fr-cta.st-font-system .fr-cta__title{
  font-size: var(--st-fs-display);
  font-weight: var(--st-weight-black);
  line-height: var(--st-lh-title);
}

.st-font-system .fr-cta__sub,
.fr-cta.st-font-system .fr-cta__sub{
  font-size: var(--st-fs-subtitle);
  font-weight: var(--st-weight-semibold);
  line-height: var(--st-lh-normal);
}

.st-font-system .fr-btn,
.fr-cta.st-font-system .fr-btn{
  font-size: var(--st-fs-button);
  font-weight: var(--st-weight-black);
  line-height: 1;
}

.st-font-system .fr-modal__title,
.fr-modal.st-font-system .fr-modal__title{
  font-size: var(--st-fs-body-lg);
  font-weight: var(--st-weight-black);
}

.st-font-system .fr-modal__desc,
.fr-modal.st-font-system .fr-modal__desc{
  font-size: var(--st-fs-body-sm);
  font-weight: var(--st-weight-semibold);
}

.st-font-system .fr-label,
.fr-modal.st-font-system .fr-label{
  font-size: var(--st-fs-label);
  font-weight: var(--st-weight-black);
}

.st-font-system .fr-input,
.fr-modal.st-font-system .fr-input{
  font-size: var(--st-fs-input);
  font-weight: var(--st-weight-bold);
}

/* Header */
.st-font-system .tbz-location,
.tbz-header.st-font-system .tbz-location,
.st-font-system .tbz-mobile-city-toggle,
.tbz-mobile-overlay.st-font-system .tbz-mobile-city-toggle{
  font-size: var(--st-fs-nav);
  font-weight: var(--st-weight-semibold);
}

.st-font-system .tbz-search input,
.tbz-header.st-font-system .tbz-search input,
.st-font-system .tbz-mobile-searchbar input,
.tbz-mobile-overlay.st-font-system .tbz-mobile-searchbar input{
  font-size: var(--st-fs-search);
  font-weight: var(--st-weight-medium);
}

.st-font-system .tbz-suggestions strong,
.tbz-header.st-font-system .tbz-suggestions strong,
.st-font-system .tbz-mobile-suggestions strong,
.tbz-mobile-overlay.st-font-system .tbz-mobile-suggestions strong{
  font-size: var(--st-fs-body-sm);
  font-weight: var(--st-weight-bold);
}

.st-font-system .tbz-suggestions small,
.tbz-header.st-font-system .tbz-suggestions small,
.st-font-system .tbz-mobile-suggestions small,
.tbz-mobile-overlay.st-font-system .tbz-mobile-suggestions small{
  font-size: var(--st-fs-caption);
  font-weight: var(--st-weight-semibold);
}