/* ============================================================
   Mobile design system for amiralon.net - single source of truth.
   Loaded after each page stylesheet on every page; tune mobile here.
   Selector chains are deliberately strong (:is triplication + html body)
   to outrank both per-page generated CSS and legacy inline styles.

   Scale: h1 24/1.45 - headings 18/1.45 green - body 15/24 - buttons 13
   Rhythm: content sections 32px block padding
   ============================================================ */

/* hero headline shadow (all viewports) */
html body .amx-element-5264bc5 h1.amx-heading-title,html body .amx-element-979bc44 h1.amx-heading-title,html body .amx-element-c958f81 h1.amx-heading-title{text-shadow:0 2px 14px rgba(0,0,0,.45)}
/* uniform header logo on desktop */
html body img[src*="high-resolution-logo"]{width:150px!important;max-width:none!important;height:38px!important;object-fit:contain}

@media (max-width:767px){

/* ---------- header ---------- */
html body img[src*="high-resolution-logo"]{height:26px!important;width:100px!important;max-width:none!important;object-fit:contain}

/* header: single row, columns shrinkable */
html body [data-amx-type="header"] .amx-container,
html body .amx-element-593e792 > .amx-container{flex-wrap:nowrap!important}
html body [data-amx-type="header"] .amx-column,
html body .amx-element-593e792 .amx-column{min-width:0}

/* uniform logo: guarantee its column can host 100px, siblings shrink */
html body .amx-column:has(img[src*="high-resolution-logo"]){min-width:110px!important}

html body .amx-menu-toggle{padding:10px!important;margin:0!important}

/* ---------- opened mobile menu ---------- */
html body nav.amx-nav-menu--dropdown .amx-item{font-size:14px!important;padding:9px 16px!important;letter-spacing:.4px!important}
html body nav.amx-nav-menu--dropdown .amx-sub-item{font-size:13px!important;padding:8px 26px!important}
html body nav.amx-nav-menu--dropdown{max-height:75vh;overflow-y:auto}

/* ---------- typography: one scale for every page ---------- */
html body h1.amx-heading-title{font-size:24px!important;line-height:1.45!important}
html body :is(.amx-heading-title.amx-heading-title.amx-heading-title):not(h1),
html body #faq h2,
html body #practical h2,
html body .legal-wrap h2{
  font-size:18px!important;line-height:1.45!important;
}
html body :is(.amx-widget-text-editor.amx-widget-text-editor) p,
html body :is(.amx-widget-text-editor.amx-widget-text-editor) li,
html body .legal-wrap p,
html body .legal-wrap li,
html body #faq .faq-a,
html body #practical li{
  font-size:15px!important;line-height:24px!important;
}
html body #faq summary{font-size:15px!important}
/* manual desktop line-breaks: let text flow on mobile (footer keeps its brs) */
html body div[data-amx-type="x-page"] .amx-widget-text-editor br{display:none}
html body footer div[style*="0.75em"]{font-size:12px!important}
html body footer div[style*="#888"],html body footer div[style*="#888"] a{color:#666!important}

/* ---------- vertical rhythm: uniform section padding ---------- */
html body section.amx-top-section:is(.amx-section.amx-section):not(
  .amx-element-5264bc5):not(.amx-element-edfc049):not(.amx-element-64b2486):not(.amx-element-c7da845):not(.amx-element-a0fdf2e):not(
  .amx-element-979bc44):not(.amx-element-f216a63):not(.amx-element-7d3c889):not(.amx-element-6f25ca6):not(.amx-element-518efea):not(
  .amx-element-c958f81):not(.amx-element-a9e55a1):not(.amx-element-07755d5):not(.amx-element-d36a052):not(.amx-element-9d89291):not(
  .amx-element-15e7145):not(.amx-element-52460d9):not(.amx-element-ac1ff13):not(.amx-element-26c9232):not(.amx-element-26df93a):not(
  .amx-element-593e792):not(.amx-element-735a748){padding-top:32px!important;padding-bottom:32px!important}
html body #faq,
html body html[lang="en-GB"] #practical,html[lang="fr-BE"] #practical,html[lang="he-IL"] #practical{padding:32px 10px!important}#practical{padding:32px 20px!important}
html body .amx-element-15e7145,html body .amx-element-52460d9,html body .amx-element-ac1ff13,
html body .amx-element-26c9232,html body .amx-element-26df93a{padding-top:12px!important;padding-bottom:12px!important}

/* ---------- buttons: one style ---------- */
html body :is(.amx-button-text.amx-button-text.amx-button-text){font-size:13px!important;white-space:nowrap;letter-spacing:.5px!important}
html body :is(a.amx-button.amx-button){font-size:13px!important;padding:8px 14px!important;border-radius:20px!important}

/* ---------- forms: compact, 16px font prevents iOS focus-zoom ---------- */
html body .amx-field-group{margin-bottom:10px!important}
html body input.amx-field{padding-top:6px!important;padding-bottom:6px!important}
html body textarea.amx-field{height:64px!important;min-height:64px!important}
/* computed 16px (iOS no-zoom threshold), visually 15px via scale */
html body :is(input.amx-field.amx-field.amx-field.amx-field.amx-field.amx-field),html body :is(textarea.amx-field.amx-field.amx-field.amx-field.amx-field.amx-field),html body :is(select.amx-field.amx-field.amx-field.amx-field.amx-field.amx-field){
  font-size:16px!important;transform:scale(.9375);transform-origin:left center;width:106.667%!important;min-width:106.667%!important;max-width:106.667%!important}
html body [dir="rtl"] input.amx-field,html body [dir="rtl"] textarea.amx-field{transform-origin:right center}
html body .amx-field-group{overflow-x:clip}

/* ---------- tap targets (social icons excluded) ---------- */
html body a[href^="mailto:"]:not(.amx-social-icon):not([class*="social"]),
html body a[href^="tel:"]{display:inline-block;padding:4px 0}
html body .amx-widget-text-editor p > a:only-child{display:inline-block;padding:6px 0}

/* ---------- images ---------- */
html body .amx-widget-image img{max-height:340px;width:auto;max-width:100%;margin:0 auto}
html body .amx-element-83ca8b4 .amx-widget-image,html body .amx-element-18a4428 .amx-widget-image,html body .amx-element-0b6a358 .amx-widget-image{margin-top:20px!important}

/* ---------- homepage specifics ---------- */
html body .amx-element-5264bc5,html body .amx-element-979bc44,html body .amx-element-c958f81{height:280px!important;min-height:280px!important}
html body .amx-element-83ca8b4 .amx-heading-title,html body .amx-element-0b6a358 .amx-heading-title{text-align:start!important}
html body .amx-element-83ca8b4 .amx-button-wrapper,html body .amx-element-18a4428 .amx-button-wrapper,html body .amx-element-0b6a358 .amx-button-wrapper{text-align:center}
}

/* ---------- desktop composition: centered reading measure ---------- */
/* quote bands on the EN/FR about pages sit 20px short of the heading edge */
@media (min-width:1025px){
html body div[data-amx-type="x-page"] section.amx-top-section:not(.amx-element-593e792):not(.amx-element-735a748) > .amx-container,
html body footer section.amx-top-section > .amx-container{max-width:860px!important}
html body #faq .faq-inner,html body #practical .prac-inner{max-width:860px}
html body .amx-element-9514875 .amx-widget-wrap,html body .amx-element-c2ba9ca .amx-widget-wrap{padding-inline-start:30px!important}
}

/* ---------- video facade + lightbox ---------- */
html body .yt-facade{position:relative;max-width:720px;margin:0 auto;cursor:pointer;border-radius:12px;overflow:hidden;box-shadow:0 8px 30px rgba(0,0,0,.18)}
html body .yt-facade img{display:block;width:100%;height:auto}
html body .yt-facade .yt-play{position:absolute;inset:0;margin:auto;width:68px;height:68px;border-radius:50%;background:#4E763B;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 18px rgba(0,0,0,.35);transition:transform .18s ease,background .18s ease}
html body .yt-facade .yt-play svg{margin-inline-start:4px}
html body .yt-facade:hover .yt-play,html body .yt-facade:focus-visible .yt-play{transform:scale(1.08);background:#3d5e2f}
html body .yt-facade:focus-visible{outline:3px solid #4E763B;outline-offset:3px}
html body .yt-lightbox{position:fixed;inset:0;z-index:9999;background:rgba(10,12,10,.88);display:flex;align-items:center;justify-content:center;padding:24px}
html body .yt-lightbox .yt-frame{width:min(960px,94vw);aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5)}
html body .yt-lightbox iframe{width:100%;height:100%;border:0;display:block}
html body .yt-lightbox .yt-close{position:absolute;top:18px;inset-inline-end:22px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;font-size:18px;cursor:pointer}
html body .yt-lightbox .yt-close:hover{background:rgba(255,255,255,.25)}

/* Equal small gap before and after bullet lists in content (site-wide; reset zeroes list margins, p has 12px below, sibling margins collapse) */
.amx-widget-text-editor ul,.amx-widget-text-editor ol{margin-block-start:12px;margin-block-end:12px}

/* mobile-only byline separator (desktop uses the line break) */
.m-only-sep{display:none}
@media (max-width:767px){.m-only-sep{display:inline}}

/* --- pre-launch UX pass --- */
/* language dropdown: hide the language you are already on */
.amx-nav-menu ul.sub-menu .current-lang{display:none}
@media (max-width:767px){
  /* 44px tap targets: burger + header CTA + dropdown items */
  html body header :is(a.amx-button.amx-button), html body .amx-location-header :is(a.amx-button.amx-button){padding:12px 16px!important}
  .amx-nav-menu--dropdown .amx-item, .amx-nav-menu--dropdown .amx-sub-item{padding-top:12px;padding-bottom:12px}
  /* dropdown menu: separate from page content */
  nav.amx-nav-menu--dropdown.amx-nav-menu__container{box-shadow:0 10px 18px rgba(0,0,0,.10);border-bottom:1px solid rgba(0,0,0,.06)}
  /* footer link cluster: breathing room for taps */
  footer .amx-widget-text-editor a{display:inline-block;padding:4px 2px}
}
/* very narrow phones: keep the HE header CTA clear of the burger */
@media (max-width:359px){
  html[lang="he-IL"] body header :is(a.amx-button.amx-button), html[lang="he-IL"] body .amx-location-header :is(a.amx-button.amx-button){font-size:11px!important;padding:9px 10px!important;letter-spacing:0!important}
}
html body .amx-form textarea.amx-field{height:auto!important;min-height:110px!important}

/* narrow phones: short header CTA label (HE label is long) */
.cta-short{display:none}
@media (max-width:359px){.cta-full{display:none}.cta-short{display:inline}}

/* EN alignment: uniform mobile side padding for custom blocks + home columns */
@media (max-width:767px){
  html[lang="en-GB"] #faq,html[lang="en-GB"] #intro-video,html[lang="en-GB"] #se-links,html[lang="en-GB"] #practical,html[lang="fr-BE"] #faq,html[lang="fr-BE"] #intro-video,html[lang="fr-BE"] #se-links,html[lang="fr-BE"] #practical,html[lang="he-IL"] #faq,html[lang="he-IL"] #intro-video,html[lang="he-IL"] #se-links,html[lang="he-IL"] #practical{padding-left:10px!important;padding-right:10px!important}
}
.amx-10 .amx-column>.amx-widget-wrap,.amx-5258 .amx-column>.amx-widget-wrap,.amx-1411 .amx-column>.amx-widget-wrap{padding-left:10px!important;padding-right:10px!important;margin-left:0!important;margin-right:0!important}
@media (max-width:767px){
  div.amx-10[data-amx-type="x-page"]>section.amx-section-boxed,div.amx-5258[data-amx-type="x-page"]>section.amx-section-boxed,div.amx-1411[data-amx-type="x-page"]>section.amx-section-boxed{padding-left:10px!important;padding-right:10px!important}
}

/* quiet inline arrow links: one step below body text, all locales */
html body .ln-quiet{font-size:15px!important;letter-spacing:.3px!important}
@media (max-width:767px){html body .ln-quiet{font-size:14px!important}}

/* page-title-match: mobile page h1 identical to section headings (hero h1s excluded) */
@media (max-width:767px){
  div[data-amx-type="x-page"] .amx-widget-heading:not(.amx-element-a7e173a):not(.amx-element-cd6a18e):not(.amx-element-f99351d) h1.amx-heading-title{font-size:18px!important;line-height:1.45em!important}
}

/* contact-heading-start: Contact heading always start-aligned, all pages and viewports */
footer .amx-widget-heading .amx-heading-title{text-align:start!important}

/* stacked arrow links sit close together */
html body .amx-widget-text-editor p:has(> a.ln-quiet){margin-block-end:4px!important}

/* contact-heading-first: heading moved to the details column; cancel the kit's
   mobile column reversal in the footer so the heading stacks above the form */
@media (max-width:767px){
  footer .amx-reverse-mobile>.amx-container>:first-child{order:0}
  footer .amx-reverse-mobile>.amx-container>:nth-child(2){order:1}
}

/* contact-heading-top: start the heading at the section top like other section
   titles, instead of vertically centering the details column beside the form */
footer .amx-reverse-mobile .amx-column>.amx-widget-wrap{align-content:flex-start!important;align-items:flex-start!important}


/* he-typography: Hebrew gets Rubik (warm rounded sans) instead of
   system-font fallback + serif hero; letter-spacing removed for Hebrew script */
@font-face{font-family:"Rubik";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/rubik-hebrew-400.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/rubik-hebrew-500.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
@font-face{font-family:"Rubik";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/rubik-hebrew-600.woff2) format("woff2");unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F}
html[lang="he-IL"] body :is(h1,h2,h3,h4,h5,h6,p,li,a,span,summary,strong,em,b,label,button,input,textarea,blockquote,figcaption){font-family:"Montserrat","Rubik",sans-serif!important;letter-spacing:normal!important}