/*
=====================================
  BASE STYLES
  Variables, Typography, Base Elements
=====================================
*/

/*---------------------------------------
  CSS CUSTOM PROPERTIES (VARIABLES)
  Colors are now managed in: css/color-themes.css
-----------------------------------------*/
:root {
  /* Scroll-based transparency for toolbar */
  --scroll-transparency: 0; /* 0 = no scroll, 1 = full scroll effect */
  /* Legacy Color Aliases - for backward compatibility */
  --white-color: var(--color-white, #ffffff);
  --dark-color: var(--color-black, #000000);
  --primary-color: var(--brand-primary, #ffd74f);
  --primary-color-rgb: var(--brand-primary-rgb, 255, 215, 79);
  --primary-dark: var(--brand-primary-dark, #e6c24a);
  --primary-light: var(--brand-primary-light, #ffe066);
  --menu-active-color: var(--brand-primary-faded, #f9e79f);
  --secondary-color: var(--brand-secondary, #f65129);
  --secondary-dark: var(--brand-secondary-dark, #dd4824);
  --secondary-light: var(--brand-secondary-light, #ff6b42);
  --success-color: var(--status-success, #00a05d);
  --success-dark: var(--status-success-dark, #008d4f);
  --success-light: var(--status-success-light, #00b866);
  --custom-btn-bg-color: var(--status-success, #00a05d);
  --heading-color: var(--text-primary, #2c3e50);
  --p-color: var(--text-secondary, #717275);
  --bg-light: var(--bg-secondary, #f8f9fa);
  --bg-section: var(--bg-light, #f9f9f9);
  --section-bg-color: var(--bg-light, #f9f9f9);
  --site-footer-bg-color: var(--footer-bg, #36363e);
  --border-color: var(--border-light, #e9eaeb);
  --border-light: var(--border-light, #e9eaeb);
  --shadow-light: var(--shadow-sm, rgba(0, 0, 0, 0.08));
  --shadow-dark: var(--shadow-md, rgba(0, 0, 0, 0.15));

  /* Button Variants - Updated to use new color system */
  --btn-primary-bg: var(--btn-primary-bg, var(--brand-primary));
  --btn-primary-hover: var(--btn-primary-hover, var(--brand-primary-dark));
  --btn-success-bg: var(--btn-secondary-bg, var(--status-success));
  --btn-success-hover: var(--btn-secondary-hover, var(--status-success-dark));
  --btn-outline-text: var(--btn-outline-text, var(--status-success));
  --btn-outline-border: var(--btn-outline-border, var(--status-success));
  --btn-outline-hover-text: var(--btn-outline-hover-text, var(--color-white));
  --btn-outline-hover-bg: var(--btn-outline-hover-bg, var(--status-success));

  /* Social Media Colors - Using new system */
  --twitter-color: var(--social-twitter, #1da1f2);
  --facebook-color: var(--social-facebook, #1877f2);
  --instagram-color: var(--social-instagram, #c13584);
  --pinterest-color: var(--social-pinterest, #e60023);
  --whatsapp-color: var(--social-whatsapp, #25d366);

  /* Emergency Services Colors - Updated */
  --emergency-call-text-color: var(--emergency-text, #c0392b);
  --emergency-call-text-hover: var(--emergency-text-hover, #a93226);
  --emergency-text-shadow: var(
    --emergency-text-shadow,
    1px 1px 2px rgba(0, 0, 0, 0.3)
  );
  --emergency-text-shadow-hover: var(
    --emergency-text-shadow-hover,
    1px 1px 3px rgba(0, 0, 0, 0.4)
  );

  /* TYPOGRAPHY & LAYOUT VARIABLES */
  --body-font-family: "League Spartan", sans-serif;

  --h1-font-size: 62px;
  --h2-font-size: 48px;
  --h3-font-size: 36px;
  --h4-font-size: 32px;
  --h5-font-size: 24px;
  --h6-font-size: 22px;
  --p-font-size: 20px;
  --btn-font-size: 16px;
  --copyright-font-size: 14px;

  --border-radius-large: 100px;
  --border-radius-medium: 20px;
  --border-radius-small: 10px;

  /* Spacing Variables */
  --spacing-xs: 8px;
  --spacing-sm: 16px;
  --spacing-md: 24px;
  --spacing-lg: 32px;
  --spacing-xl: 48px;
  --spacing-xxl: 64px;
  --spacing-xxxl: 100px;
  --spacing-section-gap: 30px;

  /* Emergency Service Component */
  --emergency-transition-duration: 0.3s;
  --emergency-max-height-open: 100px;
  --emergency-max-height-closed: 0;
  --emergency-opacity-open: 1;
  --emergency-opacity-closed: 0;
  --emergency-mobile-breakpoint: 992px;
  --emergency-icon-rotation-open: 180deg;
  --emergency-icon-rotation-closed: 0deg;

  /* Header & Toolbar Heights for Calculations */
  --header-toolbar-combined-height: 116px; /* navbar 71px + toolbar ~45px */

  /* ===================================
   LOGO SIZE SYSTEM - STANDARDIZED VARIABLES
   ===================================

   This system provides consistent logo sizing across all breakpoints.
   All logo dimensions are centralized here to prevent hardcoded values.

   Usage:
   - Use var(--logo-width-mobile) for mobile breakpoints (< 768px)
   - Use var(--logo-width-tablet) for tablet breakpoints (768px - 991px)
   - Use var(--logo-width-desktop) for desktop breakpoints (≥ 992px)
   - Use var(--logo-toolbar-width) for toolbar-specific logos

   DO NOT use hardcoded pixel values for logos anywhere in the codebase.
   Always reference these CSS custom properties.
   =================================== */

  /* Logo Dimensions */
  --logo-width-mobile: 45px;
  --logo-height-mobile: 40px;
  --logo-width-tablet: 50px;
  --logo-height-tablet: 45px;
  --logo-width-desktop: 55px;
  --logo-height-desktop: 50px;
  --logo-toolbar-width: 55px;
  --logo-toolbar-height: 50px;

  /* Component Padding */
  --section-padding-vertical: var(--spacing-xxxl);
  --section-gap-desktop: var(--spacing-section-gap);
  --section-gap-tablet: var(--spacing-md);
  --section-gap-mobile: var(--spacing-sm);
  --custom-block-padding: 30px 50px;
  --border-thick: 20px;

  /* Navigation Heights */
  --navbar-height-desktop: 71px;
  --navbar-height-tablet: 65px;
  --navbar-height-mobile: 50px;
  --current-navbar-height: var(--navbar-height-desktop);

  /* Responsive Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 992px;

  --font-weight-thin: 100;
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Hero Form Button Sizing */
  --hero-btn-max-width-lg: 220px; /* Tablet (up to 991px) */
  --hero-btn-max-width-md: 200px; /* Mobile (up to 575px) */
  --hero-btn-max-width-sm: 180px; /* Small mobile (up to 420px) */
  --hero-btn-max-width-xs: 160px; /* Tiny mobile (up to 350px) */
}

/*---------------------------------------
  BASE HTML ELEMENTS
-----------------------------------------*/

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

body {
  background-color: var(--white-color);
  font-family: var(--body-font-family);
}

/* Skip link for accessibility */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary-color);
  color: white;
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 10000;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 6px;
}

.visually-hidden-focusable {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.visually-hidden-focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: inherit !important;
  margin: inherit !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/*---------------------------------------
  TYPOGRAPHY
-----------------------------------------*/

h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: var(--font-weight-semibold);
}

h1 {
  font-size: var(--h1-font-size);
  font-weight: var(--font-weight-bold);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
  line-height: normal;
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-light);
}

ul li {
  color: var(--p-color);
  font-size: var(--p-font-size);
  font-weight: var(--font-weight-normal);
}

a,
button {
  touch-action: manipulation;
  transition: all 0.3s;
}

a {
  color: var(--p-color);
  text-decoration: none;
}

a:hover {
  color: var(--secondary-color);
}

b,
strong {
  font-weight: var(--font-weight-bold);
}

/*---------------------------------------
  UTILITY CLASSES
-----------------------------------------*/

.tooplate-red {
  color: var(--secondary-color);
}
.tooplate-green {
  color: var(--custom-btn-bg-color);
}
.tooplate-black {
  color: #000000;
}

/*---------------------------------------
  SECTION BASE STYLES
-----------------------------------------*/
.section-padding {
  padding-top: var(--section-padding-vertical);
  padding-bottom: var(--section-padding-vertical);
}

.section-bg {
  background: var(--section-bg-color);
}

.section-small-title {
  color: var(--custom-btn-bg-color);
  font-size: var(--btn-font-size);
  font-weight: var(--font-weight-semibold);
  display: block;
}

.section-overlay {
  background: rgba(0, 0, 0, 0.25);
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
}