/*
Theme Name: RenovationPro Custom
Theme URI: https://example.com/renovationpro-custom
Author: Custom Build
Description: Custom WordPress renovation theme converted from the supplied HTML designs. Responsive, menu-ready, Elementor-friendly, and compatible with the Classic Editor/Widgets.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: renovationpro
*/

:root {
  --rp-gold: #f2a900;
  --rp-gold-dark: #7f5700;
  --rp-ink: #1a1c1c;
  --rp-muted: #5f5e5e;
  --rp-border: #d6c4ac;
  --rp-bg: #f9f9f9;
}

html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* WordPress admin bar */
.admin-bar .rp-site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .rp-site-header { top: 46px; } }

/* Shared WordPress menu styling */
.rp-menu { display:flex; align-items:center; gap:24px; list-style:none; padding:0; margin:0; }
.rp-menu a { color:#5f5e5e; text-decoration:none; font-family:'Hanken Grotesk',sans-serif; font-size:16px; line-height:1.2; letter-spacing:.05em; font-weight:600; transition:color .2s ease; }
.rp-menu a:hover, .rp-menu .current-menu-item > a, .rp-menu .current_page_item > a { color:#7f5700; }
.rp-menu .current-menu-item > a, .rp-menu .current_page_item > a { border-bottom:2px solid #7f5700; padding-bottom:4px; }

.rp-mobile-menu { display:none; border-top:1px solid #d6c4ac; background:#f9f9f9; }
.rp-mobile-menu.is-open { display:block; }
.rp-mobile-menu .rp-menu { display:flex; flex-direction:column; align-items:stretch; gap:0; padding:8px 24px 18px; }
.rp-mobile-menu .rp-menu a { display:block; padding:12px 0; border-bottom:1px solid #e8e8e8; }
.rp-mobile-toggle { display:none; border:0; background:transparent; cursor:pointer; padding:8px; }
.rp-mobile-toggle .material-symbols-outlined { font-size:30px; }

@media (max-width: 767px) {
  .rp-desktop-nav { display:none !important; }
  .rp-mobile-toggle { display:inline-flex; align-items:center; justify-content:center; }
  .rp-header-cta { display:none !important; }
}

/* WordPress content helpers */
.alignwide { max-width:1280px; margin-left:auto; margin-right:auto; }
.alignfull { width:100%; }
.wp-caption, .gallery-caption { max-width:100%; }
.bypostauthor { display:block; }
.screen-reader-text { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Supplied design interactions */
.material-symbols-outlined { font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; display:inline-block; vertical-align:middle; }
.before-after-slider { position:relative; overflow:hidden; user-select:none; }
.after-image { position:absolute; top:0; left:0; width:100%; height:100%; clip-path:inset(0 0 0 50%); }
.slider-handle { position:absolute; top:0; bottom:0; left:50%; width:4px; background:#f2a900; cursor:ew-resize; transform:translateX(-50%); z-index:10; }
.slider-handle::after { content:'↔'; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:40px; height:40px; background:#f2a900; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#000; font-weight:bold; box-shadow:0 4px 12px rgba(0,0,0,.2); }
.before-after-handle { cursor:ew-resize; box-shadow:0 0 10px rgba(0,0,0,.3); }
.bento-card:hover .hover-image { transform:scale(1.05); }
.step-line::before { content:''; position:absolute; left:50%; top:100%; width:2px; height:2rem; background:#e0e0e0; transform:translateX(-50%); }
.project-card:hover .project-overlay { opacity:1; transform:translateY(0); }
.glass-nav { backdrop-filter:blur(8px); background-color:rgba(249,249,249,.8); }

/* Contact template */
.rp-contact-field input, .rp-contact-field textarea, .rp-contact-field select { width:100%; border:1px solid #d6c4ac; background:#fff; padding:12px 14px; font:inherit; }
.rp-contact-field textarea { min-height:150px; resize:vertical; }

/* Footer widgets */
.rp-footer-widget ul { list-style:none; padding:0; margin:0; }
.rp-footer-widget a { color:#dadada; text-decoration:none; }
.rp-footer-widget a:hover { color:#f2a900; }