/*
Theme Name: Alhadi HVAC
Theme URI: https://example.com/alhadi-hvac
Author: INNOX
Author URI: https://example.com
Description: RTL Arabic landing page theme for شركة الهادي للتكييف والتبريد, converted from the approved static UI with editable Customizer and admin settings.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: alhadi-hvac
*/

:root {
  --header-brand-title-size: 0.98rem;
  --header-brand-title-weight: 900;
  --header-brand-subtitle-size: 0.74rem;
  --header-brand-subtitle-weight: 800;
  --header-nav-font-size: 0.86rem;
  --header-nav-font-weight: 800;
  --header-cta-font-size: 0.82rem;
  --header-cta-font-weight: 900;
  --header-phone-font-size: 0.82rem;
  --header-phone-font-weight: 900;
  --hero-eyebrow-font-size: 0.84rem;
  --hero-eyebrow-font-weight: 800;
  --hero-title-font-size: clamp(2.35rem, 4vw, 4.25rem);
  --hero-title-font-weight: 900;
  --hero-subtitle-font-size: clamp(0.98rem, 1.22vw, 1.16rem);
  --hero-subtitle-font-weight: 600;
  --section-kicker-font-size: 0.84rem;
  --section-kicker-font-weight: 800;
  --section-title-font-size: clamp(1.55rem, 2.55vw, 2.55rem);
  --section-title-font-weight: 900;
  --section-text-font-size: 0.96rem;
  --section-text-font-weight: 400;
  --card-title-font-size: clamp(1rem, 1.25vw, 1.18rem);
  --card-title-font-weight: 800;
  --card-text-font-size: 0.91rem;
  --card-text-font-weight: 400;
  --button-text-font-size: 0.95rem;
  --button-text-font-weight: 900;
  --footer-text-font-size: 0.92rem;
  --footer-text-font-weight: 750;
}

.brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.header-shell {
  gap: clamp(10px, 1.15vw, 16px);
}

.brand {
  flex: 0 0 auto;
}

.brand-copy strong {
  font-size: var(--header-brand-title-size);
  font-weight: var(--header-brand-title-weight);
}

.brand-copy small {
  font-size: var(--header-brand-subtitle-size);
  font-weight: var(--header-brand-subtitle-weight);
}

.desktop-nav {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
  gap: clamp(8px, 1vw, 16px);
  font-size: var(--header-nav-font-size);
  font-weight: var(--header-nav-font-weight);
}

.desktop-nav a {
  padding-inline: 2px;
  white-space: nowrap;
}

.header-actions {
  flex: 0 0 auto;
  gap: 8px;
}

.header-actions .btn,
.mobile-menu-contact .btn {
  font-size: var(--header-cta-font-size);
  font-weight: var(--header-cta-font-weight);
}

.header-actions .btn {
  padding-inline: 12px;
}

.header-phone {
  font-size: var(--header-phone-font-size);
  font-weight: var(--header-phone-font-weight);
}

.eyebrow {
  font-size: var(--hero-eyebrow-font-size);
  font-weight: var(--hero-eyebrow-font-weight);
}

.section-kicker {
  font-size: var(--section-kicker-font-size);
  font-weight: var(--section-kicker-font-weight);
}

.hero h1 {
  font-size: var(--hero-title-font-size);
  font-weight: var(--hero-title-font-weight);
}

.hero-subtitle {
  font-size: var(--hero-subtitle-font-size);
  font-weight: var(--hero-subtitle-font-weight);
}

h2 {
  font-size: var(--section-title-font-size);
  font-weight: var(--section-title-font-weight);
}

h3 {
  font-size: var(--card-title-font-size);
  font-weight: var(--card-title-font-weight);
}

.section-heading p,
.intro-shell p,
.featured-copy p,
.benefit-card p,
.process-step p,
.content-block p,
.service-card p,
.types-copy p,
.areas-shell p,
.pre-faq-shell p,
.faq-item p,
.contact-info p,
.final-shell p {
  font-size: var(--section-text-font-size);
  font-weight: var(--section-text-font-weight);
}

.benefit-card p,
.process-step p,
.content-block p,
.service-card p {
  font-size: var(--card-text-font-size);
  font-weight: var(--card-text-font-weight);
}

.btn,
.mobile-cta-bar a,
.service-card a {
  font-size: var(--button-text-font-size);
  font-weight: var(--button-text-font-weight);
}

.footer-brand p,
.footer-links a,
.footer-contact p,
.footer-bottom p,
.developer-credit {
  font-size: var(--footer-text-font-size);
  font-weight: var(--footer-text-font-weight);
}

html {
  background: #041026;
}

body {
  min-height: 100svh;
}

.site-header {
  overflow: visible;
}

.alhadi-hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.footer-contact,
.footer-contact p,
.footer-contact span,
.footer-contact strong {
  text-align: right;
}

.footer-contact p {
  direction: rtl;
  justify-items: stretch;
}

.footer-contact strong {
  display: block;
  width: 100%;
  justify-self: stretch;
  direction: ltr;
  unicode-bidi: isolate;
  text-align: right;
}

.admin-bar .site-header {
  inset-block-start: 32px;
}

.admin-bar .mobile-menu {
  inset-block-start: 114px;
  max-height: calc(100svh - 114px);
}

@media (max-width: 782px) {
  .admin-bar .site-header {
    inset-block-start: 46px;
  }

  .admin-bar .mobile-menu {
    inset-block-start: 120px;
    max-height: calc(100svh - 120px);
  }
}

@media (max-width: 992px) {
  html {
    scroll-padding-top: 90px;
  }

  body {
    padding-block-start: 82px;
  }

  .site-header {
    position: fixed;
    inset-inline: 0;
    inset-block-start: 0;
    top: 0;
    width: 100%;
    z-index: 120;
    overflow: visible;
  }

  .mobile-menu {
    inset-block-start: 82px;
    top: 82px;
    z-index: 119;
    visibility: hidden;
  }

  .mobile-menu.is-open {
    visibility: visible;
  }
}

@media (max-width: 782px) {
  .admin-bar {
    padding-block-start: 82px;
  }

  .admin-bar .site-header {
    top: 46px;
    inset-block-start: 46px;
  }

  .admin-bar .mobile-menu {
    top: 128px;
    inset-block-start: 128px;
    max-height: calc(100svh - 128px);
  }
}

@media (max-width: 1320px) and (min-width: 993px) {
  .header-phone {
    display: none;
  }

  .desktop-nav {
    gap: 8px;
  }
}

@media (max-width: 768px) {
  .brand-logo {
    width: 42px;
    height: 42px;
  }
}

@media (max-width: 390px) {
  .brand-logo {
    width: 38px;
    height: 38px;
  }
}