/*
Theme Name: RPM Group
Theme URI: https://www.rpmgroup.com
Author: Flex360
Description: Custom theme for RPM Group, a commercial real-estate brokerage and property management firm in Little Rock, Arkansas. Modern 2026 redesign of the legacy Laravel site.
Version: 1.0.0
Text Domain: rpm-group
*/

/* ============================================================
   BRAND TOKENS
   ============================================================ */
:root {
  --rpm-orange: #ee7421;
  --rpm-orange-dark: #d13b1a;
  --rpm-orange-deep: #bf5d1a;
  --rpm-charcoal: #171717;
  --rpm-charcoal-soft: #2c2c2c;
  --rpm-text: #333333;
  --rpm-heading: #1a1a1a;
  --rpm-muted: #666666;
  --rpm-teal: #51a5b6;
  --rpm-teal-dark: #328a9b;
  --rpm-fog: #e7e7e7;
  --rpm-mist: #f5f5f3;
  --rpm-white: #ffffff;
  --rpm-line: #d4d4d4;
}

html, body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--rpm-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  max-width: 100vw;
}

.font-display { font-family: 'Fraunces', Georgia, serif; }
.font-body    { font-family: 'Inter', -apple-system, sans-serif; }

/* ============================================================
   PROSE — Article body styling
   ============================================================ */
.prose-rpm-group {
  color: var(--rpm-text);
  line-height: 1.7;
}
.prose-rpm-group p { margin: 0 0 1.25em; }
.prose-rpm-group h2,
.prose-rpm-group h3,
.prose-rpm-group h4 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--rpm-heading);
  margin: 1.6em 0 0.5em;
  line-height: 1.2;
}
.prose-rpm-group h2 { font-size: 1.875rem; font-weight: 600; }
.prose-rpm-group h3 { font-size: 1.5rem; font-weight: 600; }
.prose-rpm-group h4 { font-size: 1.25rem; font-weight: 600; }
.prose-rpm-group a {
  color: var(--rpm-orange-dark);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.prose-rpm-group a:hover { color: var(--rpm-orange); }
.prose-rpm-group ul, .prose-rpm-group ol { padding-left: 1.5em; margin: 0 0 1.25em; }
.prose-rpm-group li { margin-bottom: 0.4em; }
.prose-rpm-group blockquote {
  border-left: 4px solid var(--rpm-orange);
  padding-left: 1em;
  font-style: italic;
  color: var(--rpm-muted);
  margin: 1.5em 0;
}
.prose-rpm-group img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0.5rem;
  margin: 1em 0;
}
.prose-rpm-group iframe { max-width: 100%; }

/* ============================================================
   LEGACY CONTENT NORMALIZATION (per master plan A7)
   ============================================================ */
.prose-rpm-group table {
  width: 100% !important;
  border-collapse: collapse;
  margin: 1.5em 0;
}
.prose-rpm-group table th,
.prose-rpm-group table td {
  border: 1px solid var(--rpm-line);
  padding: 0.6em 0.8em;
  text-align: left;
}
.prose-rpm-group table th {
  background: var(--rpm-mist);
  font-weight: 600;
  color: var(--rpm-heading);
}
.prose-rpm-group .btn,
.prose-rpm-group a.btn-primary,
.prose-rpm-group a[class*="btn-"] {
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: var(--rpm-charcoal);
  color: var(--rpm-orange);
  border-radius: 999px;
  text-align: center;
  font-weight: 600;
  text-decoration: none;
  font-size: 0.95rem;
}
.prose-rpm-group span[style*="Impact"],
.prose-rpm-group span[style*="impact"] {
  font-family: 'Fraunces', Georgia, serif !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  color: var(--rpm-heading) !important;
  display: block !important;
  border-bottom: 2px solid var(--rpm-orange);
  padding-bottom: 0.3rem;
  margin-bottom: 0.6rem;
}

/* TimThumb (img.php) URL strip rule — handled at import time, but defense in depth: */
.prose-rpm-group img[src*="img.php"] { max-width: 100%; }

/* ============================================================
   DESKTOP DROPDOWN PANELS
   ============================================================ */
.has-dropdown:hover > .dropdown-panel,
.has-dropdown:focus-within > .dropdown-panel {
  opacity: 1 !important;
  visibility: visible !important;
}

.has-dropdown > .dropdown-panel {
  /* Tailwind classes already include opacity-0/invisible; this just makes the
     transition smooth. */
  transition-property: opacity, visibility;
  transition-duration: 200ms;
}

.has-dropdown.is-open > .dropdown-panel {
  opacity: 1 !important;
  visibility: visible !important;
}

/* ============================================================
   HERO VIDEO
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  video[autoplay] { display: none; }
}

/* ============================================================
   MOBILE DRAWER (per A10)
   ============================================================ */
.mobile-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 380px;
  background: var(--rpm-charcoal);
  color: var(--rpm-white);
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 100;
  overflow-y: auto;
  padding: 1.5rem;
}
.mobile-drawer.is-open { transform: translateX(0); }
.mobile-drawer-overlay {
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 99;
  pointer-events: none;
  transition: background 0.3s;
}
.mobile-drawer-overlay.is-open {
  background: rgba(0, 0, 0, 0.6);
  pointer-events: auto;
}
body.drawer-open { overflow: hidden; }

/* ============================================================
   THIRD-PARTY WIDGETS — keep contained
   ============================================================ */
.grecaptcha-badge {
  visibility: hidden !important;
  right: -300px !important;
}

/* ============================================================
   ACCORDION (used on FAQ-style pages, content blocks)
   ============================================================ */
details.accordion-item {
  border: 1px solid var(--rpm-line);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  background: var(--rpm-white);
  transition: box-shadow 0.2s;
}
details.accordion-item:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); }
details.accordion-item summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--rpm-heading);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
details.accordion-item summary::-webkit-details-marker { display: none; }
details.accordion-item summary::after {
  content: '+';
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--rpm-orange);
  transition: transform 0.2s;
}
details.accordion-item[open] summary::after { transform: rotate(45deg); }
details.accordion-item .answer {
  margin-top: 0.75rem;
  color: var(--rpm-muted);
  line-height: 1.7;
}

/* ============================================================
   REVEAL ANIMATIONS
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}