/* ============================================
   Saudi Compounds Global Typography
============================================ */

:root {
  --sc-heading-font: Georgia, "Times New Roman", serif;
  --sc-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI",
                  Roboto, Helvetica, Arial, sans-serif;
  --sc-text-color: #17221f;
}

/* ============================================
   Base Typography
============================================ */

html body {
  font-family: var(--sc-body-font);
  color: var(--sc-text-color);
  font-weight: 400;
  line-height: 1.5;
}

/* General text elements inherit from their parent */
html body p,
html body li,
html body span,
html body label,
html body small,
html body strong,
html body em,
html body a {
  font-family: inherit;
}

/* Paragraph readability */
html body p {
  line-height: 1.7;
}

/* ============================================
   Standard Headings
============================================ */

html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  font-family: var(--sc-heading-font);
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* Keep elements inside headings consistent */
html body h1 a,
html body h2 a,
html body h3 a,
html body h4 a,
html body h5 a,
html body h6 a,
html body h1 span,
html body h2 span,
html body h3 span,
html body h4 span,
html body h5 span,
html body h6 span,
html body h1 strong,
html body h2 strong,
html body h3 strong,
html body h4 strong,
html body h5 strong,
html body h6 strong,
html body h1 em,
html body h2 em,
html body h3 em,
html body h4 em,
html body h5 em,
html body h6 em {
  font-family: inherit;
}

/* ============================================
   Custom Heading Classes
============================================ */

html body .sc-serif,
html body .sc-serif-title,
html body .sc-hero-title,
html body .sc-results-title,
html body .sc-section-title,
html body .card-title,
html body .section-title,
html body .page-title,
html body .property-title,
html body .compound-title,
html body .unit-title,
html body .modal-title {
  font-family: var(--sc-heading-font);
  font-weight: 500;
  font-style: normal;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

/* Links inside custom heading classes */
html body .sc-serif a,
html body .sc-serif-title a,
html body .sc-hero-title a,
html body .sc-results-title a,
html body .sc-section-title a,
html body .card-title a,
html body .section-title a,
html body .page-title a,
html body .property-title a,
html body .compound-title a,
html body .unit-title a,
html body .modal-title a {
  font-family: inherit;
}

/* ============================================
   Compound Name Typography
============================================ */

/* Grid-view compound names */
html body .sc-city-page .compound-card .sc-card-title,
html body .sc-city-page .compound-card .sc-card-title a,

/* Map-view side card compound names */
html body .sc-city-page .sc-map-list-card h3,
html body .sc-city-page .sc-map-list-card h3 a,
html body .sc-city-page .sc-map-card-title,
html body .sc-city-page .sc-map-card-title a,
html body .sc-city-page .sc-map-title-row h3,
html body .sc-city-page .sc-map-title-row h3 a,

/* Actual map popup compound-name class */
html body .sc-city-page .map-popup-title,
html body .sc-city-page .map-popup-title a,

/* Additional popup title classes */
html body .sc-city-page .sc-map-popup-title,
html body .sc-city-page .sc-map-popup-title a,
html body .sc-city-page .sc-map-popup h3,
html body .sc-city-page .sc-map-popup h3 a,
html body .sc-city-page .leaflet-popup-content h1,
html body .sc-city-page .leaflet-popup-content h2,
html body .sc-city-page .leaflet-popup-content h3,
html body .sc-city-page .leaflet-popup-content h4,
html body .sc-city-page .leaflet-popup-content h1 a,
html body .sc-city-page .leaflet-popup-content h2 a,
html body .sc-city-page .leaflet-popup-content h3 a,
html body .sc-city-page .leaflet-popup-content h4 a,

/* General compound-name classes */
html body .compound-name,
html body .compound-name a,
html body .compound-title,
html body .compound-title a {
  font-family: var(--sc-heading-font) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

/* ============================================
   Special Heading-Style Text
============================================ */

html body .sc-hero-card-label strong,
html body .sc-stat strong {
  font-family: var(--sc-heading-font);
  font-weight: 500;
  font-style: normal;
}

/* ============================================
   Prices
============================================ */

html body .sc-price,
html body .property-price,
html body .unit-price,
html body .starting-price,
html body .price-value,
html body .compound-price {
  font-family: var(--sc-heading-font);
  font-weight: 500;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

/* ============================================
   Small Uppercase Labels
============================================ */

html body .sc-section-label,
html body .sc-section-kicker,
html body .section-label,
html body .eyebrow-title,
html body .sc-eyebrow {
  font-family: var(--sc-body-font);
  color: #0b5143;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ============================================
   Forms and Interface Elements
============================================ */

html body button,
html body input,
html body select,
html body textarea,
html body .form-control,
html body .form-select,
html body .btn,
html body .nav-link,
html body .dropdown-item,
html body .breadcrumb,
html body .accordion-button {
  font-family: var(--sc-body-font);
}

/* Form placeholder typography */
html body input::placeholder,
html body textarea::placeholder {
  font-family: var(--sc-body-font);
}

/* ============================================
   Buttons and Controls
============================================ */

html body button,
html body .btn,
html body .sc-btn,
html body .sc-card-link,
html body .sc-search-submit,
html body .sc-load-more,
html body .sc-view-switch button,
html body .sc-map-toolbar button,
html body .map-popup-link,
html body .leaflet-control button {
  font-family: var(--sc-body-font) !important;
}

/* ============================================
   Badges
============================================ */

html body .badge,
html body .promo-badge,
html body .sc-featured-badge,
html body .featured-badge,
html body .sc-featured-name-badge,
html body .sc-map-badge,
html body .sc-selected-label,
html body .map-popup-badge {
  font-family: var(--sc-body-font) !important;
  font-weight: 700 !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
}

/* Keep all city-page badges separate from heading typography */
html body .sc-city-page .badge,
html body .sc-city-page .promo-badge,
html body .sc-city-page .sc-featured-badge,
html body .sc-city-page .featured-badge,
html body .sc-city-page .sc-featured-name-badge,
html body .sc-city-page .sc-map-badge,
html body .sc-city-page .sc-selected-label {
  font-family: var(--sc-body-font) !important;
}

/* ============================================
   Leaflet Map Typography
============================================ */

html body .leaflet-container,
html body .leaflet-control,
html body .leaflet-tooltip,
html body .leaflet-popup,
html body .leaflet-popup-content,
html body .leaflet-control-layers,
html body .marker-cluster {
  font-family: var(--sc-body-font);
}

/* Map popup compound name */
html body .leaflet-popup-content .map-popup-title,
html body .leaflet-popup-content .map-popup-title a,
html body .leaflet-popup-content .compound-name,
html body .leaflet-popup-content .compound-name a,
html body .leaflet-popup-content .sc-map-popup-title,
html body .leaflet-popup-content .sc-map-popup-title a {
  font-family: var(--sc-heading-font) !important;
  font-weight: 500 !important;
  font-style: normal !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

/* ============================================
   Bootstrap Icons Protection
============================================ */

html body .bi,
html body .bi::before,
html body [class^="bi-"]::before,
html body [class*=" bi-"]::before {
  font-family: "bootstrap-icons" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
}