/*
Theme Name: Rite Away Tow
Theme URI: https://riteawaytow.com
Author: Rite Away Tow
Author URI: https://riteawaytow.com
Description: V4.4 — Orange + blue/slate palette Rite Away Tow WordPress block theme. 24/7 towing & roadside assistance in Tracy, CA. V4.4 focuses on mobile polish, gallery freshness, and contact-page cleanup. Changes vs V4.3: (1) removed the Google Maps iframe from the contact page (it was slowing page load and the service-area card already communicates coverage); (2) removed the long "Payment upfront on arrival — Card · Zelle · Cash App · Venmo · Cash" string from the site-wide emergency bar so the header reads cleanly as "24/7 Emergency Towing in Tracy, CA — Call Now: 209.689.8848" on every viewport; (3) replaced that removed payment copy with two dedicated FAQ entries — "What payment methods do you accept?" and "When do I pay — before or after the work is done?" — preserving the information where it is searchable and SEO-indexable; (4) each of the 6 shop videos in the gallery now has a distinct poster image (previously all six defaulted to the same brand-001.jpg thumbnail), paired against hero-classic-chevelle, hero-defender-suv, hero-hummer-h1, hero-harley-motorcycle, hero-stuck, and brand-028; (5) all 108 brand-*.jpg gallery photos are now shuffled with a daily-stable seed (mt_srand + gmdate 'Ymd') so the gallery feels fresh across visits but does not jitter within a single browsing session; (6) comprehensive mobile optimization pass targeting iPhone, Android, and Samsung viewports — hero CTAs now stack full-width with 48px min-height touch targets, the outline "Details" button now has a solid dark background so it remains readable over any hero photo on mobile, the hero content vertically centers instead of crowding the bottom edge, the Fast·Fair·Friendly benefits row hides on phones, a <=400px breakpoint tightens spacing for iPhone SE and older Androids, form inputs use font-size:16px to suppress iOS auto-zoom, and html/body enforce overflow-x:hidden to eliminate any accidental horizontal scroll. V4.4 keeps all V4.3 payment-method callouts, V4.2 contact-form pipeline fixes, V4.1 bulletproof service-single defenses, V4.0 hover dropdown, and earlier critical-error fixes.
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
Version: 4.4.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: riteawaytow
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, featured-images, one-column, wide-blocks, editor-style, responsive, business, news
*/

/* ============================================================
   RITE AWAY TOW v3.4 — Orange + Slate/Navy palette
   Brand colors:
     Orange  #EA580C  (primary / CTA)
     Dark orange #C2410C
     Navy    #1E40AF  (secondary)
     Slate-900 #0F172A (dark surfaces)
     Slate-700 #334155 (borders on dark)
     Slate-600 #475569 (body copy)
     Slate-400 #94A3B8 (muted)
     Slate-200 #E2E8F0 (borders)
     Slate-100 #F1F5F9 (alt bg)
     Slate-50  #F8FAFC (page bg)
   ============================================================ */

/* ---------- Font import (fallback in case enqueue is bypassed) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ---------- Base reset + typography ---------- */
html {
  scroll-behavior: smooth;
}

body,
.wp-site-blocks,
.wp-block-post-content,
.entry-content,
.wp-block-group,
.wp-block-column,
.wp-block-cover__inner-container {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", "Helvetica Neue", sans-serif !important;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern", "liga", "calt";
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title,
.wp-block-site-title,
.wp-block-button__link,
.rat-stat-num,
.rat-cta-phone,
.rat-section-title {
  font-family: "Archivo", "Inter", "Helvetica Neue", sans-serif !important;
  text-wrap: balance;
  font-feature-settings: "kern", "liga", "ss01";
  text-transform: none;
}

p {
  text-wrap: pretty;
}

img {
  max-width: 100%;
  height: auto;
}

/* ---------- Header + site logo ---------- */
.rat-header {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  background: rgba(15, 23, 42, 0.94) !important;
  transition: box-shadow 0.25s, background 0.25s;
}

.rat-header.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
  background: rgba(15, 23, 42, 0.98) !important;
}

.rat-logo-lockup {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-decoration: none;
}

/*
 * LOGO CHIP — hardened selectors.
 *
 * The site-logo is ALWAYS wrapped in a white rounded chip, regardless of
 * whether the surrounding group carries the .rat-logo-lockup class or not.
 * This guarantees contrast even if the FSE block serializer drops our
 * className somewhere in the tree (which has happened on real installs).
 * !important is used deliberately to beat core block defaults.
 */
header .wp-block-site-logo,
header.rat-header .wp-block-site-logo,
.rat-header .wp-block-site-logo,
.rat-logo-lockup .wp-block-site-logo {
  margin: 0 !important;
  line-height: 0 !important;
  background: #FFFFFF !important;
  padding: 10px 14px !important;
  border-radius: 14px !important;
  border: 2px solid #EA580C !important;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.9),
    0 6px 18px rgba(234, 88, 12, 0.35),
    0 2px 4px rgba(0, 0, 0, 0.2) !important;
  display: inline-block !important;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s !important;
}

header .wp-block-site-logo a,
header .wp-block-site-logo .custom-logo-link {
  display: block !important;
  line-height: 0 !important;
}

header .wp-block-site-logo img,
header .wp-block-site-logo a img,
header .wp-block-site-logo .custom-logo,
.rat-logo-lockup .wp-block-site-logo img,
.rat-logo-lockup .wp-block-site-logo.is-default-size img {
  max-width: 150px !important;
  width: 150px !important;
  min-width: 120px !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain !important;
  display: block !important;
  filter: none !important;
  transition: transform 0.25s !important;
}

header .wp-block-site-logo:hover,
.rat-logo-lockup:hover .wp-block-site-logo {
  transform: rotate(-1.5deg) !important;
  box-shadow:
    0 0 0 2px rgba(15, 23, 42, 0.9),
    0 10px 28px rgba(234, 88, 12, 0.55),
    0 4px 8px rgba(0, 0, 0, 0.3) !important;
  border-color: #FB923C !important;
}

header .wp-block-site-logo:hover img {
  transform: scale(1.03) !important;
}

/* Wordmark fallback: if the FSE template-part isn't updated and the wordmark
   text doesn't render, a CSS pseudo-element fills the gap so the header is
   never just a bare icon. */
.rat-header .wp-block-site-logo::after {
  content: "";
}
.rat-wordmark-title,
.rat-wordmark-sub {
  white-space: nowrap !important;
}

.rat-logo-wordmark {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rat-wordmark-title {
  font-family: "Archivo", sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em !important;
  color: #FFFFFF !important;
  line-height: 1 !important;
}

.rat-wordmark-sub {
  font-family: "Inter", sans-serif !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: #EA580C !important;
  line-height: 1 !important;
}

.wp-block-site-title.screen-reader-text {
  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;
}

.wp-block-navigation__container .wp-block-navigation-item__content {
  transition: color 0.18s;
  color: #E2E8F0 !important;
}

.wp-block-navigation__container .wp-block-navigation-item__content:hover {
  color: #EA580C !important;
}

/* ---------- Services dropdown submenu (hover-activated on desktop) ---------- */
.rat-header .wp-block-navigation {
  position: relative;
}

.rat-header .wp-block-navigation .has-child {
  position: relative;
}

/* Submenu arrow indicator: rotate on hover for a subtle hover affordance */
.rat-header .wp-block-navigation__submenu-icon {
  transition: transform 0.2s ease;
  margin-left: 0.35rem;
  color: #EA580C !important;
}

.rat-header .wp-block-navigation .has-child:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
.rat-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
  transform: rotate(180deg);
}

/* Submenu container: dark panel, orange left border, opens on hover */
.rat-header .wp-block-navigation .wp-block-navigation__submenu-container {
  background-color: #0F172A !important;
  color: #F1F5F9 !important;
  border: 1px solid #1E293B !important;
  border-left: 4px solid #EA580C !important;
  border-radius: 10px !important;
  padding: 0.6rem 0 !important;
  min-width: 280px !important;
  box-shadow: 0 22px 50px -10px rgba(0, 0, 0, 0.55), 0 8px 20px -8px rgba(234, 88, 12, 0.22) !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 0.6rem !important;

  /* Hidden by default; become visible on hover */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0.22s;
  pointer-events: none;
}

/* Invisible hover bridge so moving the cursor from parent to submenu doesn't close it */
.rat-header .wp-block-navigation .wp-block-navigation__submenu-container::before {
  content: "";
  position: absolute;
  top: -0.8rem;
  left: 0;
  right: 0;
  height: 0.9rem;
  background: transparent;
}

.rat-header .wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.rat-header .wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.rat-header .wp-block-navigation .wp-block-navigation__submenu-container:hover,
.rat-header .wp-block-navigation .wp-block-navigation__submenu-container:focus-within {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
  transition: opacity 0.22s ease, transform 0.22s ease, visibility 0s linear 0s;
}

/* Submenu items */
.rat-header .wp-block-navigation__submenu-container .wp-block-navigation-item {
  display: block;
}

.rat-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  display: block !important;
  padding: 0.7rem 1.25rem !important;
  color: #E2E8F0 !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  border-left: 3px solid transparent !important;
  transition: background-color 0.18s ease, color 0.18s ease, border-left-color 0.18s ease, padding-left 0.18s ease !important;
  white-space: nowrap !important;
}

.rat-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.rat-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
  background-color: rgba(234, 88, 12, 0.12) !important;
  color: #FFFFFF !important;
  border-left-color: #EA580C !important;
  padding-left: 1.5rem !important;
}

.rat-header-cta .wp-block-button__link {
  box-shadow: 0 6px 16px rgba(234, 88, 12, 0.35);
  animation: rat-pulse-orange 2.4s ease-in-out infinite;
}

@keyframes rat-pulse-orange {
  0%, 100% { box-shadow: 0 6px 16px rgba(234, 88, 12, 0.35); }
  50%      { box-shadow: 0 6px 22px rgba(234, 88, 12, 0.65); }
}

/* ---------- Emergency top bar ---------- */
.rat-emergency-bar {
  background: #1E40AF;
  background: linear-gradient(90deg, #1E40AF 0%, #1E3A8A 100%);
  color: #fff;
  font-weight: 500;
  font-size: 14px;
  padding: 12px 20px;
  text-align: center;
  letter-spacing: 0.01em;
  position: relative;
  z-index: 100;
}

.rat-emergency-bar a {
  color: #FFFFFF;
  text-decoration: none;
  font-weight: 700;
  margin-left: 6px;
  transition: color 0.15s;
}

.rat-emergency-bar a:hover {
  color: #EA580C;
  text-decoration: underline;
}

/* ---------- Buttons ---------- */
.wp-element-button,
.wp-block-button__link {
  font-family: "Archivo", "Inter", sans-serif;
  font-weight: 700;
  letter-spacing: 0.005em;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;
  position: relative;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.32);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  box-shadow: 0 12px 28px rgba(30, 64, 175, 0.3);
}

/* ---------- Hero slider ---------- */
/*
 * The pattern wraps its <!-- wp:html --> inside an alignfull wp:group, so the
 * outer group already gets WP's native full-bleed treatment. The slider itself
 * just needs to fill that group edge-to-edge. No 100vw / negative-margin
 * trickery — that was fighting the constrained layout and leaving the left
 * half blank on narrow viewports.
 *
 * HEIGHT: use 100dvh (dynamic viewport height) so it accounts for mobile URL
 * bar behavior. Clamp to a reasonable desktop max so it never gets absurdly
 * tall on 4K monitors.
 */
.wp-block-group.alignfull > .rat-hero-slider,
.rat-hero-slider {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  height: clamp(580px, 100dvh, 880px);
  min-height: 580px;
  overflow: hidden;
  background: #0F172A;
  isolation: isolate;
  box-sizing: border-box;
}

/* Ensure the alignfull group wrapper around the slider has no padding/margin
   so the slider sits flush against both viewport edges. */
.wp-block-group.alignfull:has(> .rat-hero-slider) {
  padding: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Fallback for browsers without dvh */
@supports not (height: 100dvh) {
  .rat-hero-slider {
    height: clamp(580px, 100vh, 880px);
  }
}

.rat-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Ken-burns is applied to the image only (see .rat-hero-slide-img) to keep
     the slide container itself pinned flush against the slider edges. */
  transition: opacity 900ms ease-in-out;
  display: flex;
  align-items: center;
  pointer-events: none;
  z-index: 1;
}

.rat-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 2;
}

.rat-hero-slide-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  z-index: 0;
  /* Ken-burns on the image itself — the .rat-hero-slider parent has
     overflow:hidden so any scale-up is safely clipped. */
  transform: scale(1.02);
  transition: transform 10000ms ease-out;
}

.rat-hero-slide.is-active .rat-hero-slide-img {
  transform: scale(1.08);
}

.rat-hero-slide-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(15,23,42,0.92) 0%, rgba(15,23,42,0.78) 40%, rgba(15,23,42,0.35) 80%, rgba(15,23,42,0.55) 100%),
    linear-gradient(180deg, rgba(15,23,42,0.15) 0%, rgba(15,23,42,0.55) 100%);
  z-index: 1;
}

.rat-hero-slide-content {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: clamp(2rem, 5vh, 5rem) clamp(1.25rem, 4vw, 3rem);
  color: #fff;
  display: flex;
  align-items: center;
  min-height: 100%;
}

.rat-hero-slide-inner {
  max-width: 680px;
  width: 100%;
}

.rat-hero-badge {
  display: inline-block;
  background: #EA580C;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
}

.rat-hero-title {
  font-family: "Archivo", sans-serif;
  font-size: clamp(2.5rem, 6vw, 5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 0.98;
  margin: 0 0 1.25rem;
  color: #fff;
}

.rat-hero-sub {
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 1.5rem;
  color: #93C5FD;
}

.rat-hero-body {
  font-size: 1.125rem;
  line-height: 1.65;
  margin: 0 0 2rem;
  color: #E2E8F0;
  max-width: 620px;
}

.rat-hero-body strong {
  color: #FFFFFF;
}

.rat-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2.5rem;
}

.rat-hero-btn-primary,
.rat-hero-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Archivo", sans-serif;
  font-weight: 700;
  font-size: 1rem;
  padding: 1.15rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s, color 0.2s;
  border: 2px solid transparent;
}

.rat-hero-btn-primary {
  background: #EA580C;
  color: #fff;
}

.rat-hero-btn-primary:hover {
  background: #C2410C;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(234, 88, 12, 0.4);
  color: #fff;
}

.rat-hero-btn-outline {
  background: rgba(255,255,255,0.08);
  color: #fff;
  border-color: #fff;
}

.rat-hero-btn-outline:hover {
  background: #fff;
  color: #0F172A;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 255, 255, 0.2);
}

.rat-hero-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2rem;
  font-size: 0.9rem;
  color: #CBD5E1;
}

.rat-hero-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
}

.rat-hero-benefits span::before {
  content: "✓";
  color: #EA580C;
  font-weight: 900;
  font-size: 1rem;
}

/* Slider controls */
.rat-slider-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  border: 2px solid rgba(255,255,255,0.3);
  color: #fff;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
  backdrop-filter: blur(6px);
}

.rat-slider-nav:hover {
  background: #EA580C;
  border-color: #EA580C;
  transform: translateY(-50%) scale(1.05);
}

.rat-slider-prev { left: 1.5rem; }
.rat-slider-next { right: 1.5rem; }

.rat-slider-dots {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  gap: 0.75rem;
}

.rat-slider-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255,255,255,0.35);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s, transform 0.25s, width 0.25s;
}

.rat-slider-dot:hover {
  background: rgba(255,255,255,0.6);
}

.rat-slider-dot.is-active {
  background: #EA580C;
  width: 36px;
  border-radius: 6px;
}

/* Slider progress bar */
.rat-slider-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  z-index: 5;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.rat-slider-progress::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #EA580C, #FB923C);
  animation: rat-progress var(--rat-interval, 6500ms) linear infinite;
}

@keyframes rat-progress {
  from { width: 0%; }
  to   { width: 100%; }
}

.rat-hero-slider:hover .rat-slider-progress::after,
.rat-hero-slider.is-paused .rat-slider-progress::after {
  animation-play-state: paused;
}

/* Scroll down indicator */
.rat-scroll-hint {
  position: absolute;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 6;
  color: rgba(255,255,255,0.7);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.rat-scroll-hint::after {
  content: "";
  width: 1px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.7), transparent);
  animation: rat-scroll-hint 2s ease-in-out infinite;
}

@keyframes rat-scroll-hint {
  0%, 100% { transform: translateY(0); opacity: 0.3; }
  50%      { transform: translateY(6px); opacity: 1; }
}

@media (max-width: 781px) {
  .rat-scroll-hint { display: none; }
}

/* ---------- Stats bar ---------- */
.rat-stats {
  background: #0F172A;
  color: #fff;
  padding: 56px 24px;
  border-top: 3px solid #EA580C;
  border-bottom: 3px solid #1E40AF;
}

.rat-stat-num {
  font-family: "Archivo", sans-serif;
  font-size: clamp(2.75rem, 5.5vw, 4rem);
  font-weight: 900;
  color: #EA580C;
  line-height: 0.95;
  display: block;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
}

.rat-stat-label {
  font-size: 0.875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94A3B8;
  font-weight: 600;
}

/* ---------- Service cards ---------- */
.rat-service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.75rem;
}

.rat-service-card {
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}

.rat-service-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #EA580C, #FB923C);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  z-index: 3;
}

.rat-service-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 28px 60px -16px rgba(15, 23, 42, 0.25);
  border-color: #FB923C;
}

.rat-service-card:hover::before {
  transform: scaleX(1);
}

.rat-service-card-img {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #F1F5F9;
  position: relative;
}

.rat-service-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.rat-service-card:hover .rat-service-card-img img {
  transform: scale(1.08);
}

.rat-service-card-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 42px;
  height: 42px;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  z-index: 2;
}

.rat-service-card-body {
  padding: 28px 26px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.rat-service-card h3 {
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 1.25rem;
  margin: 0 0 10px;
  color: #0F172A;
  letter-spacing: -0.01em;
}

.rat-service-card p {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.65;
  margin: 0 0 18px;
  flex: 1;
}

.rat-service-card .rat-link {
  color: #EA580C;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap 0.2s;
}

.rat-service-card .rat-link:hover {
  gap: 10px;
  color: #C2410C;
}

/* ---------- Feature grid (why choose us) ---------- */
.rat-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.rat-feature-card {
  background: #FFFFFF;
  border: 1px solid #E2E8F0;
  border-radius: 14px;
  padding: 2.5rem 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
  overflow: hidden;
}

.rat-feature-card::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  background: radial-gradient(circle at top right, rgba(234, 88, 12, 0.12), transparent 70%);
  transition: opacity 0.3s;
  opacity: 0;
}

.rat-feature-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(15, 23, 42, 0.15);
  border-color: #FB923C;
}

.rat-feature-card:hover::after {
  opacity: 1;
}

.rat-feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1.25rem;
  transition: transform 0.3s, background 0.3s;
}

.rat-feature-card:hover .rat-feature-icon {
  background: linear-gradient(135deg, #FED7AA 0%, #FB923C 100%);
  transform: rotate(-5deg) scale(1.08);
}

.rat-feature-title {
  font-family: "Archivo", sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.01em;
  color: #0F172A;
  margin: 0 0 0.75rem !important;
}

.rat-feature-body {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.7;
  margin: 0;
}

/* ---------- Testimonial cards ---------- */
.rat-testimonial {
  background: #fff;
  padding: 36px 32px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04);
  height: 100%;
  position: relative;
  transition: transform 0.3s, box-shadow 0.3s;
}

.rat-testimonial:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
}

.rat-testimonial .rat-stars {
  color: #EA580C;
  font-size: 1.1rem;
  margin-bottom: 14px;
  letter-spacing: 3px;
}

.rat-testimonial-text {
  font-size: 1rem;
  color: #1E293B;
  font-style: normal;
  line-height: 1.7;
  margin-bottom: 20px;
}

.rat-testimonial-author {
  font-weight: 700;
  color: #0F172A;
  font-size: 0.95rem;
  font-family: "Archivo", sans-serif;
}

.rat-testimonial-meta {
  color: #64748B;
  font-size: 0.8rem;
  margin-top: 2px;
  font-weight: 500;
}

/* ---------- CTA banner ---------- */
.rat-cta-phone {
  display: inline-block;
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(2.25rem, 5.5vw, 3.5rem);
  color: #EA580C;
  text-decoration: none;
  margin: 24px 0;
  letter-spacing: -0.02em;
  transition: color 0.2s, transform 0.2s;
}

.rat-cta-phone:hover {
  color: #fff;
  transform: scale(1.02);
}

/* ---------- Section headings ---------- */
.rat-section-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 64px;
}

.rat-section-tag {
  display: inline-block;
  background: #F1F5F9;
  color: #EA580C;
  padding: 7px 16px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 18px;
}

.rat-section-title {
  font-family: "Archivo", sans-serif;
  font-weight: 900;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0 0 18px;
  color: #0F172A;
}

.rat-section-sub {
  font-size: 1.08rem;
  color: #475569;
  line-height: 1.65;
}

/* ---------- Gallery grid ---------- */
.rat-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.rat-gallery-item {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  cursor: zoom-in;
  background: #F1F5F9;
  border: 1px solid #E2E8F0;
}

.rat-gallery-item img,
.rat-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  display: block;
}

.rat-gallery-item:hover img,
.rat-gallery-item:hover video {
  transform: scale(1.06);
}

.rat-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(15, 23, 42, 0.55), transparent 55%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none;
}

.rat-gallery-item:hover::after {
  opacity: 1;
}

.rat-gallery-item.is-video::before {
  content: "▶";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  background: rgba(234, 88, 12, 0.9);
  color: #fff;
  font-size: 1.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  z-index: 3;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.3);
  transition: transform 0.25s, background 0.25s;
}

.rat-gallery-item.is-video:hover::before {
  transform: translate(-50%, -50%) scale(1.1);
  background: #EA580C;
}

/* ---------- Gallery lightbox ---------- */
.rat-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.94);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.rat-lightbox.is-open {
  display: flex;
}

.rat-lightbox-content {
  max-width: min(1200px, 95vw);
  max-height: 90vh;
  position: relative;
}

.rat-lightbox img,
.rat-lightbox video {
  max-width: 100%;
  max-height: 90vh;
  display: block;
  border-radius: 8px;
  box-shadow: 0 32px 64px rgba(0, 0, 0, 0.5);
}

.rat-lightbox-close {
  position: absolute;
  top: -3rem;
  right: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #EA580C;
  color: #fff;
  border: 0;
  font-size: 1.5rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.rat-lightbox-close:hover {
  background: #C2410C;
}

/* ---------- Contact form ---------- */
.rat-contact-form {
  background: #fff;
  padding: 44px 40px;
  border-radius: 12px;
  box-shadow: 0 20px 50px -12px rgba(15, 23, 42, 0.1);
  border: 1px solid #E2E8F0;
}

.rat-contact-form label {
  display: block;
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  color: #334155;
}

.rat-contact-form input,
.rat-contact-form select,
.rat-contact-form textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid #E2E8F0;
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #F8FAFC;
  color: #0F172A;
  margin-bottom: 0;
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.rat-contact-form input:focus,
.rat-contact-form select:focus,
.rat-contact-form textarea:focus {
  outline: none;
  border-color: #EA580C;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(234, 88, 12, 0.15);
}

.rat-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ---------- Footer ---------- */
.rat-footer {
  background: #0F172A;
  color: #94A3B8;
  padding: 80px 24px 32px;
  border-top: 3px solid #EA580C;
}

.rat-footer h4 {
  color: #FFFFFF;
  font-family: "Archivo", sans-serif;
  font-weight: 800;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 22px;
}

.rat-footer a {
  color: #94A3B8;
  text-decoration: none;
  transition: color 0.2s;
}

.rat-footer a:hover {
  color: #EA580C;
}

.rat-footer-bottom {
  border-top: 1px solid #1E293B;
  padding-top: 28px;
  margin-top: 56px;
  text-align: center;
  font-size: 0.85rem;
  color: #64748B;
}

/* ---------- Accessibility focus ---------- */
:focus-visible {
  outline: 3px solid #EA580C;
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- Editor & content polish ---------- */
.wp-block-cover {
  border-radius: 0;
}

.wp-block-buttons .wp-block-button__link {
  padding: 1rem 1.75rem;
  border-radius: 6px;
}

.is-style-outline .wp-block-button__link {
  background: transparent !important;
}

.wp-block-cover.is-light .wp-block-cover__inner-container {
  color: #fff;
}

/* ============================================================
   RESPONSIVE — phones, tablets, and small desktops
   ============================================================ */

/* Tablets and below */
@media (max-width: 980px) {
  .rat-hero-slider {
    height: clamp(540px, 100dvh, 760px);
    min-height: 540px;
    max-height: 820px;
  }

  .rat-hero-slide-content {
    padding: 3rem 1.5rem;
  }

  .rat-slider-prev { left: 0.5rem; }
  .rat-slider-next { right: 0.5rem; }

  .rat-slider-nav {
    width: 44px;
    height: 44px;
    font-size: 1.2rem;
  }

  .wp-block-columns {
    gap: 1.5rem !important;
  }

  .rat-logo-lockup .wp-block-site-logo img {
    max-width: 112px !important;
    width: 112px !important;
  }

  .rat-wordmark-title { font-size: 1rem !important; }
  .rat-wordmark-sub { font-size: 0.62rem !important; }
}

/* Phones */
@media (max-width: 781px) {
  .rat-hero-slider {
    height: clamp(520px, 100dvh, 720px);
    min-height: 520px;
    max-height: 820px;
  }

  /* Mobile logo chip: smaller padding to save header space */
  header .wp-block-site-logo,
  .rat-logo-lockup .wp-block-site-logo {
    padding: 6px 10px !important;
    border-radius: 12px !important;
  }

  header .wp-block-site-logo img,
  .rat-logo-lockup .wp-block-site-logo img {
    max-width: 112px !important;
    width: 112px !important;
    max-height: 56px !important;
  }

  .rat-hero-slide-img {
    object-position: 62% 40%;
  }

  .rat-hero-slide-content {
    padding: 2rem 1.25rem;
    align-items: flex-end;
  }

  .rat-hero-slide-inner {
    padding-bottom: 3rem;
  }

  .rat-hero-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }

  .rat-hero-sub {
    font-size: 1.1rem;
  }

  .rat-hero-body {
    font-size: 1rem;
  }

  .rat-hero-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }

  .rat-hero-btn-primary,
  .rat-hero-btn-outline {
    justify-content: center;
    width: 100%;
    padding: 1rem 1.5rem;
  }

  .rat-hero-benefits {
    gap: 0.75rem 1.5rem;
    font-size: 0.85rem;
  }

  .rat-slider-dots {
    bottom: 1.25rem;
    gap: 0.5rem;
  }

  .rat-slider-dot {
    width: 10px;
    height: 10px;
  }

  .rat-slider-dot.is-active {
    width: 28px;
  }

  .rat-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
  }

  .rat-gallery-item.is-video::before {
    width: 48px;
    height: 48px;
    font-size: 1.2rem;
  }

  .rat-form-row {
    grid-template-columns: 1fr;
  }

  .rat-contact-form {
    padding: 32px 24px;
  }

  .rat-service-card-body {
    padding: 24px 22px;
  }

  .wp-block-columns {
    flex-wrap: wrap !important;
  }

  .wp-block-column {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }

  .wp-block-cover {
    min-height: 420px !important;
  }

  .wp-block-group.alignfull {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Header: hamburger menu behaviour */
  .wp-block-navigation__responsive-container-open {
    color: #0F172A !important;
  }

  /* Mobile: submenu expands inline in the drawer (no floating dropdown) */
  .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container {
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    background: transparent !important;
    border: 0 !important;
    border-left: 2px solid #EA580C !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    margin: 0.25rem 0 0.5rem 0.75rem !important;
    padding: 0.25rem 0 !important;
    min-width: 0 !important;
  }

  .wp-block-navigation__responsive-container .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    padding: 0.55rem 0.85rem !important;
    font-size: 0.9rem !important;
  }
}

/* Very small phones */
@media (max-width: 480px) {
  .rat-hero-title {
    font-size: 2rem;
    line-height: 1.05;
  }

  .rat-hero-badge {
    font-size: 0.7rem;
    padding: 0.4rem 0.8rem;
  }

  .rat-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .rat-footer {
    padding: 56px 18px 24px;
  }

  .rat-footer-bottom {
    margin-top: 36px;
    padding-top: 20px;
  }
}

/* ============================================================
   V4.4 mobile polish — iPhone / Android / Samsung optimization
   ============================================================ */

/* Emergency bar — shorter on phones */
@media (max-width: 781px) {
  .rat-emergency-bar p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }
  .rat-header-cta .wp-block-button__link {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
    font-size: 0.88rem !important;
    white-space: nowrap !important;
  }
  .rat-payment-strip {
    padding: 1rem !important;
    gap: 0.5rem !important;
  }
  .rat-payment-strip > span {
    font-size: 0.72rem !important;
    padding: 0.3rem 0.55rem !important;
  }
}

/* Hero slider — keep CTA buttons visible and readable on small screens */
@media (max-width: 781px) {
  .rat-hero-slider {
    height: clamp(560px, 92dvh, 760px) !important;
    min-height: 560px !important;
  }
  .rat-hero-slide {
    align-items: center !important;
  }
  .rat-hero-slide-content {
    align-items: center !important;
    padding: 1.5rem 1.25rem !important;
    justify-content: center !important;
  }
  .rat-hero-slide-inner {
    padding-bottom: 0 !important;
    max-width: 560px;
    width: 100%;
  }
  .rat-hero-title {
    font-size: clamp(1.75rem, 7.5vw, 2.5rem) !important;
    margin-bottom: 0.5rem !important;
  }
  .rat-hero-sub {
    font-size: 1rem !important;
    margin-bottom: 0.5rem !important;
  }
  .rat-hero-body {
    font-size: 0.95rem !important;
    line-height: 1.55 !important;
    margin-bottom: 1.25rem !important;
  }
  .rat-hero-badge {
    margin-bottom: 1rem !important;
  }
  .rat-hero-actions {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    margin-bottom: 1.25rem !important;
    width: 100%;
  }
  .rat-hero-btn-primary,
  .rat-hero-btn-outline {
    justify-content: center !important;
    width: 100% !important;
    padding: 0.95rem 1rem !important;
    font-size: 0.98rem !important;
    min-height: 48px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    line-height: 1.2 !important;
    border-width: 2px !important;
  }
  .rat-hero-btn-outline {
    background: rgba(15, 23, 42, 0.85) !important;
    color: #fff !important;
    border-color: #fff !important;
  }
  .rat-hero-btn-outline:hover,
  .rat-hero-btn-outline:active {
    background: #fff !important;
    color: #0F172A !important;
  }
  .rat-hero-benefits {
    display: none !important;
  }
  .rat-slider-dots {
    bottom: 0.9rem !important;
  }
}

/* Very small phones (iPhone SE, older Androids) — further tighten */
@media (max-width: 400px) {
  .rat-hero-slider {
    height: clamp(520px, 90dvh, 680px) !important;
    min-height: 520px !important;
  }
  .rat-hero-title {
    font-size: clamp(1.6rem, 8vw, 2.25rem) !important;
  }
  .rat-hero-sub {
    font-size: 0.95rem !important;
  }
  .rat-hero-body {
    font-size: 0.9rem !important;
  }
  .rat-hero-btn-primary,
  .rat-hero-btn-outline {
    font-size: 0.92rem !important;
    padding: 0.9rem 0.75rem !important;
  }
  .rat-hero-badge {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.75rem !important;
  }
}

/* Service hero — ensure stacked layout + bigger tap targets on mobile */
@media (max-width: 781px) {
  .rat-service-hero {
    grid-template-columns: 1fr !important;
    gap: 1.75rem !important;
  }
  .rat-service-hero h1 {
    font-size: clamp(1.75rem, 6.5vw, 2.5rem) !important;
  }
  .rat-service-hero a[href^="tel:"],
  .rat-service-hero a[href^="/contact"] {
    width: 100%;
    justify-content: center;
  }
}

/* Forms — comfortable touch targets, no zoom-on-focus on iOS */
@media (max-width: 781px) {
  .rat-contact-form input,
  .rat-contact-form select,
  .rat-contact-form textarea {
    font-size: 16px !important; /* iOS won't zoom text inputs when font-size >= 16px */
    padding: 12px 14px !important;
  }
  .rat-contact-form button[type="submit"] {
    width: 100%;
    min-height: 52px;
  }
}

/* Gallery — tighter grid + larger video play badge tap target */
@media (max-width: 781px) {
  .rat-gallery-item.is-video::before {
    width: 52px !important;
    height: 52px !important;
  }
}

/* Footer payment strip — wraps cleanly on phones */
@media (max-width: 480px) {
  .rat-payment-strip {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
    text-align: center;
  }
}

/* Universal mobile safety: prevent horizontal scroll from any overflow */
@media (max-width: 781px) {
  html, body {
    overflow-x: hidden;
  }
  img, video, iframe {
    max-width: 100%;
    height: auto;
  }
  .rat-service-dual figcaption {
    font-size: 0.85rem !important;
    padding: 0.65rem 0.75rem !important;
  }
}

/* Print friendliness */
@media print {
  .rat-emergency-bar,
  .rat-slider-nav,
  .rat-slider-dots,
  header,
  footer,
  .wp-block-buttons {
    display: none !important;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }

  .rat-hero-slide {
    transition: none;
  }
}