/* =========================================
   1. DEFINE FONTS (Load files)
   ========================================= */

/* --- HILDA (For Body Text) --- */
@font-face {
    font-family: 'Hilda';
    src: url('../fonts/Hilda/Hilda.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* --- IRANSansX (For Menus & UI) --- */
/* We map the weights so CSS knows which file to use for bold, light, etc. */

/* 100 - Thin */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

/* 200 - UltraLight */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-UltraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

/* 300 - Light */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

/* 400 - Regular (Standard) */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

/* 500 - Medium */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

/* 600 - DemiBold */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-DemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/* 700 - Bold */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

/* 800 - ExtraBold */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

/* 900 - Black (Combining Black, Heavy, ExtraBlack into 900 for simplicity) */
@font-face {
    font-family: 'IranSansX';
    src: url('../fonts/IranSansX/IRANSansX-Black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
}

/* =========================================
   2. APPLY FONTS (Only for Farsi)
   ========================================= */

/* Apply Hilda to the general body of Farsi pages */
html[lang="fa"] body {
    font-family: 'Hilda', sans-serif;
}

/* Apply IranSansX to Navigation, Menus, and Buttons */
/* Note: I included common class names used in Bootstrap and standard CMS menus */
html[lang="fa"] nav,
html[lang="fa"] .navbar,
html[lang="fa"] .nav,
html[lang="fa"] .menu,
html[lang="fa"] .dropdown-menu,
html[lang="fa"] .btn,
html[lang="fa"] button,
html[lang="fa"] header {
    font-family: 'IranSansX', sans-serif;
}

/* OPTIONAL: Since Hilda is "cartoonic", you might want Headings to be IranSansX too? 
   If so, uncomment the lines below: */

html[lang="fa"] h1, 
html[lang="fa"] h2, 
html[lang="fa"] h3, 
html[lang="fa"] h4, 
html[lang="fa"] h5, 
html[lang="fa"] h6 {
    font-family: 'Hilda', sans-serif;
}


/* Target the whole body when in RTL mode */
html[dir="rtl"] body {
    text-align: right;
    direction: rtl;
}

/* Force standard paragraphs and lists to align right */
html[dir="rtl"] p,
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] ul, html[dir="rtl"] ol, html[dir="rtl"] li {
    text-align: right;
}

html, body {
  height: 100%;
}
body {
  padding-top: 4.5rem;
  padding-left: 4.5rem;
  padding-right: 4.5rem;
}
a {
  color: #20AA76;
}
a:hover {
  color: #092e20;
  text-decoration: none;
}
.cms-toolbar-expanded {
  height: calc(100vh - 46px);
}
.cms-structure-mode-structure {
  min-height: calc(100vh - 46px);
}
.cms-toolbar-expanded .navbar {
  top: 46px;
}
#page-content {
  flex: 1 0 auto;
}

.main-container {
    width: 100%;           /* Take full width on small screens */
    max-width: 1200px;     /* Stop growing on huge screens */
    margin-right: auto;    /* These two lines center the box */
    margin-left: auto;     
    padding-right: 20px;   /* The internal "breathing room" */
    padding-left: 20px;
    box-sizing: border-box; /* Ensures padding doesn't break the width */
}

/* The Band Container */
.holiday-band {
    width: 100%;
    height: 40px; /* Slim and elegant */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
    position: relative;
    z-index: 2000; /* Ensure it's above the navbar */
}

/* Specific Colors for each holiday */
.holiday-band.yalda {
    background-color: #800000; /* Pomegranate Red */
    color: #fff;
    z-index: 1020;
}

.holiday-band.christmas {
    background-color: #0f5132; /* Christmas Green */
    color: #fff;
    z-index: 1020;
}

.holiday-band.sylvester {
    background-color: #000;    /* Night Black */
    color: #ffd700;            /* Gold text */
    z-index: 1020;
}

.holiday-band.nowruz {
    background-color: #d4edda; /* Fresh Spring Green */
    color: #155724;
    z-index: 1020;
}

/* The Image/GIF Styling */
.holiday-band img {
    height: 30px; /* Fit inside the band */
    width: auto;
    margin: 0 10px; /* Space between text and image */
    vertical-align: middle;
}

.preview-img {
    max-width: 200px;
    max-height: 200px;
    height: auto;
    border-radius: 5px;
}