/*
Theme Name: Hair Clinic Dubai — Hello Elementor Child
Theme URI: https://hairclinicdubai.com/
Description: Premium Hair Clinic Dubai child theme for Hello Elementor with custom global header, single-post template, archive/category templates, footer and built-in HCD Elementor widgets (Slider, Video Coverflow, Polaroid Carousel).
Author: Hair Clinic Dubai
Template: hello-elementor
Version: 3.7.0
Text Domain: hair-clinic-dubai
*/

/* =====================================================================
   HAIR CLINIC DUBAI - GLOBAL STYLES (loaded on every page)
   Order matters (cascade): 1. Header  ->  2. Footer
   Page-specific styles stay in their own conditionally-loaded files:
     hcd-archive.css      (blog page + archives only)
     hcd-single-post.css  (single blog posts only)
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. HEADER  (was hcd-header.css)
   --------------------------------------------------------------------- */
/* Hair Clinic Dubai — Global Header CSS.
 * Preserved from the supplied header.html.
 */
/* Base Desktop Styling */
  .maxim-mega-menu-wrapper { 
    font-family: "Raleway", Arial, sans-serif; 
    width: 100%; 
    background: #F8F6F0; 
    position: relative; 
    box-sizing: border-box;
  }
  .maxim-mega-menu-wrapper * { box-sizing: border-box; }

  .maxim-header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 12px 20px; 
    border-bottom: 1px solid rgba(144, 119, 85, 0.2); 
    background: #FFFFFF; 
  }

  .header-main-row {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .header-left { display: flex; align-items: center; gap: 15px; }

  .menu-toggle { 
    border: 2px solid #907755; 
    background: transparent; 
    width: 38px; 
    height: 38px; 
    display: flex; 
    flex-direction: column;
    align-items: center; 
    justify-content: center; 
    gap: 3px;
    border-radius: 8px; 
    cursor: pointer; 
    padding: 0;
  }

  .menu-toggle .icon-bar {
    width: 18px;
    height: 2px;
    background-color: #111111;
    transition: transform 0.2s, opacity 0.2s;
  }

  .menu-toggle.is-open {
    font-size: 1.25rem;
    font-weight: 300;
    color: #111111;
  }

  .tabs-header .tab-link, .mobile-top-tabs .tab-link { 
    text-decoration: none; 
    color: #2D3134; 
    font-weight: 500; 
    font-size: 0.875rem; 
  }

  .tabs-header .tab-link.active, .mobile-top-tabs .tab-link.active { 
    color: #907755; 
    border-bottom: 2px solid #907755; 
    padding-bottom: 2px; 
  }

  .tabs-header .divider, .mobile-top-tabs .divider {
    color: #907755;
    margin: 0 6px;
    opacity: 0.4;
  }

  .header-logo img {
    height: 75px;
    width: auto;
    object-fit: contain;
  }

  .header-actions { display: flex; gap: 10px; align-items: center; }

  /* Contact Us Button & Dropdown Styles */
  .contact-dropdown-wrapper {
    position: relative;
    display: inline-block;
  }

  .btn-contact { 
    background: #111111; 
    color: #FFFFFF; 
    border: none; 
    padding: 10px 18px; 
    border-radius: 20px; 
    cursor: pointer; 
    font-size: 0.8125rem; 
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: background-color 0.2s ease;
  }

  .btn-contact:hover {
    background: #2a2a2a;
  }

  .arrow-icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 0.6875rem;
  }

  .btn-contact.open .arrow-icon {
    transform: rotate(180deg);
  }

  .contact-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 210px;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.12);
    padding: 10px 0;
    z-index: 9999;
  }

  .contact-dropdown-menu.show {
    display: flex;
    flex-direction: column;
  }

  .contact-dropdown-item {
    padding: 10px 20px;
    color: #111111;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .contact-dropdown-item:hover {
    background-color: #F8F6F0;
    color: #907755;
  }

  .btn-cta { 
    background: #D4A359; 
    color: #111111; 
    text-decoration: none; 
    padding: 10px 18px; 
    border-radius: 20px; 
    font-size: 0.8125rem; 
    font-weight: 600; 
    white-space: nowrap;
    transition: background-color 0.2s ease;
    cursor: pointer;
  }

  .btn-cta:hover {
    background: #907755;
    color: #FFFFFF;
  }

  .mega-menu-container { 
    display: flex; 
    margin: 15px 20px; 
    transition: all 0.3s ease; 
    overflow: hidden; 
    opacity: 1; 
    max-height: 2000px;
  }

  .mega-menu-container.closed { 
    max-height: 0 !important; 
    margin-top: 0 !important; 
    margin-bottom: 0 !important; 
    opacity: 0 !important; 
    pointer-events: none; 
  }

  .sidebar-nav { 
    width: 250px; 
    min-width: 250px;
    list-style: none; 
    padding: 0; 
    margin: 0; 
  }

  .sidebar-nav .nav-item { 
    padding: 12px 16px; 
    border-radius: 20px; 
    cursor: pointer; 
    font-weight: 700; 
    color: #2D3134; 
    font-size: 0.875rem; 
    margin-bottom: 6px; 
    transition: background-color 0.2s ease, color 0.2s ease;
  }

  .sidebar-nav .nav-title {
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    width: 100%;
    color: inherit;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
  }

  .sidebar-nav .nav-item.active { 
    background-color: #907755; 
    color: #FFFFFF; 
  }

  /* :hover only on real hover devices, so touch taps can't leave a "sticky" highlight. */
  @media (hover: hover) and (pointer: fine) {
    .sidebar-nav .nav-item:hover { 
      background-color: #907755; 
      color: #FFFFFF; 
    }
  }

  /* Compact, content-fit dropdown width (was flex:1 / full remaining width).
     Fixed px width on purpose, NOT width:max-content: a wrapping flex/grid
     container sized with max-content is genuinely ambiguous per the CSS spec
     (browsers/engines resolve the circular "how wide, then how it wraps"
     calculation differently), which is why this rendered as one full-width
     stacked column instead of two side-by-side columns. Every panel here
     (Hair Restoration, About Us, Contact Us) is a fixed 2-column layout, so a
     hard-coded width removes the ambiguity and renders identically everywhere. */
  .content-panel { 
    flex: 0 0 auto; 
    box-sizing: border-box;
    width: 940px;
    max-width: calc(100vw - 80px);
    background-color: #907755; 
    border-radius: 16px; 
    padding: 35px 40px; 
    margin-left: 15px; 
    min-height: 380px; 
  }

  .tab-content { display: none; }
  .tab-content.active { display: block; }

  /* Fixed 2-column grid (deterministic width; see .content-panel note above). */
  .grid-2-col { display: grid; grid-template-columns: 400px 400px; gap: 20px 40px; width: 426px; }
  .grid-2-col ul { list-style: none; padding: 0; margin: 0; }
  .grid-2-col li { margin-bottom: 16px; }
  .grid-2-col a { color: #FFFFFF; text-decoration: none; font-size: 0.9375rem; font-weight: 700; text-transform: uppercase; white-space: normal; }
  .grid-2-col a:hover { color: #000; text-decoration: none; }

  .mobile-only { display: none !important; }
  .mobile-top-tabs { display: none; }
  .mobile-accordion-content { display: none; }

  /* Appointment Popup Modal Styles */
  .appointment-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    z-index: 999999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  .appointment-modal-overlay.show {
    display: flex;
    opacity: 1;
  }

  .appointment-modal-content {
    background: #FFFFFF;
    width: 100%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 16px;
    padding: 30px;
    position: relative;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(-20px);
    transition: transform 0.3s ease;
  }

  .appointment-modal-overlay.show .appointment-modal-content {
    transform: translateY(0);
  }

  .appointment-modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    background: transparent;
    border: none;
    font-size: 1.75rem;
    font-weight: 300;
    color: #111111;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
    z-index: 10;
  }

  .appointment-modal-close:hover {
    color: #907755;
  }

  .appointment-modal-body {
    width: 100%;
    margin-top: 10px;
  }

  /* MOBILE SPECIFIC OVERRIDES (≤ 768px) */
  @media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: flex !important; }

    .maxim-header {
      flex-direction: column;
      padding: 10px 15px 12px;
      border-bottom: 1px solid rgba(144, 119, 85, 0.2);
      background: #FFFFFF;
    }

    .mobile-top-tabs {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      margin-bottom: 10px;
    }

    .header-main-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .header-logo img {
      height: 34px;
    }

    .mega-menu-container {
      flex-direction: column;
      margin: 0;
      width: 100%;
    }

    .sidebar-nav {
      width: 100%;
      min-width: 100%;
    }

    .sidebar-nav .nav-item {
      border-bottom: 1px solid rgba(144, 119, 85, 0.15);
      border-radius: 0;
      padding: 0;
      margin-bottom: 0;
      background: #F8F6F0 !important;
      color: #111111 !important;
    }

    .sidebar-nav .nav-title {
      padding: 18px 20px;
      font-size: 1rem;
      font-weight: 700;
      color: #111111;
    }

    .sidebar-nav .nav-title.direct-link {
      text-decoration: none;
    }

    .sidebar-nav .arrow.mobile-only {
      color: #907755;
      font-size: 0.875rem;
      transition: transform 0.2s ease;
    }

    .sidebar-nav .nav-item.active .arrow.mobile-only {
      transform: rotate(180deg);
    }

    /* Accordion Dropdown Inside Mobile Item */
    .mobile-accordion-content {
      background-color: #907755;
      padding: 0 20px;
    }

    .sidebar-nav .nav-item.active .mobile-accordion-content {
      display: block;
      padding: 15px 20px 20px;
    }

    .mobile-accordion-content ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .mobile-accordion-content li {
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    }

    .mobile-accordion-content li:last-child {
      border-bottom: none;
    }

    .mobile-accordion-content a {
      color: #FFFFFF;
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 700;
      text-transform: uppercase;
      display: block;
      width: 100%;
      position: relative;
      z-index: 10;
    }

    .mobile-accordion-content a:hover,
    .mobile-accordion-content a:active {
      color: #000;
      text-decoration: none;
    }

    .appointment-modal-content {
      padding: 20px 15px;
    }
  }


/* HCD global chrome: suppress Hello Elementor / Theme Builder header when the custom HCD header is active. */
body:not(.wp-admin) #site-header,
body:not(.wp-admin) .site-header,
body:not(.wp-admin) .elementor-location-header {
  display: none !important;
}

body:not(.wp-admin) .hcd-global-header {
  display: block;
}

/* HCD typography system */
.hcd-global-header,.hcd-typography{font-family:"Raleway",Arial,sans-serif;}
.hcd-global-header h1,.hcd-global-header h2,.hcd-global-header h3,.hcd-global-header h4,.hcd-global-header h5,.hcd-global-header h6,.hcd-typography h6{font-family:"Crimson Text",Georgia,serif;}
.hcd-global-header h1,.hcd-typography h1{font-size:clamp(2rem, 1.5rem + 2.5vw, 3rem);}
.hcd-global-header h2,.hcd-typography h2{font-size:clamp(1.625rem, 1.25rem + 1.8vw, 2.25rem);}
.hcd-global-header h3,.hcd-typography h3{font-size:clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);}
.hcd-global-header h4,.hcd-typography h4{font-size:clamp(1.15rem, 1rem + 0.75vw, 1.35rem);}
.hcd-global-header h5,.hcd-typography h5{font-size:clamp(1rem, 0.95rem + 0.4vw, 1.1rem);}
.hcd-global-header h6{font-size:clamp(0.875rem, 0.85rem + 0.2vw, 1rem);}

/* ===== HCD header dropdown system (v8.1) =====
   ONE set of variables drives every dropdown panel (Hair Restoration, About Us, Contact Us):
   same padding, radius and shadow. Width is content-fit (max-content), so a panel never has empty
   space on its right: 2-column Hair Restoration = 664px, single-column panels shrink to their longest link.
   Want a fixed width instead? Set --hcd-submenu-width:664px (applies to all tabs).
   Panels with fewer links render as ONE clean column; 2 columns only for big groups (a list with 6+ links). */
.hcd-global-header,.maxim-mega-menu-wrapper{
  --hcd-submenu-width:max-content;
  --hcd-submenu-max-width:calc(100vw - 80px);
  --hcd-submenu-padding:35px 40px;
  --hcd-submenu-radius:16px;
  --hcd-submenu-shadow:none;
  --hcd-submenu-min-height:380px;
  --hcd-submenu-col-1:250px;
  --hcd-submenu-col-2:max-content;
  --hcd-submenu-col-gap:24px;
  --hcd-submenu-row-gap:20px;
}
html body .content-panel{box-sizing:border-box !important;flex:0 0 auto !important;width:var(--hcd-submenu-width,max-content) !important;max-width:var(--hcd-submenu-max-width,calc(100vw - 80px)) !important;padding:var(--hcd-submenu-padding,35px 40px) !important;border-radius:var(--hcd-submenu-radius,16px) !important;box-shadow:var(--hcd-submenu-shadow,none) !important;min-height:var(--hcd-submenu-min-height,380px) !important;}
html body .content-panel .grid-2-col{display:grid !important;grid-template-columns:1fr !important;gap:0 !important;width:auto !important;}
html body .content-panel .grid-2-col a{text-transform:uppercase !important;font-weight:700 !important;white-space:normal !important;}
html body .content-panel .grid-2-col:has(> ul > li:nth-child(6)){grid-template-columns:var(--hcd-submenu-col-1,250px) var(--hcd-submenu-col-2,max-content) !important;gap:var(--hcd-submenu-row-gap,20px) var(--hcd-submenu-col-gap,24px) !important;width:max-content !important;}
html body .content-panel #hair-restoration-panel .grid-2-col{grid-template-columns:var(--hcd-submenu-col-1,250px) var(--hcd-submenu-col-2,max-content) !important;gap:var(--hcd-submenu-row-gap,20px) var(--hcd-submenu-col-gap,24px) !important;width:max-content !important;}
@media (min-width:1000px){
  html body #hair-restoration-panel .grid-2-col a,
  html body #about-us-panel .grid-2-col a{white-space:nowrap !important;}
}
@media (max-width:999px){
  html body .content-panel{width:auto !important;}
  html body .content-panel .grid-2-col:has(> ul > li:nth-child(6)){grid-template-columns:1fr 1fr !important;width:100% !important;}
  html body .content-panel #hair-restoration-panel .grid-2-col{grid-template-columns:1fr 1fr !important;width:100% !important;}
}
/* Tab without a submenu (Home, GrowAir, Mens Health) hovered -> no stale submenu box. Class set by hcd-header.js. */
html body .content-panel.hcd-panel-hidden{display:none !important;}
/* Sidebar highlight: only ONE tab can look selected at a time (desktop). The old tab un-highlights
   instantly (no fade-out); only the tab being activated animates in. */
@media (min-width:769px){
  html body .sidebar-nav .nav-item{transition:none !important;}
  html body .sidebar-nav .nav-item.active{transition:background-color .2s ease,color .2s ease !important;}
}
@media (min-width:769px) and (hover:hover) and (pointer:fine){
  html body .sidebar-nav .nav-item:hover{background-color:#907755 !important;color:#FFFFFF !important;transition:background-color .2s ease,color .2s ease !important;}
  html body .sidebar-nav:has(.nav-item:hover) .nav-item.active:not(:hover){background-color:transparent !important;color:#2D3134 !important;}
}


/* ---------------------------------------------------------------------
   2. FOOTER  (was hcd-footer.css)
   --------------------------------------------------------------------- */
/* Playfair Display + Poppins are now requested together with the other theme fonts in functions.php (hcd_hello_child_google_fonts_url()). */
:root{
    --primary:        #c69e63;   /* your brand accent */
    --primary-soft:   #dab989;
    --black:          #0a0908;
    --black-soft:     #131110;
    --gray:           #2b2724;
    --gray-light:     #3a352f;
    --text-muted:     #cfc8bc;
    --text-dim:       #9a9186;
    --font-heading:   "Playfair Display", Georgia, serif;
    --font-body:      "Poppins", -apple-system, BlinkMacSystemFont, sans-serif;
  }

  *{ box-sizing: border-box; }

  .hcd-footer{ width:100%; position: relative; }
  .hcd-footer a{ text-decoration:none; }
  .hcd-footer svg{ display:block; }

  /* thin brand hairline that runs across the very top of the footer */
  .hcd-footer::before{
    content:"";
    display:block;
    height:1px;
    background: linear-gradient(90deg, transparent 0%, var(--primary) 50%, transparent 100%);
    opacity:.5;
  }

  /* ---------------------------------------------------------------
     ROW 1 — contact bar
     --------------------------------------------------------------- */
  .hcd-footer__bar-top{
    background: var(--black);
    padding: 26px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 64px;
    flex-wrap: wrap;
  }
  .hcd-footer__contact-item{
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--text-muted);
    font-size: 14.5px;
    font-weight: 500;
    white-space: nowrap;
    transition: color .25s ease;
  }
  .hcd-footer__contact-item:hover{ color: #fff; }
  .hcd-footer__contact-icon{
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(198,158,99,.12);
    border: 1px solid rgba(198,158,99,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color .25s ease, border-color .25s ease;
  }
  .hcd-footer__contact-item:hover .hcd-footer__contact-icon{
    background: var(--primary);
    border-color: var(--primary);
  }
  .hcd-footer__contact-item:hover .hcd-footer__contact-icon svg{ color: var(--black); }
  .hcd-footer__contact-icon svg{ width: 14px; height: 14px; color: var(--primary); transition: color .25s ease; }

  /* ---------------------------------------------------------------
     ROW 2 — social icons
     --------------------------------------------------------------- */
  .hcd-footer__bar-social{
    background: var(--black);
    padding: 8px 20px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .hcd-footer__social-circle{
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color .25s ease, border-color .25s ease, transform .25s ease, color .25s ease;
  }
  .hcd-footer__social-circle svg{ width: 18px; height: 18px; }
  .hcd-footer__social-circle:hover{
    background: var(--primary);
    border-color: var(--primary);
    color: var(--black);
    transform: translateY(-3px);
  }

  /* ---------------------------------------------------------------
     ROW 3 — brand band
     --------------------------------------------------------------- */
  .hcd-footer__bar-brand{
    background: linear-gradient(180deg, var(--gray) 0%, var(--gray-light) 100%);
    padding: 36px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    position: relative;
  }
  .hcd-footer__bar-brand::before,
  .hcd-footer__bar-brand::after{
    content:"";
    position:absolute;
    top:0; left:0; right:0;
    height:1px;
  }
  .hcd-footer__bar-brand::before{ top:0; background: rgba(198,158,99,.25); }
  .hcd-footer__bar-brand::after{ top:auto; bottom:0; background: rgba(198,158,99,.25); }

  .hcd-footer__logo-img{ max-height: 72px; width: auto; display: block; }

  /* ---------------------------------------------------------------
     ROW 4 — services link bar
     --------------------------------------------------------------- */
  .hcd-footer__services{
    background: var(--black);
    border-top: 1px solid rgba(198,158,99,.18);
    border-bottom: 1px solid rgba(198,158,99,.18);
    padding: 18px 28px;
  }
  .hcd-footer__services-inner{
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 22px;
  }
  .hcd-footer__services-inner a{
    color: var(--text-muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-decoration: none;
    transition: color .25s ease;
  }
  .hcd-footer__services-inner a:hover{ color: var(--primary); }

  /* ---------------------------------------------------------------
     ROW 5 — copyright
     --------------------------------------------------------------- */
  .hcd-footer__bar-bottom{
    background: var(--black-soft);
    padding: 22px 20px;
    text-align: center;
  }
  .hcd-footer__copyright{
    color: var(--text-dim);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: .02em;
    margin: 0;
  }
  .hcd-footer__copyright a{ color: var(--primary); transition: color .25s ease; }
  .hcd-footer__copyright a:hover{ color: var(--primary-soft); }

  /* ---------------------------------------------------------------
     RESPONSIVE
     --------------------------------------------------------------- */
  @media (max-width: 900px){
    .hcd-footer__bar-top{ gap: 28px; padding: 24px 24px; }
  }
  @media (max-width: 600px){
    .hcd-footer__services{ padding: 16px 20px; display: block; text-align: left; }
    .hcd-footer__services-inner{ gap: 8px 16px; }
    .hcd-footer__services-inner a{ font-size: 12.5px; }
    .hcd-footer__bar-top{ flex-direction: column; align-items: flex-start; gap: 16px; padding: 26px 28px; }
    .hcd-footer__bar-social{ padding-bottom: 34px; }
    .hcd-footer__bar-brand{ flex-direction: column; gap: 14px; padding: 32px 20px; }
    .hcd-footer__logo-img{ max-height: 54px; }
    .hcd-footer__social-circle{ width: 40px; height: 40px; }
  }

/* Parent theme / Theme Builder footer stays hidden; the HCD footer replaces it. */
body:not(.wp-admin) #site-footer,
body:not(.wp-admin) .site-footer,
body:not(.wp-admin) .elementor-location-footer{display:none!important;}
.hcd-footer{display:block!important;}


/* Remove only the service links; preserve the existing footer row/layout. */
.hcd-footer__services-inner a{ display:none !important; }

/* ---------------------------------------------------------------------
   3. APPOINTMENT FORM (native replacement for the legacy builder form)
   --------------------------------------------------------------------- */
.hcd-appt-form{font-family:"Raleway",Arial,sans-serif;color:#2D3134;}
.hcd-appt-form *{box-sizing:border-box;}
.hcd-appt-form__title{font-family:"Crimson Text",Georgia,serif;font-size:clamp(1.625rem,1.25rem + 1.8vw,2.25rem);margin:0 0 18px;color:#2D3134;}
.hcd-appt-form__hp{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}
.hcd-appt-form__row{margin:0 0 14px;}
.hcd-appt-form__row label{display:block;font-size:.8125rem;font-weight:600;margin:0 0 6px;}
.hcd-appt-form__row input,.hcd-appt-form__row textarea{display:block;width:100%;padding:12px 14px;font:inherit;font-size:.9375rem;color:#2D3134;background:#fff;border:1px solid rgba(144,119,85,.45);border-radius:6px;outline:0;}
.hcd-appt-form__row input:focus,.hcd-appt-form__row textarea:focus{border-color:#907755;box-shadow:0 0 0 3px rgba(144,119,85,.18);}
.hcd-appt-form__submit{display:inline-block;width:100%;padding:13px 20px;font:inherit;font-size:.875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#fff;background:#907755;border:0;border-radius:6px;cursor:pointer;transition:background-color .2s ease;}
.hcd-appt-form__submit:hover,.hcd-appt-form__submit:focus{background:#D4A359;color:#fff;}
.hcd-appt-form__submit[disabled]{opacity:.6;cursor:wait;}
.hcd-appt-form__msg{margin-top:12px;font-size:.875rem;min-height:1.2em;}
.hcd-appt-form__msg.is-ok{color:#1d7a46;}
.hcd-appt-form__msg.is-error{color:#b3261e;}

/* ---------------------------------------------------------------------
   4. HELLO ELEMENTOR COMPATIBILITY BASE
   The original CSS was written against the previous parent theme's base styles. These scoped rules
   supply the few basics the HCD components relied on (parent reset.css is not loaded).
   --------------------------------------------------------------------- */
body:not(.wp-admin){margin:0;}
.hcd-global-header,.hcd-global-header *,
.hcd-footer,.hcd-footer *,
.hcd-single-post,.hcd-single-post *,
.hcd-blog-archive,.hcd-blog-archive *,
.appointment-modal-overlay,.appointment-modal-overlay *{box-sizing:border-box;}

/* ---------------------------------------------------------------------
   5. LINKS + STRONG — #907755, no underline, site-wide
   Every <a> and <strong> on every page, post, archive and category is #907755 with
   text-decoration:none (normal, visited, hover, focus, active). !important beats Elementor
   kit/widget colours and the browser defaults.

   Left alone only where #907755 text would be invisible on a #907755 / gold background:
   buttons (class contains "btn"/"button"), pagination, social icon circles, header tabs and
   sidebar nav, the hero category chip, tag chips, and the header dropdown panels
   (white text on the #907755 panel).
   --------------------------------------------------------------------- */
:root{--hcd-primary:#907755;--hcd-black:#000;}

body a:where(:not([class*="btn"]):not([class*="button"]):not([class*="pagination"]):not([class*="social"]):not(.nav-item):not(.nav-title):not(.tab-link):not(.hcd-post-hero__category):not(.hcd-post-tags__item):not(.content-panel a):not(.mobile-accordion-content a)),
body a:where(:not([class*="btn"]):not([class*="button"]):not([class*="pagination"]):not([class*="social"]):not(.nav-item):not(.nav-title):not(.tab-link):not(.hcd-post-hero__category):not(.hcd-post-tags__item):not(.content-panel a):not(.mobile-accordion-content a)):visited,
body a:where(:not([class*="btn"]):not([class*="button"]):not([class*="pagination"]):not([class*="social"]):not(.nav-item):not(.nav-title):not(.tab-link):not(.hcd-post-hero__category):not(.hcd-post-tags__item):not(.content-panel a):not(.mobile-accordion-content a)):is(:hover,:focus,:active){
  color:#907755 !important;
  text-decoration:none !important;
}

body strong:where(:not(.content-panel strong):not(.mobile-accordion-content strong):not([class*="btn"] strong):not([class*="button"] strong)),
body b:where(:not(.content-panel b):not(.mobile-accordion-content b):not([class*="btn"] b):not([class*="button"] b)){
  color:#907755 !important;
}

/* Header menu — active + hover states use #907755 */
html body .tabs-header .tab-link:hover,
html body .mobile-top-tabs .tab-link:hover,
html body .tabs-header .tab-link.active,
html body .mobile-top-tabs .tab-link.active{color:#907755 !important;text-decoration:none !important;}
html body .tabs-header .tab-link.active,
html body .mobile-top-tabs .tab-link.active{border-bottom-color:#907755 !important;}
html body .contact-dropdown-item:hover,
html body .contact-dropdown-item:focus{color:#907755 !important;}

/* Categories list: each title and its count on ONE line, semibold */
html body .hcd-post-sidebar .hcd-sidebar-tags,
html body .widget_categories ul{list-style:none;margin:0;padding:0;}
html body .hcd-post-sidebar .hcd-sidebar-tags li,
html body .widget_categories ul li{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-weight:600;}
html body .hcd-post-sidebar .hcd-sidebar-tags li a,
html body .widget_categories ul li a{display:inline;font-weight:600;flex:1 1 auto;min-width:0;}
html body .hcd-post-sidebar .hcd-sidebar-tags br,
html body .widget_categories ul br{display:none;}

/* ---------------------------------------------------------------------
   6. HEADER MEGA MENU — vertical rhythm (desktop)
   The menu was designed against a parent theme that gave every list item a
   taller inherited line-height. Hello Elementor has none, so rows collapsed.
   Explicit line-heights restore the original spacing (mobile accordion untouched).
   --------------------------------------------------------------------- */
@media (min-width:769px){
  html body .maxim-mega-menu-wrapper .sidebar-nav .nav-item .nav-title{line-height:27px;}
  html body .maxim-mega-menu-wrapper .content-panel .grid-2-col li{line-height:34px;}
}

/* ---------------------------------------------------------------------
   8. DEVICE HARDENING (header, modal, footer) — phones, tablets, notches, small laptops
   Only adds safety rules; no colours, spacing or layout of the design change.
   --------------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}

/* Appointment modal: iOS/Android toolbars make 100vh taller than the visible screen -> use dvh,
   keep clear of notches, and never let page scrolling leak through. */
.appointment-modal-overlay{
  width:100%;
  height:100vh;
  height:100dvh;
  overscroll-behavior:contain;
  padding-top:max(20px,env(safe-area-inset-top));
  padding-right:max(20px,env(safe-area-inset-right));
  padding-bottom:max(20px,env(safe-area-inset-bottom));
  padding-left:max(20px,env(safe-area-inset-left));
}
.appointment-modal-content{
  max-height:90vh;
  max-height:calc(100dvh - 40px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.appointment-modal-close{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;top:6px;right:10px;
}
@media (max-width:768px){
  .appointment-modal-overlay{padding-top:max(12px,env(safe-area-inset-top));padding-right:max(12px,env(safe-area-inset-right));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(12px,env(safe-area-inset-left));}
  .appointment-modal-content{max-height:calc(100dvh - 24px);}
}

/* Touch: no 300ms tap delay / grey tap flash on the header controls */
.menu-toggle,.btn-contact,.btn-cta,.appointment-modal-close,.sidebar-nav .nav-item,.contact-dropdown-item{touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.menu-toggle,.appointment-modal-close{min-width:38px;min-height:38px;}

/* Small laptops / large tablets (769-900px): keep logo + actions on one line */
@media (min-width:769px) and (max-width:900px){
  .maxim-header{padding-left:14px;padding-right:14px;}
  .header-logo img{height:58px;}
  .header-actions{gap:8px;flex-shrink:0;}
  .btn-cta{padding-left:14px;padding-right:14px;}
}
.header-logo{min-width:0;}
.header-logo img{max-width:100%;}

/* Footer on very small phones (<=360px): long address/email may wrap instead of overflowing */
@media (max-width:600px){
  .hcd-footer__contact-item{white-space:normal;min-width:0;max-width:100%;}
  .hcd-footer__contact-item span[data-field]{overflow-wrap:anywhere;}
}
@media (max-width:360px){
  .hcd-footer__bar-top{padding-left:18px;padding-right:18px;}
}