/*
Theme Name:  Face to Face Realty Child
Description: Child theme of the FaceToFaceRealty theme. All v7 reskin customizations live here — never edit the parent. Home of the Blue Keys.
Author:      Face to Face Realty LLC
Template:    FaceToFaceRealty
Version:     1.2.8
Text Domain: facetoface-child
*/

/* ============================================================
   MOBILE VIEWPORT HARD FIX  (2026-07-11)
   The parent theme (FaceToFaceRealty) applies min-width:998px
   unconditionally to #header, .form_outer, #middle_outer and
   #footer, forcing desktop-scale rendering on real mobile
   devices. Neutralize those floors GLOBALLY (not inside a
   media query) because the prior @media (max-width:820px)
   override was not reliably defeating the parent rule for
   cached logged-out mobile requests. Desktop layout is
   unaffected: these wrappers already carry width:100%; the
   centered 998px content column is enforced by inner
   containers (e.g. #inn_middle), which we leave alone.
   ============================================================ */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
html body #header,
html body .form_outer,
html body #middle_outer,
html body #footer {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
/* Belt-and-suspenders on media so nothing else can push wide */
html body img,
html body iframe,
html body video,
html body svg,
html body table,
html body .wpcf7 {
    max-width: 100% !important;
}
/* NOTE: intentionally NO 'height: auto !important' here.
   The nav logo (.brand-logo img { height:46px }) and footer logo (inline style height:96px)
   both set explicit heights. An !important height:auto override forced both to render at
   the intrinsic 1080x860 of the source PNG, producing giant white blocks on mobile.
   max-width:100% alone caps overflow while letting explicit heights win. */
/* end MOBILE VIEWPORT HARD FIX */



@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root{
  --f2f-navy-900:#081832; --f2f-navy-800:#0d2242; --f2f-navy-700:#12294d; --f2f-navy-600:#1b3a68;
  --f2f-key-blue:#2e78d2; --f2f-gold:#c9a227; --f2f-gold-soft:#d9b94a;
  --f2f-paper:#f7f5ef; --f2f-ink:#12213b; --f2f-muted:#5a6885;
}

/* ===== V7 RESKIN v2 — interior pages ===== */

/* 1. Header top bar */
#header .top_part{ background:var(--f2f-navy-900) !important; background-image:none !important; border-bottom:3px solid var(--f2f-gold); }
#header .top_part span, #header .top_part p, #header .top_part div{ color:#fff !important; }
#header .top_part a{ color:var(--f2f-gold-soft) !important; text-decoration:none; }

/* 2. White logo swap (file exists on prod + staging; root-relative ports) */
.top_part .logo img{ content:url('/wp-content/uploads/2026/07/Face_to_Face_Realty_White.png'); width:161px; height:auto; }

/* 3. Navigation band */
#header .manu_part{ background:var(--f2f-navy-800) !important; background-image:none !important; }
.manu, .manu ul, .manu ul li{ background:transparent !important; background-image:none !important; }
.manu ul li a{ color:#fff !important; font-weight:600; letter-spacing:.04em; }
.manu ul li a:hover, .manu ul li:hover > a{ background:var(--f2f-navy-700) !important; color:var(--f2f-gold-soft) !important; }
.manu ul ul{ background:var(--f2f-navy-800) !important; }
.manu ul ul li:hover > a{ background-color:var(--f2f-navy-600) !important; color:var(--f2f-gold-soft) !important; }

/* 4. Page & post titles */
.middle_content h1{ font-family:'Playfair Display', Georgia, serif !important; color:var(--f2f-navy-800) !important; font-weight:700; letter-spacing:-0.01em; }

/* 5. Site-wide: no sidebar, centered column, no ghost meta */
.blog_rt{ display:none !important; }
.blog_lt{ width:100% !important; float:none !important; max-width:860px; margin:0 auto; }
.post_tm{ display:none !important; }

/* 6. Content links */
.post_desc a{ color:var(--f2f-key-blue); }
.post_desc p, .post_desc li{ color:var(--f2f-ink); }

/* 7. Primary CTA — navy at rest, gold on approach */
.post_desc .owner-btn a{ background:var(--f2f-navy-800) !important; background-image:none !important; color:#fff !important; border:1px solid var(--f2f-gold); font-weight:700; border-radius:8px; box-shadow:0 6px 16px -8px rgba(8,24,50,.5); transition:background .18s ease, color .18s ease, transform .18s ease; }
.post_desc .owner-btn a:hover{ background:var(--f2f-gold) !important; color:var(--f2f-navy-900) !important; transform:translateY(-1px); }

/* 8. Social icons — unified navy, gold hover */
ul.cnss-social-icon li.cn-fa-icon a[class*="cnss-"][class], a[class*="cnss-"]{ background:var(--f2f-navy-800) !important; background-color:var(--f2f-navy-800) !important; color:#fff !important; border-radius:6px; transition:background .18s ease, color .18s ease; }
ul.cnss-social-icon li.cn-fa-icon a[class*="cnss-"][class]:hover, a[class*="cnss-"]:hover{ background:var(--f2f-gold) !important; background-color:var(--f2f-gold) !important; color:var(--f2f-navy-900) !important; }

/* 9. Sidebar widget headers (blog pages keep sidebar) */
.blog_rt h3, .blog_rt h4, .blog_rt .widgettitle, .blog_rt .widget-title, .middle_content .widget h3{ background:var(--f2f-navy-800) !important; background-image:none !important; color:#fff !important; border-left:4px solid var(--f2f-gold); }
.blog_rt a{ color:var(--f2f-navy-700); }
.blog_rt a:hover{ color:var(--f2f-key-blue); }

/* 10. Footer */
#footer, #footer #outer_ftr, #footer .footer_content{ background:var(--f2f-navy-900) !important; background-image:none !important; color:#c6d2e6 !important; }
#footer .footer_content *{ color:#c6d2e6 !important; }
#footer a{ color:#cdd7ea !important; }
#footer a:hover{ color:var(--f2f-gold-soft) !important; }

/* 8b. Image-based social icons (tiktok, threads) — dress to match the family */
ul.cnss-social-icon li a{ background:var(--f2f-navy-800) !important; width:28px !important; height:28px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; border-radius:6px; box-sizing:border-box !important; padding:0 !important; }
ul.cnss-social-icon li a img{ width:17px !important; height:17px !important; object-fit:contain; }
ul.cnss-social-icon li a:hover{ background:var(--f2f-gold) !important; }
ul.cnss-social-icon li a:hover img{ filter:brightness(0); }


/* 11. Forms — navy/gold treatment, all CF7 forms + comment form */
.wpcf7-form label, #commentform label{ color:var(--f2f-navy-800) !important; font-weight:600; font-size:.92em; }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"], .wpcf7-form input[type="number"], .wpcf7-form input[type="date"], .wpcf7-form select, .wpcf7-form textarea, #commentform input[type="text"], #commentform input[type="email"], #commentform textarea{ background:#ffffff !important; color:var(--f2f-ink) !important; border:1px solid #cfd6e4 !important; border-radius:8px !important; padding:12px 14px !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; font-family:inherit !important; font-size:1em !important; line-height:1.4 !important; margin:4px 0 12px !important; transition:border-color .15s ease, box-shadow .15s ease; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus, #commentform input:focus, #commentform textarea:focus{ outline:none !important; border-color:var(--f2f-gold) !important; box-shadow:0 0 0 3px rgba(201,162,39,.25) !important; }
.wpcf7-form ::placeholder{ color:var(--f2f-muted); opacity:.8; }
.wpcf7-form input[type="submit"], #commentform input[type="submit"]{ background:var(--f2f-navy-800) !important; color:#ffffff !important; border:1px solid var(--f2f-gold) !important; border-radius:8px !important; padding:13px 28px !important; font-weight:700 !important; font-size:1em !important; width:auto !important; cursor:pointer; box-shadow:0 6px 16px -8px rgba(8,24,50,.5); transition:background .18s ease, color .18s ease, transform .18s ease; }
.wpcf7-form input[type="submit"]:hover, #commentform input[type="submit"]:hover{ background:var(--f2f-gold) !important; color:var(--f2f-navy-900) !important; transform:translateY(-1px); }
.wpcf7-form p{ margin:0 0 6px; }
.wpcf7 .wpcf7-not-valid-tip{ color:#b3261e; font-size:.85em; }
.wpcf7 .wpcf7-response-output{ border-color:var(--f2f-gold) !important; color:var(--f2f-navy-800); border-radius:8px; padding:10px 14px; }


/* ===== MOBILE-EMERGENCY: force responsive layout on legacy templates ===== */
@media only screen and (max-width:820px){
  html body #middle, html body #middle_outer, html body #middle_inner{ width:100% !important; max-width:100% !important; min-width:0 !important; }
  html body #header, html body .top_part, html body .manu_part, html body #footer, html body #outer_ftr{ width:100% !important; max-width:100% !important; min-width:0 !important; }
  html body .blog_lt, html body .blog_outer, html body .middle_content{ width:100% !important; max-width:100% !important; float:none !important; margin:0 auto !important; padding-left:16px !important; padding-right:16px !important; box-sizing:border-box !important; }
  html body .blog_rt{ display:none !important; }
  html body img, html body iframe, html body video{ max-width:100% !important; } /* height:auto removed 2026-07-11: was breaking .brand-logo (46px) and footer logo (96px) on mobile */
  html body .top_part{ height:auto !important; padding:14px 16px !important; text-align:center !important; }
  html body .top_part .logo, html body .top_part .logo img{ float:none !important; margin:0 auto !important; display:block !important; }
  html body .manu_part{ height:auto !important; }
  html body .manu ul{ display:flex !important; flex-wrap:wrap !important; justify-content:center !important; gap:2px !important; padding:0 !important; }
  html body .manu ul li{ float:none !important; width:auto !important; }
  html body .manu ul li a{ padding:10px 12px !important; font-size:.9em !important; }
  html body .manu ul ul{ position:static !important; width:100% !important; }
  html body #footer, html body #footer *{ text-align:center !important; float:none !important; }
  html body table{ display:block !important; overflow-x:auto !important; }
}


/* ===== MOBILE-HEADER-CENTERING ===== */
@media only screen and (max-width:820px){
  html body .top_part ul.cnss-social-icon{ text-align:center !important; display:block !important; width:100% !important; padding-left:0 !important; margin-left:0 !important; }
  html body .top_part ul.cnss-social-icon li{ float:none !important; display:inline-block !important; margin:0 6px !important; }
  html body .top_num,
}


/* ===== MOBILE-HEADER-V2 ===== */
@media only screen and (max-width:820px){
  html body #header .manu_part, html body .manu_part, html body #header .top_inn, html body .social_icons{ background:#081832 !important; background-color:#081832 !important; background-image:none !important; }
  html body .social_icons, html body .top_part .social_icons{ text-align:center !important; width:100% !important; float:none !important; }
  html body ul.cnss-social-icon, html body .social_icons ul.cnss-social-icon{ text-align:center !important; display:block !important; width:100% !important; float:none !important; padding:0 !important; margin:0 auto !important; }
  html body ul.cnss-social-icon li, html body .social_icons ul.cnss-social-icon li{ float:none !important; display:inline-block !important; margin:0 8px !important; vertical-align:middle !important; }
}

/* f2f-hide-topnum: hide invisible Call Us widget container exposed by navy bar (mobile only) */
@media only screen and (max-width:650px){
  #header .top_num{ display:none !important; }
}

/* f2f-desktop-nav-icons: hide Call Us globally; move social icons into nav bar right of ABOUT */

/* Kill Call Us bar everywhere */
#header .top_num{ display:none !important; }

/* Desktop: reposition social icons into nav bar */
@media only screen and (min-width:651px){
  #header{ position:relative !important; }
  #header .social_icons{
    position:absolute !important;
    bottom:15px !important;
    right:15px !important;
    float:none !important;
    background:transparent !important;
    background-image:none !important;
    border:none !important;
    padding:0 !important;
    margin:0 !important;
    width:auto !important;
    z-index:10;
  }
  #header .social_icons ul.cnss-social-icon{
    display:flex !important;
    align-items:center !important;
    gap:12px;
  }
  #header .social_icons ul.cnss-social-icon li{
    margin:0 !important;
    float:none !important;
  }
}

/* ============================================================
   f2f-mobile-fit v1  (Alfred - 2026-07-11)
   Airtight mobile overflow guard. Neutralizes parent-theme
   min-width:998px on structural + secondary containers so
   phones stop shrink-to-fitting the desktop layout. Caps
   media to viewport. Remove this whole block to revert.
   ============================================================ */
@media only screen and (max-width: 820px){
  html, body{ min-width:0 !important; max-width:100% !important; overflow-x:hidden !important; }
  html body #header,
  html body #middle,
  html body #middle_outer,
  html body #middle_inner,
  html body #footer,
  html body .top_part,
  html body .top_inn,
  html body .top_inner,
  html body .manu_part,
  html body .iphonNav{
    width:100% !important; max-width:100% !important; min-width:0 !important; box-sizing:border-box !important;
  }
  html body img, html body iframe, html body video,
  html body table, html body embed, html body object{ max-width:100% !important; }
}