/* Roofspan FSE Theme - Global Supplemental Styles
   theme.json handles colors/fonts/spacing.
   This file adds hover states, transitions, and utility classes. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }

/* ---- Navigation ---- */
.rs-header { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.rs-header .wp-block-navigation a {
  padding: 8px 14px;
  border-radius: 6px;
  transition: color 0.22s ease, background 0.22s ease;
}
.rs-header .wp-block-navigation a:hover,
.rs-header .wp-block-navigation .current-menu-item > a {
  color: #ffffff !important;
  background: rgba(255,255,255,0.07);
}
.rs-nav-cta .wp-block-button__link {
  transition: background 0.22s ease, transform 0.22s ease;
}
.rs-nav-cta .wp-block-button__link:hover {
  background: #c04408 !important;
  transform: translateY(-1px);
}

/* ---- Buttons ---- */
.wp-block-button__link {
  transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease, color 0.22s ease;
  cursor: pointer;
}
.wp-block-button__link:hover { transform: translateY(-2px); }

/* ---- Service cards hover ---- */
.wp-block-column[style*="background:#ffffff"] {
  transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.wp-block-column[style*="background:#ffffff"]:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.14);
  transform: translateY(-5px);
  border-color: rgba(232,82,10,0.35) !important;
}

/* ---- Manufacturer tags hover ---- */
.rs-mfr-tag {
  transition: border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}
.rs-mfr-tag:hover {
  border-color: #e8520a !important;
  color: #e8520a !important;
  transform: translateY(-2px);
}

/* ---- Footer links ---- */
.rs-footer a { transition: color 0.22s ease; }
.rs-footer a:hover { color: #e8520a !important; }
.rs-foot-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

/* ---- Hero grid overlay ---- */
.rs-hero {
  background-image: linear-gradient(rgba(232,82,10,0.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(232,82,10,0.055) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: 0 0;
}

/* ---- Page hero ---- */
.rs-page-hero {
  background-image: linear-gradient(rgba(232,82,10,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(232,82,10,0.05) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Avatar ---- */
.rs-avatar {
  width: 52px !important;
  height: 52px !important;
  min-height: unset !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid rgba(232,82,10,0.4);
}

/* ---- Scroll reveal ---- */
.rs-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.rs-reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---- Entry content (page editor output) ---- */
.entry-content h1, .entry-content h2, .entry-content h3 { margin-bottom: 16px; margin-top: 32px; }
.entry-content p { line-height: 1.8; margin-bottom: 1.2rem; }
.entry-content a { color: #e8520a; }
.entry-content ul { list-style: disc; padding-left: 24px; margin-bottom: 1rem; }
.entry-content ol { list-style: decimal; padding-left: 24px; margin-bottom: 1rem; }
.entry-content li { margin-bottom: 8px; line-height: 1.7; }
.entry-content img { border-radius: 10px; margin: 20px 0; max-width: 100%; height: auto; }

/* ---- Responsive ---- */
@media (max-width: 768px) {
  .rs-hero { padding-left: 24px !important; padding-right: 24px !important; }
  .rs-header .wp-block-buttons { display: none; }
}
@media (max-width: 600px) {
  .wp-block-columns { flex-direction: column; }
}