/**
 * Modern Header System - CSS (Modern / Minimal Style)
 * Unified slide-out navigation for all screen sizes
 * Includes: Transparent homepage header, full-height hero, service boxes
 */

/* ========================================================================
   TOP CONTACT BAR
   ======================================================================== */

.top-contact-bar {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  transition: all 0.3s ease;
  position: relative;
  z-index: 1060;
}

.top-contact-bar .social-icon {
  color: var(--primary-color);
  font-size: 1.1rem;
  transition: color 0.2s ease;
  text-decoration: none;
}

.top-contact-bar .social-icon:hover {
  color: var(--primary-color-dark);
}

.top-contact-bar .btn-outline-primary {
  font-size: 0.813rem;
  padding: 0.375rem 0.875rem;
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.top-contact-bar .btn-outline-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(52, 119, 173, 0.2);
}

/* Mobile CTA buttons - 50% width each */
.mobile-cta-buttons {
  display: flex;
  gap: 0.5rem;
  width: 100%;
  margin-inline-start: 0;
}

/* On mobile, make the container fill the parent */
@media (max-width: 767.98px) {
  .top-bar-right {
    flex: 1;
    width: 100%;
  }

  .mobile-cta-buttons {
    width: 100%;
  }
}

.mobile-cta-btn {
  flex: 1;
  min-width: 0;
  text-align: center;
  white-space: nowrap;
}


/* ========================================================================
   MAIN HEADER / NAVBAR
   ======================================================================== */

.main-header {
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  position: sticky;
  top: 0;
  z-index: 1050;
  transition: all 0.3s ease;
}

.main-header .navbar {
  padding: 0.75rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Logo styling */
.navbar-brand {
  padding: 0;
  padding-inline-start: 1rem;
  margin: 0;
  transition: all 0.3s ease;
}

@media (min-width: 992px) {
  .navbar-brand {
    padding-inline-start: 1.5rem;
  }
}

.header-logo {
  height: 60px;
  width: auto;
  transition: all 0.3s ease;
}

body.header-scrolled .header-logo {
  height: 40px;
}

/* Compact navbar padding when scrolled */
body.header-scrolled .main-header .navbar {
  padding: 0.35rem 0;
}

/* Smaller icon buttons when scrolled */
body.header-scrolled .header-icon-btn {
  padding: 0.4rem;
  font-size: 1.35rem;
}

body.header-scrolled .hamburger-btn {
  font-size: 1.5rem;
}

/* Smaller CTA buttons when scrolled */
body.header-scrolled .header-cta-buttons .btn {
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
}

/* Header right controls - search and hamburger */
.header-right-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.header-icon-btn {
  background: none;
  border: none;
  padding: 0.625rem;
  font-size: 1.5rem;
  color: var(--primary-color);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-icon-btn:hover {
  background-color: rgba(52, 119, 173, 0.1);
  color: var(--primary-color-dark);
}

.header-icon-btn:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

.hamburger-btn {
  font-size: 1.75rem;
}

/* Header CTA buttons - shown when scrolled on desktop */
.header-cta-buttons {
  display: none;
  align-items: center;
  gap: 0.5rem;
}

.header-cta-buttons .btn {
  font-size: 0.813rem;
  padding: 0.375rem 0.875rem;
  border-radius: 30px;
  font-weight: 500;
  transition: all 0.2s ease;
}

.header-cta-buttons .btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(52, 119, 173, 0.2);
}

/* Show CTA buttons when scrolled on large screens */
@media (min-width: 992px) {
  body.header-scrolled .header-cta-buttons {
    display: flex;
  }
}


/* ========================================================================
   UNIFIED SLIDE-OUT MENU (RIGHT SIDE)
   ======================================================================== */

.slide-menu {
  position: fixed;
  top: 0;
  inset-inline-end: 0;
  width: 400px;
  max-width: 90vw;
  height: 100vh;
  background-color: #ffffff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
  z-index: 1070;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.3s ease, visibility 0.3s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.slide-menu.active {
  transform: translateX(0);
  visibility: visible;
}

/* Slide menu header */
.slide-menu-header {
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e9ecef;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  flex-shrink: 0;
}

.slide-menu-title {
  font-weight: 600;
  font-size: 1.1rem;
  color: #333;
}

.slide-menu-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  padding: 0.5rem;
  cursor: pointer;
  transition: color 0.2s ease;
  border-radius: 0.25rem;
}

.slide-menu-close:hover {
  color: var(--primary-color);
  background-color: #f8f9fa;
}

/* Slide menu content - scrollable */
.slide-menu-content {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Navigation list */
.slide-nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.slide-nav-item {
  border-bottom: 1px solid #f0f0f0;
}

.slide-nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.25rem;
  color: #333;
  font-weight: 500;
  font-size: 1rem;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: start;
  transition: all 0.2s ease;
  cursor: pointer;
}

.slide-nav-link:hover,
.slide-nav-link:focus {
  background-color: #f8f9fa;
  color: var(--primary-color);
}

.slide-nav-toggle i {
  transition: transform 0.3s ease;
  font-size: 0.875rem;
}

.slide-nav-item.active .slide-nav-toggle i {
  transform: rotate(180deg);
}

/* Standard submenu (accordion) */
.slide-submenu {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background-color: #f8f9fa;
  transition: max-height 0.3s ease, visibility 0.3s ease;
}

.slide-nav-item.active .slide-submenu {
  max-height: 500px;
  visibility: visible;
}

.slide-submenu-link {
  display: block;
  padding-block: 0.75rem;
  padding-inline: 2rem 1.25rem;
  color: #555;
  font-size: 0.95rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.slide-submenu-link:hover,
.slide-submenu-link:focus {
  background-color: #ffffff;
  color: var(--primary-color);
  padding-inline-start: 2.25rem;
}


/* ========================================================================
   MEGA MENU WITHIN SLIDE MENU (Procedures)
   ======================================================================== */

.slide-mega-menu {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
  background-color: #f8f9fa;
  transition: max-height 0.4s ease, visibility 0.4s ease;
}

.slide-nav-item.active .slide-mega-menu {
  max-height: 2000px;
  visibility: visible;
}

.mega-menu-grid {
  padding: 1rem;
}

.mega-menu-column {
  margin-bottom: 1.25rem;
}

.mega-menu-column:last-child {
  margin-bottom: 0;
}

.slide-mega-menu .mega-menu-header {
  color: var(--primary-color);
  font-weight: 600;
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 2px solid var(--primary-color);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mega-menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mega-menu-list li {
  margin-bottom: 0.125rem;
}

.mega-menu-list a {
  display: block;
  padding: 0.5rem 0.75rem;
  color: #555;
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 0.25rem;
  transition: all 0.2s ease;
}

.mega-menu-list a:hover,
.mega-menu-list a:focus {
  background-color: #ffffff;
  color: var(--primary-color);
  padding-inline-start: 1rem;
}

/* Desktop: Show mega menu in 2-column grid layout */
@media (min-width: 768px) {
  .slide-menu {
    width: 500px;
  }

  .mega-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .mega-menu-column {
    margin-bottom: 0;
  }
}


/* ========================================================================
   SLIDE MENU FOOTER (CTA + Social)
   ======================================================================== */

.slide-nav-footer {
  padding: 1.5rem 1.25rem;
  border-top: 1px solid #e9ecef;
  background-color: #f8f9fa;
  flex-shrink: 0;
}

.slide-nav-cta {
  margin-bottom: 1rem;
}

.slide-nav-cta .btn {
  font-size: 0.9rem;
  border-radius: 30px;
  font-weight: 500;
}

.slide-nav-cta .btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: white;
}

.slide-nav-cta .btn-primary:hover {
  background-color: var(--primary-color-dark);
  border-color: var(--primary-color-dark);
}

.slide-nav-cta .btn-outline-primary {
  background-color: white;
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

.slide-nav-cta .btn-outline-primary:hover {
  background-color: var(--primary-color);
  color: white;
}

.slide-nav-social {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.social-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: white;
  color: var(--primary-color);
  font-size: 1.25rem;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.social-icon-btn:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}


/* ========================================================================
   SLIDE MENU OVERLAY
   ======================================================================== */

.slide-menu-overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1065;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.slide-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}


/* ========================================================================
   SEARCH OVERLAY
   ======================================================================== */

.search-overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1080;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow-y: auto;
}

.search-overlay-content {
  margin-top: 0;
}

.search-overlay.active {
  opacity: 1;
  visibility: visible;
}

.search-header {
  padding: 1.5rem 0;
  border-bottom: 1px solid #e9ecef;
  background-color: #ffffff;
}

.search-input-wrapper {
  position: relative;
}

.search-input-icon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 1.25rem;
}

.search-input {
  width: 100%;
  padding-block: 1rem;
  padding-inline: 3rem 1rem;
  font-size: 1.25rem;
  border: 2px solid #e9ecef;
  border-radius: 0.5rem;
  outline: none;
  transition: border-color 0.2s ease;
}

.search-input:focus {
  border-color: var(--primary-color);
}

.search-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #333;
  padding: 0.5rem 1rem;
  cursor: pointer;
  margin-inline-start: 1rem;
}

.search-close:hover {
  color: var(--primary-color);
}

.search-results-container {
  flex: 1;
  overflow-y: auto;
  padding: 2rem 0;
}


/* ========================================================================
   HOMEPAGE TRANSPARENT HEADER
   ======================================================================== */

/* Homepage: transparent header at top, normal when scrolled */
/* Uses header-not-at-top for INSTANT switching (no debounce) */
body.homepage:not(.header-not-at-top) .main-header {
  background-color: transparent;
  box-shadow: none;
}

/* On homepage at top: invert logo to white */
/* Uses header-not-at-top for INSTANT switching (no debounce) */
body.homepage:not(.header-not-at-top) .header-logo {
  filter: brightness(0) invert(1);
}

/* Larger logo on homepage transparent header */
body.homepage:not(.header-scrolled) .header-logo {
  height: 80px;
}

/* White icons at top of homepage - INSTANT switching */
body.homepage:not(.header-not-at-top) .header-icon-btn {
  color: white;
}

body.homepage:not(.header-not-at-top) .header-icon-btn:hover {
  background-color: rgba(255, 255, 255, 0.2);
  color: white;
}

/* High-contrast focus indicators on transparent homepage header */
body.homepage:not(.header-not-at-top) .header-icon-btn:focus-visible,
body.homepage:not(.header-not-at-top) .navbar-brand:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

body.homepage:not(.header-not-at-top) .top-contact-bar a:focus-visible,
body.homepage:not(.header-not-at-top) .top-contact-bar .btn:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}


/* ========================================================================
   HOMEPAGE HERO - TRANSPARENT HEADER ADJUSTMENTS
   Hero extends behind the transparent navigation header
   ======================================================================== */

/* Top bar height - used to calculate hero height so it fits exactly in viewport */
:root {
  --top-bar-height: 48px;
}

/* On homepage, pull the hero up to meet the gray top bar */
body.homepage #homepage-cover {
  margin-top: -105px;
  padding-top: 105px;
  min-height: calc(100vh - var(--top-bar-height));
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Make the hero content area fill the remaining space */
body.homepage #homepage-cover .bg-cover {
  padding-top: 1rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Center hero content vertically within the available space */
body.homepage #homepage-cover .bg-cover > .container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ========================================================================
   HERO SERVICE DOCK
   Centered dock-style service shortcuts at the bottom of the hero
   ======================================================================== */

:root {
  /* Service box colors - override these in client.css for custom colors */
  --hero-box-1: color-mix(in srgb, var(--primary-color-dark) 80%, black 20%);
  --hero-box-2: var(--primary-color);
  --hero-box-3: var(--primary-color-dark);
  --hero-box-4: var(--primary-color-light, var(--primary-color));
}

.hero-service-boxes {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  position: absolute;
  bottom: 0;
  /* PHYSICAL ON PURPOSE: centring; pairs with translateX(-50%). */
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  border-radius: 14px 14px 0 0;
  overflow: hidden;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.25);
}

.hero-service-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 110px;
  padding: 0.85rem 0.5rem 0.7rem;
  text-align: center;
}

.hero-service-box a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: white;
  text-decoration: none;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.hero-service-box a i {
  font-size: 2rem;
  flex-shrink: 0;
}

.hero-service-box a:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}

/* Box colors */
.hero-service-box--1 { background-color: var(--hero-box-1); }
.hero-service-box--2 { background-color: var(--hero-box-2); }
.hero-service-box--3 { background-color: var(--hero-box-3); }
.hero-service-box--4 { background-color: var(--hero-box-4); }

/* Mobile: full-width row below the hero */
@media (max-width: 767px) {
  .hero-service-boxes {
    position: static;
    transform: none;
    width: 100%;
    border-radius: 0;
    box-shadow: none;
  }
  .hero-service-box {
    flex: 1;
    width: auto;
    padding: 0.7rem 0.4rem 0.55rem;
  }
  .hero-service-box a {
    font-size: 0.7rem;
    gap: 0.25rem;
  }
  .hero-service-box a i {
    font-size: 1.6rem;
  }
}


/* ========================================================================
   HERO TYPOGRAPHY - RESPONSIVE
   Step down heading sizes on smaller screens
   ======================================================================== */

body.homepage #homepage-cover h1 {
  font-size: 2.75rem;
  line-height: 1.2;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

body.homepage #homepage-cover .lead {
  font-size: 1.1rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

@media (max-width: 991px) {
  body.homepage #homepage-cover h1 {
    font-size: 2.25rem;
  }
  body.homepage #homepage-cover .lead {
    font-size: 1rem;
  }
}

@media (max-width: 767px) {
  body.homepage #homepage-cover {
    min-height: auto;
  }
  body.homepage #homepage-cover .bg-cover {
    flex: none;
  }
  body.homepage #homepage-cover h1 {
    font-size: 1.75rem;
  }
  body.homepage #homepage-cover .lead {
    font-size: 0.95rem;
  }
}

@media (max-width: 480px) {
  body.homepage #homepage-cover h1 {
    font-size: 1.5rem;
  }
  body.homepage #homepage-cover .lead {
    font-size: 0.9rem;
  }
}


/* ========================================================================
   HERO VIDEO OVERLAY
   Static brand-color overlay with diagonal corners
   Top-left and bottom-right corners show more brand color;
   center is more transparent to let the video show through.
   Override --hero-overlay-* vars in client.css to customize.
   ======================================================================== */

:root {
  --hero-overlay-corner-1: rgba(42, 95, 138, 0.92);   /* top-left corner (primary-dark) */
  --hero-overlay-corner-2: rgba(52, 119, 173, 0.88);  /* bottom-right corner (primary) */
  --hero-overlay-tint: rgba(0, 0, 0, 0.4);            /* base tint for text readability */
}

.background-video-container-overlay {
  background:
    /* Brand color: top-left corner */
    linear-gradient(135deg, var(--hero-overlay-corner-1) 0%, transparent 45%),
    /* Brand color: bottom-right corner */
    linear-gradient(315deg, var(--hero-overlay-corner-2) 0%, transparent 45%),
    /* Readability: uniform dark tint so white text stays legible everywhere */
    linear-gradient(0deg, var(--hero-overlay-tint), var(--hero-overlay-tint));
  background-color: transparent !important;
}


/* ========================================================================
   HERO SCROLL INDICATOR
   ======================================================================== */

@keyframes scrollBounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(8px);
  }
  60% {
    transform: translateY(4px);
  }
}

.hero-scroll-indicator {
  position: absolute;
  bottom: 85px;
  /* PHYSICAL ON PURPOSE: centring; pairs with translateX(-50%). */
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  animation: scrollBounce 2s ease infinite;
  cursor: pointer;
  transition: color 0.2s ease;
}

.hero-scroll-indicator:hover {
  color: white;
}

@media (max-width: 768px) {
  .hero-scroll-indicator {
    bottom: 75px;
    font-size: 1.25rem;
  }
}


/* ========================================================================
   HERO SEARCH BOX (inside hero)
   ======================================================================== */

.hero-search-wrapper {
  position: relative;
  max-width: 500px;
  margin: 1.5rem auto 0;
}

.hero-search-icon {
  position: absolute;
  inset-inline-start: 1rem;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 1.1rem;
  z-index: 2;
}

.hero-search-input {
  padding-inline-start: 2.75rem;
  border-radius: 30px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.95);
  font-size: 1rem;
}

.hero-search-input:focus {
  border-color: var(--primary-color);
  background: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Hero CTA Buttons — always side by side, shrink on small screens */
.hero-cta-buttons {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

@media (max-width: 374px) {
  .hero-cta-buttons .btn {
    font-size: 0.8rem;
    padding: 0.45rem 0.75rem;
  }
}


/* ========================================================================
   RESPONSIVE ADJUSTMENTS
   ======================================================================== */

/* Mobile specific adjustments */
@media (max-width: 575.98px) {
  .slide-menu {
    width: 100%;
    max-width: 100%;
  }

  .header-logo {
    height: 50px;
  }

  body.header-scrolled .header-logo {
    height: 40px;
  }

  .mega-menu-grid {
    padding: 0.75rem;
  }

  .mega-menu-list a {
    padding: 0.625rem 0.75rem;
  }
}


/* ========================================================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================================================== */

/* Focus styles for keyboard navigation */
.slide-nav-link:focus,
.slide-submenu-link:focus,
.mega-menu-list a:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* Skip to main content link */
.skip-to-main {
  position: absolute;
  top: -100px;
  inset-inline-start: 0;
  background: var(--primary-color);
  color: white;
  padding: 0.75rem 1.5rem;
  text-decoration: none;
  z-index: 10000;
  transition: top 0.3s ease;
}

.skip-to-main:focus {
  top: 0;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .main-header,
  .header-logo,
  .slide-menu,
  .slide-menu-overlay,
  .slide-submenu,
  .slide-mega-menu,
  .hero-scroll-indicator {
    transition: none;
    animation: none;
  }
}


/* ========================================================================
   PRINT STYLES
   ======================================================================== */

@media print {
  .top-contact-bar,
  .main-header,
  .slide-menu,
  .slide-menu-overlay {
    display: none;
  }
}


/* ========================================================================
   HIGH CONTRAST MODE SUPPORT
   ======================================================================== */

@media (prefers-contrast: high) {
  .main-header {
    border-bottom: 2px solid #000;
  }

  .slide-nav-link,
  .slide-submenu-link {
    font-weight: 600;
  }
}


/* ========================================================================
   SMOOTH SCROLL
   ======================================================================== */

html {
  scroll-behavior: smooth;
}


/* ========================================================================
   RIGHT-TO-LEFT (RTL)
   ========================================================================
   The modern header mirrors on its own: the slide menu is pinned with
   inset-inline-end, so it hangs off the edge the language ends at, and the
   search field's icon and its padding well are both on the inline axis.
   Only the physical transform and the physical shadow are restated. */

/* translateX ignores `dir`. The menu now rests against the inline-end edge,
   which is the viewport's left edge under RTL, so it parks off-screen at
   -100% instead of +100%. The .active state is restated because it carries
   the same specificity as the rule above it and this block comes later. */
[dir="rtl"] .slide-menu {
  transform: translateX(-100%);
  box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
}

[dir="rtl"] .slide-menu.active {
  transform: translateX(0);
}