/* ============================================================
   STEVE & CO. — APRIL 17 FINAL SPRINT
   Loaded after all other stylesheets; wins cascade wars.
   ============================================================ */

/* ------------------------------------------------------------
   ITEM 2: HEADING HIERARCHY REVERSAL — SITE-WIDE
   Eyebrow labels become the dominant element; h2 becomes subtitle.
   Applies on ALL pages (homepage, Our Story, Services, Careers,
   Private House, Buy/Rent/Off-Plan, Contact).
   ------------------------------------------------------------ */

/* --- EYEBROWS --- named classes + inline-styled patterns --- */
.sc-section__eyebrow,
.sc-list-eyebrow,
.sc-partners__label,
.sc-careers-cta__eyebrow,
.sc-ph-content__eyebrow,
.sc-svc-hero__eyebrow,
.sc-svc-row__eyebrow,
.sc-svc-cta-band__eyebrow,
.sc-buy-hero__eyebrow,
.sc-rent-hero__eyebrow,
.sc-offplan-hero__eyebrow,
.sc-careers-hero__eyebrow,
.sc-contact-hero__eyebrow,
.sc-story-eyebrow,
.sc-page-header__eyebrow,
.ph2-hero__eyebrow,
.ph2-intro__eyebrow,
.ph2-collection__eyebrow,
.ph2-team__eyebrow,
.ph2-contact__eyebrow,
[style*="letter-spacing:.3em"][style*="text-transform:uppercase"],
[style*="letter-spacing: .3em"][style*="text-transform:uppercase"],
[style*="letter-spacing:.4em"][style*="text-transform:uppercase"],
[style*="letter-spacing: .4em"][style*="text-transform:uppercase"],
[style*="letter-spacing:.35em"][style*="text-transform:uppercase"],
[style*="letter-spacing: .35em"][style*="text-transform:uppercase"],
[style*="letter-spacing:.45em"][style*="text-transform:uppercase"],
[style*="letter-spacing: .45em"][style*="text-transform:uppercase"],
[style*="letter-spacing:.6em"][style*="text-transform:uppercase"] {
    font-size: 26px !important;
    letter-spacing: 5px !important;
    text-transform: uppercase !important;
    color: #C4A265 !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    margin-bottom: 14px !important;
    display: block !important;
    max-width: 100% !important;
    overflow-wrap: break-word;
}

/* --- MAIN HEADINGS below eyebrows (including inline-clamp h2s) --- */
.sc-section__title,
.sc-list-heading,
.sc-careers-cta__title,
.sc-ph-logo-lockup__name,
.sc-story-heading,
.sc-svc-row__title,
.sc-svc-hero__title,
.sc-svc-cta-band__title,
.sc-page-header__title,
.ph2-hero__title,
.ph2-intro__heading,
.ph2-collection__title,
.ph2-team__title,
.ph2-contact__title,
h2[style*="font-size:clamp"],
h2[style*="font-size: clamp"],
h3[style*="font-size:clamp"],
h3[style*="font-size: clamp"] {
    font-size: 24px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.35 !important;
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}

/* Force dark charcoal ONLY where the template used var(--sc-dark).
   On dark backgrounds templates set color:var(--sc-white) — we leave those alone. */
.sc-section__title,
.sc-list-heading,
.sc-careers-cta__title,
.sc-ph-logo-lockup__name,
h2[style*="color:var(--sc-dark)"],
h3[style*="color:var(--sc-dark)"] {
    color: #2C2C2C !important;
}
/* And force light where templates explicitly used var(--sc-white) */
h2[style*="color:var(--sc-white)"],
h3[style*="color:var(--sc-white)"],
.sc-private-house-section .sc-ph-logo-lockup__name,
.sc-list-section .sc-list-heading,
.sc-offplan-section .sc-section__title--light {
    color: #F5F1EB !important;
}

/* Only the homepage main hero (above-the-fold brand lockup) stays large —
   every other page hero follows the reversed hierarchy per client spec. */
.sc-hero__title {
    font-size: clamp(40px, 6vw, 72px) !important;
}

@media (max-width: 768px) {
    .sc-section__eyebrow,
    .sc-list-eyebrow,
    .sc-partners__label,
    .sc-careers-cta__eyebrow,
    .sc-ph-content__eyebrow,
    .ph2-hero__eyebrow,
    .ph2-intro__eyebrow,
    .ph2-collection__eyebrow,
    .ph2-team__eyebrow,
    .ph2-contact__eyebrow,
    [style*="letter-spacing:.3em"][style*="text-transform:uppercase"],
    [style*="letter-spacing: .3em"][style*="text-transform:uppercase"],
    [style*="letter-spacing:.4em"][style*="text-transform:uppercase"],
    [style*="letter-spacing:.45em"][style*="text-transform:uppercase"] {
        font-size: 20px !important;
        letter-spacing: 4px !important;
    }
    .sc-section__title,
    .sc-list-heading,
    .sc-careers-cta__title,
    .sc-ph-logo-lockup__name,
    h2[style*="font-size:clamp"],
    h3[style*="font-size:clamp"] {
        font-size: 20px !important;
    }
}

/* ------------------------------------------------------------
   ITEM 3: PRIVATE HOUSE HOMEPAGE — Wood left + luxury right
   ------------------------------------------------------------ */
.sc-private-house-section {
    padding: 0 !important;
    background: #353C40 !important;
}
.sc-private-house-section .sc-ph-inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0 !important;
    max-width: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 560px !important;
    align-items: stretch !important;
}
.sc-private-house-section .sc-ph-content {
    background-image:
        linear-gradient(rgba(196, 162, 101, 0.32), rgba(44, 28, 16, 0.55)),
        url('/wp-content/themes/oceanwp-child-steveco/assets/images/private-house/wood-texture.jpg') !important;
    background-size: cover, cover !important;
    background-position: center center, center center !important;
    background-repeat: no-repeat, no-repeat !important;
    padding: 88px 72px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
    height: 100% !important;
    min-height: 560px !important;
    width: 100% !important;
    margin: 0 !important;
    color: #fff !important;
}
/* Kill the section's ::before / ::after overlays so wood texture shows clean */
.sc-private-house-section::before,
.sc-private-house-section::after {
    display: none !important;
    content: none !important;
}
/* Hide "For the Discerning Few" eyebrow on homepage Private House section per client */
.sc-private-house-section .sc-ph-content__eyebrow {
    display: none !important;
}
.sc-private-house-section .sc-ph-logo-lockup {
    margin-bottom: 32px !important;
}
.sc-private-house-section .sc-ph-logo-lockup__name {
    color: #FFFFFF !important;
    font-size: 30px !important;
    font-weight: 300 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}
/* Hide sub-tagline, stats, body — homepage shows only heading + CTA per spec */
.sc-private-house-section .sc-ph-logo-lockup__sub,
.sc-private-house-section .sc-ph-content__body,
.sc-private-house-section .sc-ph-stats {
    display: none !important;
}
.sc-private-house-section .sc-ph-cta-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255,255,255,.85) !important;
    padding: 16px 32px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .18em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transition: all .25s ease !important;
    align-self: flex-start !important;
    width: auto !important;
    max-width: max-content !important;
}
.sc-private-house-section .sc-ph-cta-btn:hover {
    background: #C4A265 !important;
    border-color: #C4A265 !important;
    color: #353C40 !important;
}
.sc-private-house-section .sc-ph-image-stack {
    margin: 0 !important;
    padding: 0 !important;
    background-image: url('/wp-content/themes/oceanwp-child-steveco/assets/images/private-house/luxury-interior.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    align-self: stretch !important;
    height: 100% !important;
    width: 100% !important;
    min-height: 560px !important;
}
.sc-private-house-section .sc-ph-image-stack__main,
.sc-private-house-section .sc-ph-image-stack__placeholder,
.sc-private-house-section .sc-ph-image-stack__accent {
    display: none !important;
}

@media (max-width: 900px) {
    .sc-private-house-section .sc-ph-inner {
        grid-template-columns: 1fr !important;
    }
    .sc-private-house-section .sc-ph-content {
        padding: 64px 32px !important;
    }
    .sc-private-house-section .sc-ph-image-stack {
        min-height: 360px !important;
    }
}

/* ------------------------------------------------------------
   ITEM 6: CONSISTENT FLOW — Channel Partners → Footer
   Unify backgrounds to soft cream/white so transition to dark
   footer feels natural.
   ------------------------------------------------------------ */
.sc-partners,
.sc-partners--ticker,
.sc-careers-cta,
.sc-careers-section {
    background-color: #F5F1EB !important;
    background-image: none;
}
.sc-partners { border-bottom: none !important; }
.sc-careers-cta {
    background: linear-gradient(180deg, #F5F1EB 0%, #EDE6DA 100%) !important;
    padding: 80px 24px !important;
}

/* ------------------------------------------------------------
   ITEM 10: BACKGROUND IMAGERY — Careers & List sections
   ------------------------------------------------------------ */
.sc-careers-cta {
    background-image:
        linear-gradient(rgba(245,241,235,0.88), rgba(237,230,218,0.92)),
        url('/wp-content/themes/oceanwp-child-steveco/assets/images/careers-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}
.sc-careers-cta__inner {
    position: relative;
    z-index: 2;
}
.sc-careers-cta__title,
.sc-careers-cta__sub {
    color: #2C2C2C !important;
}

/* List Your Property — slightly less overlay for more warmth */
.sc-list-section {
    background-image:
        linear-gradient(rgba(44,44,44,.82), rgba(44,44,44,.82)),
        url('/wp-content/themes/oceanwp-child-steveco/assets/images/list-property-bg.jpg') !important;
    background-size: auto, cover !important;
    background-position: center, center !important;
    background-repeat: no-repeat, no-repeat !important;
}

/* ------------------------------------------------------------
   ITEM 5: PARTNER LOGOS — size & spacing
   ------------------------------------------------------------ */
.sc-partners__ticker .sc-partner-item {
    padding: 0 28px !important;
    min-width: 160px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.sc-partners__ticker .sc-partner-logo,
.sc-partners--ticker .sc-partner-item .sc-partner-logo,
body .sc-partners .sc-partner-logo {
    max-width: 160px !important;
    max-height: 72px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    filter: none !important;
    opacity: 1 !important;
    display: block !important;
    transition: opacity .2s ease, filter .2s ease !important;
}
.sc-partners__ticker .sc-partner-item:hover .sc-partner-logo,
.sc-partners--ticker .sc-partner-item:hover .sc-partner-logo {
    filter: none !important;
    opacity: 1 !important;
}
/* HRE logo is white-on-transparent — invert + darken for cream background */
.sc-partners__ticker .sc-partner-logo[src*="hre-development"],
body .sc-partners .sc-partner-logo[src*="hre-development"] {
    filter: invert(1) brightness(.3) !important;
}
/* Ticker edge fade must match cream section bg, not white */
.sc-partners__ticker-wrap::before {
    background: linear-gradient(to right, #F5F1EB, transparent) !important;
}
.sc-partners__ticker-wrap::after {
    background: linear-gradient(to left, #F5F1EB, transparent) !important;
}
/* Partners section — cream background with soft padding */
.sc-partners,
.sc-partners--ticker {
    padding: 48px 0 !important;
}

/* ------------------------------------------------------------
   ITEM 8 (REINFORCED): NAV HOVER COLOR REVERSAL
   Max specificity to beat OceanWP customizer inline CSS.
   Default = copper gold (#C4A265); hover/current = white (#FFFFFF)
   ------------------------------------------------------------ */
body #site-header #site-navigation-wrap .dropdown-menu > li > a,
body #site-header #site-navigation-wrap .dropdown-menu > li > a .text-wrap,
body #site-header #site-navigation-wrap .main-menu > li > a,
body #site-header #site-navigation-wrap .main-menu > li > a .text-wrap,
body #site-header #site-navigation-wrap .dropdown-menu > li > a.menu-link,
body #site-header #site-navigation-wrap .dropdown-menu > li > a.menu-link > span,
body #site-header .main-navigation .dropdown-menu > li > a,
body #site-header .main-navigation .dropdown-menu > li > a .text-wrap {
    color: #C4A265 !important;
}

body #site-header #site-navigation-wrap .dropdown-menu > li > a:hover,
body #site-header #site-navigation-wrap .dropdown-menu > li > a:hover .text-wrap,
body #site-header #site-navigation-wrap .main-menu > li > a:hover,
body #site-header #site-navigation-wrap .main-menu > li > a:hover .text-wrap,
body #site-header #site-navigation-wrap .dropdown-menu > li > a:focus,
body #site-header #site-navigation-wrap .dropdown-menu > li > a:focus .text-wrap,
body #site-header #site-navigation-wrap .dropdown-menu > li.sfHover > a,
body #site-header #site-navigation-wrap .dropdown-menu > li.sfHover > a .text-wrap,
body #site-header #site-navigation-wrap .dropdown-menu > li.current-menu-item > a,
body #site-header #site-navigation-wrap .dropdown-menu > li.current-menu-item > a .text-wrap,
body #site-header #site-navigation-wrap .dropdown-menu > li.current-menu-ancestor > a,
body #site-header #site-navigation-wrap .dropdown-menu > li.current-menu-ancestor > a .text-wrap,
body #site-header .main-navigation .dropdown-menu > li > a:hover,
body #site-header .main-navigation .dropdown-menu > li > a:hover .text-wrap {
    color: #FFFFFF !important;
}

/* ------------------------------------------------------------
   FOOTER — Lighter palette to flow from cream sections above.
   Override the previous dark #1E1E1E / #111 footer so the
   transition from Careers → Footer is smooth, not jarring.
   ------------------------------------------------------------ */
body #sc-footer {
    background-color: #EDE6DA !important;
    color: #2C2C2C !important;
}
body #sc-footer .sc-footer-main {
    background-color: #EDE6DA !important;
    border-top: 1px solid rgba(196,162,101,.25) !important;
    color: #2C2C2C !important;
}
body #sc-footer .sc-footer-bottom {
    background-color: #E5DDD0 !important;
    border-top: 1px solid rgba(196,162,101,.18) !important;
}
/* Column titles — copper gold already, keep, slightly darker border */
body #sc-footer .sc-footer-col-title {
    color: #8A6D3D !important;
    border-bottom-color: rgba(196,162,101,.35) !important;
}
/* Brand column text */
body #sc-footer .sc-footer-tagline {
    color: #2C2C2C !important;
}
body #sc-footer .sc-footer-address {
    color: #555555 !important;
}
body #sc-footer .sc-footer-phone,
body #sc-footer .sc-footer-email {
    color: #2C2C2C !important;
    text-decoration: none !important;
}
body #sc-footer .sc-footer-phone:hover,
body #sc-footer .sc-footer-email:hover {
    color: #C4A265 !important;
}
/* Quick-link lists */
body #sc-footer .sc-footer-links li a {
    color: #555555 !important;
}
body #sc-footer .sc-footer-links li a:hover {
    color: #2C2C2C !important;
}
/* Social icon buttons */
body #sc-footer .sc-footer-social .sc-social-icon {
    color: #2C2C2C !important;
    border-color: rgba(44,44,44,.3) !important;
}
body #sc-footer .sc-footer-social .sc-social-icon:hover {
    color: #C4A265 !important;
    border-color: #C4A265 !important;
}
/* RERA badge — keep readable on cream */
body #sc-footer .sc-footer-rera-badge {
    background: rgba(196,162,101,.08) !important;
    border-color: rgba(196,162,101,.4) !important;
}
body #sc-footer .sc-footer-rera-label {
    color: #8A6D3D !important;
}
body #sc-footer .sc-footer-rera,
body #sc-footer .sc-footer-rera-sub,
body #sc-footer .sc-footer-rera a {
    color: #2C2C2C !important;
}
/* Bottom bar legal + copyright */
body #sc-footer .sc-footer-bottom .sc-footer-legal,
body #sc-footer .sc-footer-bottom .sc-footer-copyright,
body #sc-footer .sc-footer-bottom a {
    color: #555555 !important;
}
body #sc-footer .sc-footer-bottom a:hover {
    color: #C4A265 !important;
}

/* ------------------------------------------------------------
   FIX: List-form select dropdown was clipping option text
   Force min-width, allow wrap, no overflow truncation.
   ------------------------------------------------------------ */
.sc-list-form-card .wpcf7-form select,
.sc-list-form-card .wpcf7-form select[name="your-interest"],
.sc-list-section .wpcf7-form select {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 40px !important;
    text-overflow: clip !important;
    white-space: normal !important;
    overflow: visible !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.sc-list-form-card .wpcf7-form select option,
.sc-list-section .wpcf7-form select option {
    white-space: normal !important;
    padding: 8px 12px !important;
}
/* Ensure wrapper allows full width of select */
.sc-list-form-card .wpcf7-form-control-wrap[data-name="your-interest"],
.sc-list-form-card span.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}

/* ------------------------------------------------------------
   Header — fully transparent. No backdrop, no gradient, no blur,
   no text-shadow, no drop-shadow. Clean.
   ------------------------------------------------------------ */
#site-header,
.site-header {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
}
.main-navigation a,
#site-navigation a,
.navigation a,
.wcml-dropdown a,
.currency-switcher a,
[class*="currency"] a,
body #site-header #site-navigation-wrap .dropdown-menu > li > a,
body #site-header #site-navigation-wrap .dropdown-menu > li > a .text-wrap,
body #site-header #site-navigation-wrap .main-menu > li > a,
body #site-header #site-navigation-wrap .main-menu > li > a .text-wrap {
    text-shadow: none !important;
}
#site-logo a,
.site-logo-text a,
#site-logo img,
.custom-logo {
    filter: none !important;
}

/* ------------------------------------------------------------
   FIX: Form fields — proper height/padding so option text
   (e.g. "Buying" in the interest select) never gets clipped.
   Broad rules covering any CF7 form on the site.
   ------------------------------------------------------------ */
.sc-list-form select,
.sc-list-form input,
.wpcf7-form select,
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea,
.sc-form select,
.sc-form input {
    min-height: 48px !important;
    line-height: 1.4 !important;
    padding: 12px 16px !important;
    overflow: visible !important;
    text-overflow: clip !important;
    white-space: normal !important;
    font-size: 15px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}
.sc-list-form select,
.wpcf7-form select,
.sc-form select {
    -webkit-appearance: none !important;
    appearance: none !important;
    padding-right: 40px !important;
}
.wpcf7-form textarea {
    min-height: 120px !important;
}
.wpcf7-form-control-wrap,
span.wpcf7-form-control-wrap {
    display: block !important;
    width: 100% !important;
}