/* ============================================================
   STEVE & CO. — CLIENT FIXES (Phase 5)
   Header · Footer · Breadcrumbs · Animations · Forms
   ============================================================ */

/* ── 1. LOGO SIZE ────────────────────────────────────────────── */
#site-logo img,
.custom-logo,
.site-logo img,
header .logo img,
.header-logo img {
  max-width: 180px !important;
  width: 180px !important;
  height: auto !important;
}

/* ── 2. HEADER — solid dark bar ──────────────────────────────── */
#site-header,
.site-header,
#oceanwp-header,
.oceanwp-header {
  background-color: var(--sc-dark) !important;
  border-bottom: 1px solid rgba(196,162,101,.15) !important;
}

/* Transparent header ONLY on homepage hero */
body.home #site-header,
body.home .site-header {
  background-color: transparent !important;
  border-bottom: none !important;
  position: absolute !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100 !important;
}

/* Sticky header after scroll on homepage */
body.home #site-header.scrolled,
body.home .site-header.is-sticky {
  background-color: var(--sc-dark) !important;
  position: fixed !important;
}

/* ── 3. NAVIGATION MENU VISIBILITY (desktop only) ────────────── */
@media (min-width: 961px) {
  #site-navigation,
  .main-navigation,
  #ocean-main-nav,
  .oceanwp-primary-nav {
    display: flex !important;
    align-items: center;
  }
}

#site-navigation ul li a,
.main-navigation ul li a,
#ocean-main-nav ul li a {
  font-family: var(--sc-font) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--sc-white) !important;
  padding: 8px 14px !important;
  transition: color .2s ease !important;
}

#site-navigation ul li a:hover,
.main-navigation ul li a:hover,
#ocean-main-nav ul li a:hover,
#site-navigation ul li.current-menu-item > a,
#site-navigation ul li.current-menu-ancestor > a {
  color: var(--sc-gold) !important;
}

/* Dropdown menus */
#site-navigation ul .sub-menu,
.main-navigation ul .sub-menu {
  background-color: var(--sc-dark) !important;
  border-top: 2px solid var(--sc-gold) !important;
  min-width: 180px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}

#site-navigation ul .sub-menu li a,
.main-navigation ul .sub-menu li a {
  font-size: 11px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(196,162,101,.1) !important;
}

/* Currency dropdown item */
#site-navigation ul li.menu-item a[href="#"],
.main-navigation ul li a[href="#"] {
  cursor: pointer;
}

/* ── 4. BREADCRUMBS — REMOVE ─────────────────────────────────── */
.ocean-breadcrumbs,
.breadcrumbs,
#breadcrumbs,
.site-breadcrumbs,
.yoast-breadcrumbs,
nav.rank-math-breadcrumb,
.woocommerce-breadcrumb,
.entry-breadcrumbs {
  display: none !important;
}

/* ── 5. LUXURY FOOTER ────────────────────────────────────────── */

/* Hide OceanWP's built-in footer if it leaks through */
#footer-widgets,
#footer-bottom,
.oceanwp-footer,
footer#footer,
footer.site-footer:not(#sc-footer) {
  display: none !important;
}

#sc-footer {
  font-family: var(--sc-font);
}

.sc-footer-main {
  background-color: #1E1E1E;
  padding: 80px 0 56px;
  border-top: 1px solid rgba(196,162,101,.2);
}

.sc-footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  align-items: start;
}

/* Brand column */
.sc-footer-logo {
  max-width: 150px;
  width: 150px;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

.sc-footer-tagline {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sc-gold);
  margin-bottom: 20px;
}

.sc-footer-address {
  font-style: normal;
  font-size: 13px;
  color: rgba(245,241,235,.55);
  line-height: 1.8;
  margin-bottom: 20px;
}

.sc-footer-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 24px;
}

.sc-footer-phone,
.sc-footer-email {
  font-size: 13px;
  color: rgba(245,241,235,.7);
  text-decoration: none;
  transition: color .2s;
}

.sc-footer-phone:hover,
.sc-footer-email:hover {
  color: var(--sc-gold);
}

/* Social icons */
.sc-footer-social {
  display: flex;
  gap: 12px;
  align-items: center;
}

.sc-social-icon {
  width: 36px;
  height: 36px;
  border: 1px solid rgba(196,162,101,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(245,241,235,.6);
  text-decoration: none;
  transition: all .2s;
}

.sc-social-icon:hover {
  border-color: var(--sc-gold);
  color: var(--sc-gold);
  background: rgba(196,162,101,.08);
}

/* Footer columns */
.sc-footer-col-title {
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .25em !important;
  text-transform: uppercase !important;
  color: var(--sc-gold) !important;
  margin-bottom: 20px !important;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(196,162,101,.2);
}

.sc-footer-links {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sc-footer-links li a {
  font-size: 13px !important;
  color: rgba(245,241,235,.55) !important;
  text-decoration: none !important;
  transition: color .2s !important;
  letter-spacing: .03em;
}

.sc-footer-links li a:hover {
  color: var(--sc-gold) !important;
}

/* RERA badge */
.sc-footer-rera-badge {
  margin-top: 28px;
  padding: 16px;
  border: 1px solid rgba(196,162,101,.2);
  background: rgba(196,162,101,.04);
  text-align: center;
}

.sc-footer-rera-label {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245,241,235,.4);
  margin-bottom: 4px;
}

.sc-footer-rera-name {
  display: block;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .15em;
  color: var(--sc-gold);
  line-height: 1;
  margin-bottom: 4px;
}

.sc-footer-rera-sub {
  display: block;
  font-size: 9px;
  color: rgba(245,241,235,.4);
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Bottom bar */
.sc-footer-bottom {
  background-color: #111;
  padding: 24px 0;
  border-top: 1px solid rgba(196,162,101,.1);
}

.sc-footer-bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: center;
}

.sc-footer-legal {
  font-size: 11px;
  color: rgba(245,241,235,.3);
  line-height: 1.7;
  max-width: 760px;
  margin: 0 auto;
}

.sc-footer-copyright {
  font-size: 11px;
  color: rgba(245,241,235,.4);
  letter-spacing: .05em;
}

/* Responsive footer */
@media (max-width: 1024px) {
  .sc-footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 640px) {
  .sc-footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .sc-footer-main { padding: 48px 0 36px; }
}

/* ── 6. FORMS — PREMIUM STYLING ──────────────────────────────── */

/* Input fields */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="number"],
.wpcf7-form select,
.wpcf7-form textarea,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form select,
form textarea {
  font-family: var(--sc-font) !important;
  font-size: 13px !important;
  color: var(--sc-dark) !important;
  background: #fff !important;
  border: 1px solid rgba(44,44,44,.15) !important;
  border-bottom: 2px solid rgba(44,44,44,.15) !important;
  padding: 14px 16px !important;
  width: 100% !important;
  border-radius: 0 !important;
  outline: none !important;
  transition: border-color .25s !important;
  -webkit-appearance: none;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus,
form input:focus,
form select:focus,
form textarea:focus {
  border-color: rgba(44,44,44,.15) !important;
  border-bottom-color: var(--sc-gold) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Labels */
.wpcf7-form label,
form label {
  font-family: var(--sc-font) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #999 !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* Submit button — copper gold */
.wpcf7-form input[type="submit"],
.wpcf7-form button[type="submit"],
form input[type="submit"],
form button[type="submit"] {
  font-family: var(--sc-font) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  background: var(--sc-gold) !important;
  color: var(--sc-white) !important;
  border: none !important;
  padding: 18px 48px !important;
  cursor: pointer !important;
  width: 100% !important;
  transition: background .25s !important;
  border-radius: 0 !important;
}

.wpcf7-form input[type="submit"]:hover,
.wpcf7-form button[type="submit"]:hover,
form input[type="submit"]:hover,
form button[type="submit"]:hover {
  background: #a88b50 !important;
}

/* Form response messages */
.wpcf7-response-output {
  font-family: var(--sc-font) !important;
  font-size: 12px !important;
  letter-spacing: .05em !important;
  border: none !important;
  padding: 12px 16px !important;
  margin-top: 16px !important;
}

/* ── 7. SCROLL-IN ANIMATIONS ─────────────────────────────────── */
@keyframes scFadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes scFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes scSlideRight {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Elements that will animate in */
.sc-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s ease, transform .6s ease;
}

.sc-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays */
.sc-animate:nth-child(2) { transition-delay: .1s; }
.sc-animate:nth-child(3) { transition-delay: .2s; }
.sc-animate:nth-child(4) { transition-delay: .3s; }
.sc-animate:nth-child(5) { transition-delay: .4s; }
.sc-animate:nth-child(6) { transition-delay: .5s; }

/* Property card hover — image zoom */
.sc-property-card {
  overflow: hidden;
  transition: box-shadow .3s ease, transform .3s ease;
}

.sc-property-card:hover {
  box-shadow: 0 16px 48px rgba(44,44,44,.14) !important;
  transform: translateY(-4px);
}

.sc-property-card__image,
.sc-property-card figure,
.sc-property-card .card-image {
  overflow: hidden;
}

.sc-property-card__image img,
.sc-property-card figure img,
.sc-property-card .card-image img {
  transition: transform .5s ease;
}

.sc-property-card:hover .sc-property-card__image img,
.sc-property-card:hover figure img,
.sc-property-card:hover .card-image img {
  transform: scale(1.06);
}

/* Off-plan card hover */
.sc-offplan-card {
  transition: box-shadow .3s ease, transform .3s ease;
}

.sc-offplan-card:hover {
  box-shadow: 0 16px 48px rgba(44,44,44,.14);
  transform: translateY(-4px);
}

/* ── 8. PARALLAX SECTIONS ─────────────────────────────────────── */
.sc-parallax {
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

/* ── 9. TYPOGRAPHY SCALE IMPROVEMENTS ────────────────────────── */
.sc-page-header__title,
.sc-hero__title {
  letter-spacing: -.01em;
  line-height: 1.1;
}

/* Reduce motion overrides */
@media (prefers-reduced-motion: reduce) {
  .sc-animate {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .sc-parallax {
    background-attachment: scroll;
  }
}

/* ── 10. GENERAL LUXURY POLISH ───────────────────────────────── */

/* Section dividers */
.sc-section-divider {
  width: 48px;
  height: 2px;
  background: var(--sc-gold);
  margin: 16px auto 24px;
}

/* Remove OceanWP's own footer-rera if duplicated */
.sc-footer-rera {
  display: none;
}

/* ── PRIVATE HOUSE — Warm Amber Palette Overrides ─────────────── */

/* Homepage section responsive tweaks */
@media (max-width: 1024px) {
  .sc-ph-inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .sc-ph-image-stack { max-width: 480px; margin: 0 auto; }
}

/* Private House page lockup refinement */
.sc-ph-hero__lockup { position: relative; z-index: 1; }

.sc-ph-hero__brand {
  font-size: clamp(28px, 4.5vw, 56px) !important;
  font-weight: 200 !important;
  color: #F5F1EB !important;
  letter-spacing: .06em !important;
  line-height: 1.15 !important;
}

.sc-ph-hero__brand strong {
  font-weight: 700 !important;
  display: block;
}

.sc-ph-hero__divider {
  width: 60px !important;
  height: 1px !important;
  background: rgba(196,162,101,.6) !important;
  margin: 24px auto !important;
}

.sc-ph-hero__sub {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .55em !important;
  text-transform: uppercase !important;
  color: #C4A265 !important;
  text-indent: .55em;
  margin-bottom: 28px !important;
}

.sc-ph-hero__desc {
  font-size: 15px !important;
  font-weight: 300 !important;
  color: rgba(245,241,235,.6) !important;
  max-width: 520px !important;
  line-height: 1.85 !important;
  margin: 0 auto 44px !important;
}

/* Feature bar */
.sc-ph-feature-bar__num {
  font-size: 22px !important;
  font-weight: 800 !important;
  color: #fff !important;
}

.sc-ph-feature-bar__label {
  color: rgba(255,255,255,.75) !important;
  letter-spacing: .18em !important;
}

/* Private House listing cards — warm border accent */
.sc-ph-card {
  border-color: rgba(196,162,101,.2) !important;
  transition: box-shadow .3s ease, transform .3s ease !important;
}

.sc-ph-card:hover {
  box-shadow: 0 20px 60px rgba(139,69,19,.15) !important;
  transform: translateY(-3px);
}

/* Enquire Privately CTA link */
.sc-ph-card__cta {
  color: #8b4513 !important;
  border-bottom-color: #C4A265 !important;
}

.sc-ph-card__cta:hover {
  color: #C4A265 !important;
}

/* Private House listings section background */
.sc-ph-listings {
  background: #FAF7F2 !important;
}

/* Tag/badge on Private House cards */
.sc-ph-badge,
.sc-property-card__badge {
  background: linear-gradient(135deg, #8b4513, #C4A265) !important;
}
