/* ==========================================================================
   Liron Rabin – Responsive layer
   Loaded LAST (after styles.css + style.css) so it wins the cascade.
   Breakpoints are aligned with styles.css: 1250 / 1023 / 850 / 600 / 480
   ========================================================================== */

@-ms-viewport { width: device-width; }

/* --------------------------------------------------------------------------
   0. GLOBAL SAFETY – prevents horizontal scroll & clipped content
   -------------------------------------------------------------------------- */
/* `clip` (not `hidden`) – it kills horizontal scroll without creating a
   scroll container, so `position: sticky` on the article sidebar still works. */
html, body {
    max-width: 100%;
    overflow-x: clip;
}
.site-shell { max-width: 100%; }
img, iframe, video, embed, object, table {
    max-width: 100%;
}
h1, h2, h3, h4, p, li, a, blockquote, cite, span {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* --------------------------------------------------------------------------
   1. ICON IMAGES
   These <span>s were designed for text glyphs, but ACF now injects real
   <img> files into them. Without a size cap they render at full natural
   size and blow the layout apart on mobile.
   -------------------------------------------------------------------------- */
.line-icon,
.value-icon,
.benefit-icon,
.clock-icon,
.person-icon,
.suitable-card span,
.expertise-grid article > span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
.line-icon img        { width: auto; height: 62px; max-width: 88px;  object-fit: contain; }
.value-icon img       { width: auto; height: 56px; max-width: 80px;  object-fit: contain; }
.profile-icon img     { height: 52px; }
.benefit-icon img     { width: auto; height: 74px; max-width: 100px; object-fit: contain; }
.expertise-grid article > span img { width: auto; height: 50px; max-width: 70px; object-fit: contain; }
.contact-item > span img           { width: auto; height: 28px; max-width: 34px; object-fit: contain; }
.suitable-card span img            { width: auto; height: 54px; max-width: 80px; object-fit: contain; }
.service-meta img,
.clock-icon img,
.person-icon img      { width: auto; height: 34px; max-width: 46px; object-fit: contain; }
.step-number img      { width: auto; height: 26px; }
.social > span img    { width: auto; height: 30px; }
.spark img, .mini-spark img { width: auto; height: 26px; display: inline-block; }

/* --------------------------------------------------------------------------
   2. MOBILE MENU (hamburger + slide-in drawer)
   -------------------------------------------------------------------------- */
.menuicon {
    display: none;
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 0;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
}
.menuicon img { width: 28px; height: auto; }

.floatingnav {
    position: fixed;
    top: 0;
    right: -340px;
    width: min(300px, 82vw);
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: #fff;
    box-shadow: -12px 0 34px rgba(46, 34, 30, .18);
    z-index: 999999999;
}
.menuoverlay {
    position: fixed;
    inset: 0;
    background: rgba(25, 18, 16, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    z-index: 999999998;
}
.menuoverlay.is-visible { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }

.mobilemenuheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 14px;
    border-bottom: 3px solid #cda166;
}
.mobilelogo, .closemenu { float: none; }
.mobilelogo img { max-width: 130px; height: auto; }
.closemenu {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}
.closemenu img { width: 22px; height: auto; }

.menubox { padding: 14px 6px 40px; text-align: right; }
.menubox ul { list-style: none; padding: 0; margin: 0; }
.menubox ul li { padding: 0; }
.menubox ul li a {
    display: block;
    padding: 13px 16px;
    font-size: 18px;
    border-bottom: 1px solid #f2e8e4;
}
.menubox ul ul li a { padding-right: 32px; font-size: 16px; color: #6d6864; }

/* --------------------------------------------------------------------------
   3. HEADER – collapse to hamburger from 1023px down
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) and (max-width: 1280px) {
    .offer-item{
        width: 48%;
    }
}

@media (max-width: 1023px) {
    .header {
        display: flex;
        grid-template-columns: none;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        height: auto;
        min-height: 84px;
        padding: 12px 20px 12px 66px;
    }
    .nav { display: none; }
    .menuicon { display: flex; }

    .header .brand {
        width: auto;
        height: auto;
        transform: none;
        padding: 2px 0;
    }
    .brand-arc   { font-size: 10px; letter-spacing: 3px; }
    .brand-eye   { font: 30px/18px Georgia, serif; margin-top: 2px; }
    .brand-lashes{ font-size: 14px; line-height: 12px; }
    .header .brand strong { font-size: 21px; }

    .header-cta {
        min-width: 0;
        height: 50px;
        padding-inline: 20px;
        font-size: 17px;
    }
}

/* --------------------------------------------------------------------------
   4. FIXED HEIGHTS -> AUTO
   Several sections use a hard `height` (not min-height) plus
   `overflow: hidden`. On narrow screens the content grows taller than the
   box and gets literally cut off. This is the main "disappearing content"
   bug on mobile.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .hero,
    .about,
    .services,
    .story-section,
    .beauty-approach,
    .closing-section,
    .about-services,
    .values-section,
    .expertise-section,
    .about-final-cta,
    .service-final-cta,
    .benefits-section,
    .related-section,
    .info-section,
    .ritual-intro,
    .service-hero,
    .about-hero,
    .process-section,
    .final-cta,
    .step-copy,
    .footer,
    .service-page .footer,
    .about-page .footer {
        height: auto;
        min-height: 0;
    }
    .values-grid article  { height: auto; min-height: 200px; }
    .benefits-grid article{ height: auto; min-height: 190px; }
    .suitable-card        { height: auto; min-height: 190px; padding: 22px 18px; }
    .service-card         { height: auto; }
    .related-grid a       { height: auto; }

    /* keep sensible padding once the fixed height is gone */
    .about-final-cta   { padding: 32px 22px; }
    .service-final-cta { padding: 30px 20px; }
    .final-cta         { padding: 28px 20px; }
    .expertise-section { padding: 34px 20px 40px; }
    .values-section    { padding: 40px 20px 48px; }
    .about-services    { padding-bottom: 40px; }
    .service-page .footer,
    .about-page .footer { padding: 34px 22px; }
}

/* --------------------------------------------------------------------------
   5. IMAGE PANELS – give them a real height on mobile
   (their <img> uses height:100%, so the wrapper must keep a height)
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .about-hero-visual  { height: 560px; min-height: 0; }
    .about-hero-visual img {
        width: 100%;
        clip-path: none;          /* the diagonal cut breaks on narrow screens */
        object-position: 50% 22%;
    }
    .hero-visual        { height: 470px; }
    .service-hero-image { height: 500px; }
    .story-image,
    .approach-image,
    .closing-image      { height: 380px; min-height: 0; border-radius: 0; border: 0; }
    .ritual-image       { height: 380px; margin: 0; }
    .quote-banner       { height: 460px; }

    .about-visual { height: auto; padding: 0 0 10px; display: block; text-align: center; }
    .about-picture { padding: 0 18px; }
    .about-picture img { width: 100%; max-width: 520px; height: auto; margin: 0 auto; }
    .about-shape { width: min(92%, 500px); height: auto; aspect-ratio: 1 / 1; margin: 0 auto; }
}

/* --------------------------------------------------------------------------
   6. TYPOGRAPHY & OVERFLOW FIXES
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .about-copy h2 { white-space: normal; }   /* nowrap forced a horizontal scrollbar */
    .about-copy    { direction: rtl; text-align: center; }
    .service-kicker{ direction: rtl; }
    .story-copy blockquote { padding: 26px 22px; font-size: 22px; }
    .reviews blockquote    { padding: 34px 26px 22px; }
    .article-content blockquote { padding: 22px 20px; font-size: 21px; }
}

/* --------------------------------------------------------------------------
   7. BUTTONS – several had min-width larger than a phone screen
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .button,
    .spa-feature-copy .button,
    .service-actions .button,
    .about-hero-actions .button,
    .about-final-cta .button,
    .service-final-cta .button,
    .about-services .all-services,
    .post-cta .button,
    .final-cta .button {
        min-width: 0;
        max-width: 100%;
    }
}
@media (max-width: 600px) {
    .button { height: 56px; padding-inline: 20px; font-size: 17px; }
    .hero-actions,
    .about-hero-actions,
    .service-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .hero-actions .button,
    .about-hero-actions .button,
    .service-actions .button,
    .final-cta .button,
    .service-final-cta .button,
    .about-final-cta .button,
    .post-cta .button,
    .spa-feature-copy .button,
    .about-services .all-services {
        width: 100%;
        max-width: 360px;
    }
    .service-meta { flex-direction: column; gap: 10px; }
    .service-meta .person-icon { margin-right: 0; }
}

/* --------------------------------------------------------------------------
   8. CONTACT PAGE / FORMS
   -------------------------------------------------------------------------- */
.contact-map iframe {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    border: 0;
}
.contact-map:has(iframe)::after { display: none; }

@media (max-width: 768px) {
    .contact-form-list-left,
    .contact-form-list-right { float: none; width: 100%; }
    .contact-form-list-left  { margin-bottom: 15px; }
    .contact-form-list { padding-bottom: 15px; }
    .offer-item{
        width: 48%;
    }
}
@media (max-width: 600px) {
    /* 16px minimum stops iOS Safari from zooming in on focus */
    .contact-form input,
    .contact-form select,
    .contact-form textarea,
    .contact-form-list input,
    .contact-form-list select,
    .contact-form-list textarea { font-size: 16px; }
    .contact-form-wrap, .contact-details { padding: 26px 18px; }
    .contact-item { padding: 16px; gap: 14px; }
    .contact-item > span { width: 46px; height: 46px; flex: 0 0 auto; }
}

/* --------------------------------------------------------------------------
   9. BLOG / ARTICLE CONTENT
   -------------------------------------------------------------------------- */
@media (max-width: 850px) {
    .article-content, .article-layout { max-width: 100%; }
    .article-content table { display: block; overflow-x: auto; width: 100%; }
    .article-content iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; }
    .article-content pre { overflow-x: auto; }
    .article-content ul, .article-content ol { padding-right: 20px; }
    .offer-item{
        width: 48%;
    }
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .footer .brand,
    .about-page .footer .brand,
    .service-page .footer .brand {
        width: 100%;
        max-width: 210px;
        height: auto;
        transform: none;
    }
    .footer .brand img { width: 100%; height: auto; object-fit: contain; }
    .footer { align-items: start; }
    .social { flex-wrap: wrap; }
    .offer-item{
        width: 48%;
    }
}
@media (max-width: 480px) {
    .footer { grid-template-columns: 1fr; gap: 26px; text-align: right; }
    .footer .brand, .about-page .footer .brand { margin: 0 auto 4px 0; }
    .social { justify-content: flex-start; }
    .offer-item{
        width: 100%;
        margin: 20px 0;
    }
}

/* --------------------------------------------------------------------------
   11. TABLET (769–1023) – grids that are still too wide
   -------------------------------------------------------------------------- */
@media (min-width: 851px) and (max-width: 1023px) {
    .section { padding-inline: 30px; }
    .service-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
    .results-grid,
    .reviews-grid,
    .posts-grid,
    .related-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
    .benefits-grid,
    .values-grid    { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
    .process-grid   { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 60px 18px; }
    .process-line   { display: none; }
    /* minmax(0,1fr) – a plain 1fr never shrinks below min-content, which is
       what pushed these cards past the viewport */
    .why-grid,
    .expertise-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .why-grid article,
    .expertise-grid article { padding: 20px 18px; gap: 16px; }
    .line-icon { min-width: 0; }
    .contact-main   { grid-template-columns: 1fr; gap: 30px; padding: 45px 30px 60px; }
    .article-layout { grid-template-columns: 1fr; gap: 35px; padding: 45px 30px 60px; }
    .article-sidebar{ position: static; }
    .featured-post, .article-hero { grid-template-columns: 1fr; }
    .story-section, .beauty-approach, .closing-section { grid-template-columns: 1fr; padding: 0; gap: 0; }
    .story-copy, .approach-copy, .closing-copy { padding: 42px 30px 48px; text-align: center; }
    .hero { grid-template-columns: 1fr; }
    .hero-copy { grid-row: 2; padding: 46px 30px 52px; text-align: center; }
    .hero-visual { grid-row: 1; }
    .about { grid-template-columns: 1fr; }
    .about-visual { grid-row: 1; }
    .about-copy { grid-row: 2; padding: 42px 30px 50px; }
    .about-hero, .service-hero, .ritual-intro, .info-section { grid-template-columns: 1fr; }
    .about-hero-copy, .service-hero-copy { padding: 46px 30px 55px; text-align: center; }
    .about-hero-visual, .service-hero-image { grid-row: 1; }
    .ritual-copy { padding: 42px 30px; text-align: center; }
    .about-final-cta, .post-cta { flex-direction: column; text-align: center; gap: 18px; }
    .offer-item{
        width: 48%;
    }
}

/* --------------------------------------------------------------------------
   12. PHONES (<= 600)
   -------------------------------------------------------------------------- */
@media (max-width: 600px) {
    .section { padding-inline: 18px; }
    h2 { font-size: 32px; margin-bottom: 24px; }
    .hero h1 { font-size: 38px; }
    .lead { font-size: 22px; }
    .eyebrow { font-size: 20px; }
    .hero-points { font-size: 15px; }
    .inner-hero { padding: 42px 18px; }
    .inner-hero h1 { font-size: 36px; }
    .inner-hero p  { font-size: 19px; }
    .about-copy h2 { font-size: 34px; }
    .about-copy p  { font-size: 19px; }
    .spa-feature-copy h2 { font-size: 30px; }
    .spa-feature-copy p  { font-size: 18px; }
    .service-hero h1 { font-size: 34px; }
    .service-lead    { font-size: 20px; }
    .about-hero h1   { font-size: 36px; }
    .about-hero-lead { font-size: 23px; }
    .about-hero-text { font-size: 18px; }
    .story-copy h2, .approach-copy h2, .closing-copy h2 { font-size: 32px; }
    .story-copy > p, .approach-copy > p, .closing-copy > p { font-size: 19px; }
    .quote-banner blockquote { font-size: 23px; }
    .featured-copy h2 { font-size: 30px; }
    .article-hero-copy h1 { font-size: 33px; }
    .post-card h3 { font-size: 24px; }
    .line-icon { min-width: 0; }
    .why-grid article,
    .expertise-grid article { padding: 20px 12px; gap: 14px; }
    .contact-item { text-align: right; }
    .why h3, .values-grid h3, .expertise-grid h3, .benefits-grid h3 { font-size: 21px; }
    .why p, .values-grid p, .expertise-grid p { font-size: 17px; }
    .service-card span { font-size: 18px; }
    .result-card figcaption { font-size: 18px; height: auto; padding: 12px 8px; }
    .final-cta h2, .service-final-cta h2, .about-final-cta h2 { font-size: 26px; }
    .approach-tags { flex-wrap: wrap; justify-content: center; gap: 8px; }
    .approach-tags span { width: auto; padding: 0 16px; font-size: 17px; }
    .blog-categories a { font-size: 14px; padding: 8px 14px; }
    .step-copy { padding: 0 14px 18px; }
    .suitable-box { padding: 20px 18px; }
    .suitable-box ul { font-size: 19px; line-height: 1.9; }
    .offer-item{
        width: 100%;
        margin: 20px 0;
    }
    
}

/* --------------------------------------------------------------------------
   13. SMALL PHONES (<= 380)
   -------------------------------------------------------------------------- */
@media (max-width: 380px) {
    .section { padding-inline: 14px; }
    .header { padding-left: 58px; padding-right: 14px; }
    .header .brand strong { font-size: 18px; }
    .brand-arc { font-size: 9px; letter-spacing: 2px; }
    h2 { font-size: 28px; }
    .hero h1 { font-size: 33px; }
    .about-hero h1, .service-hero h1 { font-size: 30px; }
    .lead { font-size: 20px; }
    .button { height: 52px; font-size: 16px; }
    .hero-visual { height: 400px; }
    .about-hero-visual { height: 460px; }
    .service-hero-image { height: 420px; }
    .story-image, .approach-image, .closing-image, .ritual-image { height: 300px; }
    .quote-banner { height: 420px; }
    .offer-item{
        width: 100%;
        margin: 20px 0;
    }
}