/* IG Theme - Responsive & Footer */

/* === FOOTER === */
.site-footer .footer-widget-area {
  color: #5A5347;
}
.site-footer .footer-widget-area a,
.site-footer .footer-widget-area .widget_nav_menu a,
.site-footer .footer-widget-area .menu li a {
  color: #5A5347 !important;
  text-decoration: none;
}
.site-footer .footer-widget-area a:hover,
.site-footer .footer-widget-area .widget_nav_menu a:hover,
.site-footer .footer-widget-area .menu li a:hover {
  color: #3E7A8C !important;
}
.site-footer .footer-widget-area h2,
.site-footer .footer-widget-area .widget-title {
  color: #5A5347 !important;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 16px;
}
/* Footer nav menu list cleanup */
.site-footer .widget_nav_menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer .widget_nav_menu ul li {
  margin-bottom: 10px;
}
.site-footer .widget_nav_menu ul li a {
  font-size: 14px;
}
/* Footer contact links keep teal */
.site-footer .footer-widget-area a[href^="tel:"],
.site-footer .footer-widget-area a[href^="mailto:"],
.site-footer .footer-widget-area a[href*="iangreenen.com"],
.site-footer .footer-widget-area a[href*="elliman.com"] {
  color: #3E7A8C !important;
}
/* Footer logo SVGs */
.site-footer svg[aria-label] {
  flex-shrink: 0;
}

/* === WHY DE SECTION === */
.de-section {
  background: #F8F6F3;
  padding: 60px 40px;
  border-radius: 4px;
  margin: 60px 0;
  text-align: center;
}
.de-section img {
  max-width: 200px;
  margin-bottom: 24px;
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  /* Body frame — reduce padding on mobile */
  body { padding: 0 12px !important; }

  /* Mobile header branding */
  .site-branding .site-title {
    font-size: 18px !important;
    letter-spacing: 5px !important;
  }
  .site-branding .site-title::after {
    font-size: 7px !important;
    letter-spacing: 2px !important;
    margin-top: 2px !important;
    color: #3D3530 !important;
    font-weight: 500 !important;
  }

  /* Hide sign in link on mobile */
  .header-signin-link {
    display: none !important;
  }

  /* Hamburger menu icon — make visible on mobile */
  #main-header .menu-toggle-open svg,
  #main-header .menu-toggle svg,
  #main-header button[aria-label*="menu"] svg,
  #main-header button[aria-label*="Menu"] svg {
    width: 24px !important;
    height: 24px !important;
    color: #5A5347 !important;
    fill: #5A5347 !important;
    stroke: #5A5347 !important;
  }
  #main-header button[aria-label*="menu"],
  #main-header button[aria-label*="Menu"] {
    opacity: 1 !important;
    visibility: visible !important;
  }
  /* Kadence hamburger icon lines */
  .kadence-svg-iconset svg {
    color: #5A5347 !important;
    fill: currentColor !important;
  }
  /* Custom hamburger lines */
  .header-menu-toggle span {
    background: #5A5347 !important;
    height: 2.5px !important;
    width: 24px !important;
  }

  /* Hero search bar on mobile — compact square */
  .hero-search-bar {
    max-width: 85% !important;
    margin: 8px auto 12px !important;
  }
  .hero-search-bar > div {
    padding: 6px 8px 6px 14px !important;
    border-radius: 4px !important;
  }
  .hero-search-bar svg:first-child {
    width: 14px !important;
    height: 14px !important;
    margin-right: 6px !important;
  }
  .hero-search-bar span[style*="font-size"],
  .hero-search-bar span[style*="font-family"] {
    font-size: 9px !important;
    letter-spacing: 0.5px !important;
  }
  .hero-search-bar span[style*="border-radius:50%"] {
    width: 28px !important;
    height: 28px !important;
  }
  .hero-search-bar span[style*="border-radius:50%"] svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Featured properties — stack on mobile */
  .featured-properties-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 8px !important;
  }

  /* Service cards — stack on mobile */
  .wp-block-group:has(.service-card) {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  .service-card h3 {
    min-height: unset !important;
    padding: 16px 16px 0 !important;
  }
  .service-card p {
    padding: 0 16px !important;
    max-width: 100% !important;
  }

  /* Hero on mobile — video plays, static image as fallback behind */
  .hero-video-section,
  .video-hero-section {
    height: 70vh !important;
    background-image: url('/wp-content/uploads/2026/03/jupiter-lighthouse-sunset-scaled.png') !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .hero-video-overlay {
    background: rgba(0,0,0,0.25) !important;
  }

  /* Hero content */
  .hero-video-content h1,
  .video-hero-content h1 { font-size: 26px !important; letter-spacing: 4px !important; }
  .hero-video-content p,
  .video-hero-content p { font-size: 13px !important; letter-spacing: 2px !important; }

  /* DE logo in hero — smaller on mobile */
  .hero-de-logo img { max-width: 180px !important; }

  /* Hero buttons — stacked vertically on mobile */
  .hero-bottom-content div[style*="gap"] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
    margin-top: 12px !important;
  }
  .hero-bottom-content {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
  }
  /* All hero buttons base */
  .hero-bottom-content a.hero-btn-primary,
  .hero-bottom-content a.hero-btn-secondary {
    padding: 14px 24px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
    width: auto !important;
    max-width: 90% !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    border-radius: 4px !important;
    font-family: "Josefin Sans", sans-serif !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    margin: 0 auto !important;
  }
  /* Primary button — solid gold on mobile */
  .hero-bottom-content a.hero-btn-primary {
    background: #B09570 !important;
    color: #fff !important;
    border: none !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
  }
  /* Secondary button — ghost on mobile */
  .hero-bottom-content a.hero-btn-secondary {
    background: transparent !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    font-weight: 400 !important;
  }
  /* DE logo — smaller on mobile, not hidden */
  .hero-de-logo {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }
  .hero-de-logo img {
    height: 36px !important;
    width: auto !important;
    opacity: 0.6 !important;
  }

  /* Mobile contact bar — disabled for now */
  /*
  .ig-mobile-contact-bar {
    display: flex !important;
  }
  body { padding-bottom: 56px !important; }
  */

  /* Mega menu — stack on mobile */
  .ig-mega-menu {
    overflow-y: auto !important;
  }
  .ig-mega-body {
    flex-direction: column !important;
    padding: 0 24px 24px !important;
    gap: 0 !important;
  }
  .ig-mega-photo {
    display: none !important;
  }
  .ig-mega-nav {
    flex-direction: column !important;
    gap: 0 !important;
  }
  .ig-mega-col {
    gap: 0 !important;
  }
  .ig-mega-col:not(:first-child) {
    border-top: 1px solid rgba(90,83,71,0.1) !important;
    padding-top: 8px !important;
    margin-top: 8px !important;
  }
  .ig-mega-link-main {
    font-size: 18px !important;
    margin-top: 14px !important;
    padding: 4px 0 !important;
  }
  .ig-mega-group {
    margin-top: 14px !important;
  }
  .ig-mega-group a:not(.ig-mega-link-main) {
    font-size: 13px !important;
    padding: 4px 0 !important;
  }
  /* Hide contact info column on mobile — it's in the footer */
  .ig-mega-col:nth-child(3) .ig-mega-group p {
    font-size: 12px !important;
  }
  .ig-mega-header {
    padding: 20px 24px !important;
  }
  .ig-mega-close {
    right: 24px !important;
    top: 20px !important;
  }
  .ig-mega-brand {
    font-size: 18px !important;
    letter-spacing: 5px !important;
  }
  .ig-mega-footer {
    padding: 16px 24px 24px !important;
  }
  .ig-mega-social {
    gap: 12px !important;
  }
  .ig-mega-social a {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  /* Hide Kadence mobile drawer */
  #mobile-drawer,
  .popup-drawer,
  .mobile-toggle-open .kadence-mobile-panel {
    display: none !important;
  }

  /* Meet Ian section — stack on mobile */
  .meet-ian-section {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .meet-ian-photo {
    flex: none !important;
    height: 400px !important;
  }
  .meet-ian-content {
    padding: 36px 24px !important;
  }
  .meet-ian-content h2 {
    font-size: 28px !important;
    letter-spacing: 0.15em !important;
  }
  .meet-ian-content .pull-quote {
    font-size: 17px !important;
    margin: 20px 0 !important;
  }
  .meet-ian-content .bio-buttons {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .meet-ian-content .bio-buttons a {
    width: 100% !important;
    min-width: unset !important;
  }
  .meet-ian-content .social-icons {
    justify-content: center !important;
  }

  /* Blog grid — stack on mobile */
  .blog-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 8px !important;
  }
  .blog-card h3 {
    min-height: unset !important;
  }

  /* CTA section mobile */
  .cta-video-section div[style*="display:flex"] {
    flex-direction: column !important;
    align-items: center !important;
  }
  .cta-video-section div[style*="display:flex"] a {
    width: 100% !important;
    max-width: 280px !important;
  }

  /* New Developments — proper mobile layout */
  #new-developments .wp-block-columns {
    flex-direction: column !important;
    gap: 24px !important;
  }
  #new-developments .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  #new-developments .community-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  #new-developments .community-card > div:first-child {
    width: 100% !important;
    height: 200px !important;
    aspect-ratio: auto !important;
  }
  #new-developments .community-card > div:last-child {
    padding: 20px 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #new-developments .community-card > div:last-child p,
  #new-developments .community-card > div:last-child h3 {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  #new-developments .community-card h3 {
    font-size: 20px !important;
  }
  /* Gold CTA card on mobile */
  #new-developments div[style*="min-height:380px"] {
    min-height: 240px !important;
  }

  /* Social icons in Meet Ian — wrap on mobile */
  .meet-ian-content .social-icons {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .meet-ian-content .social-icons a {
    width: 36px !important;
    height: 36px !important;
  }
  .meet-ian-content .social-icons a i,
  .meet-ian-content .social-icons a svg {
    font-size: 14px !important;
    width: 14px !important;
    height: 14px !important;
  }

  /* Local lifestyle bar — stack on mobile */
  .local-lifestyle-bar .wp-block-columns {
    flex-direction: column !important;
    gap: 32px !important;
  }
  .local-lifestyle-bar .wp-block-column {
    border-left: none !important;
    padding: 0 16px !important;
  }
  .local-lifestyle-bar {
    padding: 36px 16px !important;
  }

  /* Community cards */
  .community-grid {
    grid-template-columns: 1fr;
  }
  .community-card.featured {
    grid-column: span 1;
    height: 280px;
  }

  /* Lifestyle & services */
  .lifestyle-grid,
  .services-grid {
    grid-template-columns: 1fr;
  }

  /* About bio */
  .about-bio-section {
    flex-direction: column;
    gap: 30px;
  }
  .about-bio-photo img {
    width: 100%;
    max-width: 300px;
  }

  /* Footer — stack columns on mobile */
  .site-top-footer-inner-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 36px !important;
    align-items: center !important;
  }
  .site-top-footer-inner-wrap > .site-footer-section {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 20px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .site-footer .site-footer-section .widget_custom_html,
  .site-footer .site-footer-section .widget_nav_menu {
    text-align: center !important;
  }
  .site-footer .site-footer-section .widget_nav_menu ul {
    text-align: center !important;
    list-style: none !important;
    padding: 0 !important;
  }
  .site-footer .site-footer-section .widget_custom_html ul {
    text-align: center !important;
  }
  .site-footer .site-footer-section .widget-title {
    text-align: center !important;
  }
  /* Center social icons on mobile */
  .site-footer .site-footer-section div[style*="display:flex"][style*="gap:12px"] {
    justify-content: center !important;
  }
  /* Center contact info on mobile */
  .site-footer .site-footer-section p[style] {
    text-align: center !important;
  }

  /* Gutenberg columns — stack on mobile */
  .wp-block-columns {
    flex-direction: column !important;
  }
  .wp-block-column {
    flex-basis: 100% !important;
    width: 100% !important;
  }

  /* Reduce whitespace on mobile */
  .entry-content > .alignwide,
  .entry-content > .alignfull {
    margin-top: 24px !important;
    margin-bottom: 24px !important;
  }
  .entry-content .wp-block-group {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .wp-block-group[style*="padding-top:72px"] {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }
  .wp-block-group[style*="padding-top:48px"] {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }
  /* Tighten spacing between stacked columns on mobile */
  .wp-block-columns {
    gap: 16px !important;
  }
  /* Reduce margins between major sections */
  .entry-content > div,
  .entry-content > .wp-block-group {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
}

/* Featured properties — 2-col on tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .featured-properties-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px !important;
  }
}

/* === TABLET === */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-video-content h1,
  .video-hero-content h1 { font-size: 42px !important; }
  .hero-video-content p,
  .video-hero-content p { font-size: 18px !important; }

  /* Hero buttons — allow wrapping on tablet */
  .hero-video-content div[style*="flex"],
  .video-hero-content div[style*="flex"] {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 10px !important;
  }
  .hero-video-content div[style] a,
  .video-hero-content div[style] a {
    padding: 12px 20px !important;
    font-size: 11px !important;
  }

  /* Gutenberg columns — 2-col on tablet instead of stacking */
  .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .wp-block-column {
    flex-basis: 48% !important;
    min-width: 280px !important;
  }

  /* Footer — 2 columns on tablet */
  .site-top-footer-inner-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 30px !important;
  }
  .site-top-footer-inner-wrap > .site-footer-section {
    flex: 1 1 45% !important;
    min-width: 250px !important;
  }

  /* Local lifestyle bar — 2x2 grid on tablet */
  .local-lifestyle-bar .wp-block-columns {
    flex-wrap: wrap !important;
  }
  .local-lifestyle-bar .wp-block-column {
    flex-basis: 45% !important;
    margin-bottom: 20px !important;
    border-left: none !important;
  }

  /* Community cards */
  .community-card img {
    height: 200px !important;
  }
}

@media (max-width: 480px) {
  .hero-video-content h1,
  .video-hero-content h1 { font-size: 24px !important; letter-spacing: 4px !important; }
  .hero-cta-btn { padding: 10px 20px; font-size: 10px !important; }
  /* Compact buttons on small screens */
  .hero-bottom-content a.hero-btn-primary,
  .hero-bottom-content a.hero-btn-secondary {
    padding: 12px 20px !important;
    font-size: 10px !important;
    letter-spacing: 0.5px !important;
    width: auto !important;
    max-width: 90% !important;
    white-space: nowrap !important;
  }
  .hero-search-bar {
    max-width: 85% !important;
    margin: 6px auto 10px !important;
  }
  /* DE logo smaller on small mobile */
  .hero-de-logo img { height: 30px !important; }
  /* Tighter hero headline */
  .hero-video-content h1,
  .video-hero-content h1 {
    font-size: 22px !important;
    letter-spacing: 3px !important;
    margin-bottom: 12px !important;
  }
  .hero-video-content p,
  .video-hero-content p {
    font-size: 12px !important;
    margin-bottom: 16px !important;
  }
  .site-footer .site-top-footer-inner-wrap > .footer-widget-area {
    padding: 0 12px !important;
  }
}

/* === HEADER TWEAKS === */
.site-header .site-branding img {
  max-height: 45px;
  width: auto;
}
#main-header .header-html a {
  color: #3E7A8C !important;
  font-weight: 700;
}

/* === GENERAL === */
body { font-family: Georgia, "Times New Roman", serif; }
.entry-content { overflow-x: hidden; }