/* ==========================================================================
   AuPairLux — site styles
   Loaded via mu-plugin (survives theme updates).
   ========================================================================== */

:root{
  --apl-navy:#0D2340;
  --apl-blue:#123A63;
  --apl-gold:#B8912F;
  --apl-gold-dark:#9C7A26;
  --apl-red:#C8102E;
  --apl-ink:#132A47;
  --apl-text:#1C2B3E;
  --apl-sand:#F4EFE6;
  --apl-page:#FCFAF6;
  --apl-line:#E3DCCD;
}

/* Block-theme palette.
   The theme's theme.json ships a brown/stone palette (#2C2A29, #E1D7C6,
   #5A504A) that the header and footer are built from. Elementor's kit is a
   separate palette, so fixing that alone left the chrome clashing with the
   logo. Remap the presets to brand colours here rather than editing
   theme.json, so a theme update cannot revert it. */
:root,
body{
  --wp--preset--color--color1:#F4EFE6;   /* light section background */
  --wp--preset--color--color2:#0D2340;   /* dark section background (footer) */
  --wp--preset--color--color3:#B8912F;   /* accent / buttons */
  --wp--preset--color--dark:#132A47;
  --wp--preset--color--page-background:#FCFAF6;
  --wp--preset--color--page-text:#1C2B3E;
  --wp--preset--color--grey:#C9D2DE;
}
.has-color-2-background-color{ background-color:#0D2340 !important; }
.has-color-1-background-color{ background-color:#F4EFE6 !important; }
.has-color-3-background-color{ background-color:#B8912F !important; }
.has-color-2-color{ color:#0D2340 !important; }
.has-color-3-color{ color:#B8912F !important; }

/* --- 1. Global overflow guard -------------------------------------------
   Deliberately NOT using `overflow-x:hidden` on html/body: that hides real
   layout bugs instead of fixing them. Widths are constrained at source. */
html, body{ max-width:100%; }
img, svg, video{ max-width:100%; height:auto; }
/* long unbroken strings (emails, URLs) must not push layout wide */
p, li, h1, h2, h3, h4, td, th{ overflow-wrap:break-word; }

/* --- 2. Measure caps (replace Elementor fixed widths) -------------------- */
.apl-measure-700,.apl-measure-740,.apl-measure-760,.apl-measure-780,.apl-measure-860,.apl-measure-880,.apl-measure-900{
  /* Elementor resolves widget width through
     `width:var(--container-widget-width, <n>px)`, so the custom property must
     be reset too -- a plain `width:100%` loses to the variable. */
  --container-widget-width:100% !important;
  width:100% !important;
  /* Centre horizontally only. `margin-inline` is used deliberately instead of
     the `margin` shorthand: the shorthand would reset Elementor's vertical
     `_margin` values (which land in the per-post stylesheet) to 0. */
  margin-left:auto !important;
  margin-right:auto !important;
}
.apl-measure-700{ max-width:700px !important; }
.apl-measure-740{ max-width:740px !important; }
.apl-measure-760{ max-width:760px !important; }
.apl-measure-780{ max-width:780px !important; }
.apl-measure-860{ max-width:860px !important; }
.apl-measure-880{ max-width:880px !important; }
.apl-measure-900{ max-width:900px !important; }

/* --- 3. Typography polish ---------------------------------------------- */
.elementor-widget-heading .elementor-heading-title{ text-wrap:balance; }

/* Paragraph rhythm inside text widgets (for widgets holding several <p>). */
.elementor-widget-text-editor p{ margin:0 0 1.05em; }
.elementor-widget-text-editor p:last-child{ margin-bottom:0; }
.elementor-widget-text-editor ul,
.elementor-widget-text-editor ol{ margin:0 0 1.05em 1.25em; }
.elementor-widget-text-editor li{ margin-bottom:.4em; }

/* Widget vertical rhythm is handled by container `flex_gap` in the page
   builder, not by widget margins: Elementor's flex-container CSS zeroes
   `margin-block-end` on widgets inside `.e-con` by design. See el.py. */

/* Card / sub headings use the sans face. The display serif (Cormorant) is
   reserved for h1/h2: at card sizes it reads oversized and wraps badly.
   Set here because the Elementor kit's global H3 typography otherwise wins. */
.elementor-widget-heading h3.elementor-heading-title{
  font-family:"DMSans",system-ui,-apple-system,sans-serif;
  font-weight:700;
  font-size:1.16rem;
  line-height:1.4;
  letter-spacing:-.01em;
}
@media (max-width:767px){
  .elementor-widget-heading h3.elementor-heading-title{ font-size:1.1rem; }
}
.elementor-widget-text-editor a{
  color:var(--apl-gold);
  text-decoration:underline;
  text-underline-offset:2px;
  text-decoration-thickness:1px;
}
.elementor-widget-text-editor a:hover{ color:var(--apl-navy); }

/* Links inside dark bands stay legible */
.elementor-element[class*="e-con"] .elementor-widget-text-editor a[style*="FFFFFF"],
.apl-on-dark .elementor-widget-text-editor a{ color:#F0D48A; }

/* --- 3b. Hero -----------------------------------------------------------
   Give the H1 and its standfirst room to breathe, and keep white text
   readable over a photograph. */
.apl-measure-880 .elementor-heading-title{
  text-shadow:0 2px 18px rgba(8,20,38,.45);
}
.elementor-widget-heading.apl-measure-880{ margin-bottom:1.15rem !important; }
.elementor-widget-text-editor.apl-measure-700 p,
.elementor-widget-text-editor.apl-measure-740 p{
  text-shadow:0 1px 12px rgba(8,20,38,.4);
}

/* Viewport-height hero: `min-height` is set in vh so the hero keeps the same
   share of the screen everywhere. Two guards:
   - `svh` where supported, so mobile browser chrome (the collapsing address
     bar) does not make the hero jump as you scroll.
   - a px floor, so on short landscape screens the copy and buttons still fit
     rather than being clipped. */
@supports (height:1svh){
  .apl-hero-75{ min-height:75svh !important; }
  .apl-hero-60{ min-height:60svh !important; }
}
/* Short screens (landscape phones, small laptops): fall back to a pixel floor
   so the headline, standfirst and buttons are never clipped. */
@media (max-height:620px) and (min-width:768px){
  .apl-hero-75{ min-height:460px !important; }
  .apl-hero-60{ min-height:380px !important; }
}
@media (max-height:560px) and (max-width:767px){
  .apl-hero-75{ min-height:420px !important; }
  .apl-hero-60{ min-height:340px !important; }
}

/* --- 4. Icon lists ------------------------------------------------------ */
.elementor-widget-icon-list .elementor-icon-list-item{ align-items:flex-start; }
.elementor-widget-icon-list .elementor-icon-list-icon{
  padding-top:.36em;
  flex-shrink:0;
}
.elementor-widget-icon-list .elementor-icon-list-text{ line-height:1.6; }

/* --- 5. Fee table (FAQ) ------------------------------------------------- */
table.apl-fees{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  margin:1.25rem 0 .25rem;
  font-size:1rem;
  border:1px solid var(--apl-line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
table.apl-fees thead th{
  background:var(--apl-navy);
  color:#fff;
  font-family:"DMSans",system-ui,sans-serif;
  font-weight:600;
  text-align:left;
  padding:.85rem 1rem;
  font-size:.95rem;
  letter-spacing:.02em;
}
table.apl-fees tbody td{
  padding:.85rem 1rem;
  border-top:1px solid var(--apl-line);
  color:var(--apl-text);
  vertical-align:middle;
}
table.apl-fees tbody tr:nth-child(even){ background:#FBF8F2; }
table.apl-fees tbody td:last-child{
  font-weight:700;
  color:var(--apl-navy);
  white-space:nowrap;
  text-align:right;
}
table.apl-fees thead th:last-child{ text-align:right; }

/* Stack the fee table into labelled rows on phones */
@media (max-width:600px){
  table.apl-fees thead{ display:none; }
  table.apl-fees, table.apl-fees tbody, table.apl-fees tr, table.apl-fees td{
    display:block; width:100%;
  }
  table.apl-fees tr{
    border-top:1px solid var(--apl-line);
    padding:.35rem 0;
  }
  table.apl-fees tr:first-child{ border-top:0; }
  table.apl-fees tbody td{
    border:0;
    padding:.15rem .95rem;
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:1rem;
    text-align:left;
  }
  /* Row heading: the placement name, on its own line, no "Placement" label */
  table.apl-fees tbody td:first-child{
    display:block;
    font-weight:600;
    color:var(--apl-navy);
    padding-top:.7rem;
    padding-bottom:.1rem;
    line-height:1.4;
  }
  table.apl-fees tbody td:first-child::before{ content:none; }
  /* Fee row: "Fee" label left, amount right */
  table.apl-fees tbody td:last-child{
    padding-bottom:.7rem;
    text-align:right;
  }
  table.apl-fees tbody td:last-child::before{
    content:attr(data-label);
    font-weight:500;
    color:var(--apl-text);
    opacity:.75;
    flex:0 0 auto;
  }
}

/* --- 6. Accordion (FAQ) ------------------------------------------------- */
.elementor-accordion .elementor-accordion-item{
  border-radius:12px;
  overflow:hidden;
  margin-bottom:12px;
  border:1px solid var(--apl-line) !important;
  background:#fff;
}
.elementor-accordion .elementor-tab-title{
  transition:background-color .18s ease;
  cursor:pointer;
}
.elementor-accordion .elementor-tab-title:hover{ background:#FBF8F2 !important; }
.elementor-accordion .elementor-tab-title.elementor-active{
  background:#FBF8F2 !important;
  border-bottom:1px solid var(--apl-line);
}
.elementor-accordion .elementor-tab-title a{ text-decoration:none; }
.elementor-accordion .elementor-tab-content{ border-top:0 !important; }
.elementor-accordion .elementor-tab-content p{ margin:0 0 .85em; }
.elementor-accordion .elementor-tab-content p:last-child{ margin-bottom:0; }
/* keyboard focus */
.elementor-accordion .elementor-tab-title:focus-visible{
  outline:3px solid var(--apl-gold);
  outline-offset:-3px;
}

/* --- 7. Buttons -------------------------------------------------------- */
.elementor-button{
  transition:background-color .2s ease, color .2s ease, border-color .2s ease,
             transform .12s ease;
  text-decoration:none !important;
  line-height:1.25;
}
.elementor-button:hover{ transform:translateY(-1px); }
.elementor-button:focus-visible{
  outline:3px solid var(--apl-gold);
  outline-offset:3px;
}
@media (max-width:767px){
  /* CTA stacks: full-width, comfortable tap targets */
  .elementor-widget-button .elementor-button{
    width:100%;
    justify-content:center;
    min-height:48px;
  }
}

/* --- 7b. Image framing --------------------------------------------------
   Photos are framed by aspect ratio, not a fixed pixel height. A fixed height
   forces one shape at every screen width, and Elementor does not always emit
   `object-fit`, so the browser falls back to `fill` and visibly stretches the
   photo. `aspect-ratio` + `object-fit:cover` always crops instead. */
.apl-ar-3x2 img,
.apl-ar-4x3 img,
.apl-ar-1x1 img,
.apl-ar-3x4 img,
.apl-ar-16x9 img{
  width:100% !important;
  height:100% !important;
  display:block;
  object-fit:cover !important;
  object-position:center;
}
.apl-ar-3x2  img{ aspect-ratio:3/2;  }
.apl-ar-4x3  img{ aspect-ratio:4/3;  }
.apl-ar-1x1  img{ aspect-ratio:1/1;  }
.apl-ar-3x4  img{ aspect-ratio:3/4;  }
.apl-ar-16x9 img{ aspect-ratio:16/9; }

/* Any image the builder gave an explicit fit to must honour it, even where
   Elementor did not write the declaration itself. */
.apl-fit-cover img{ object-fit:cover !important; }
.apl-fit-contain img{ object-fit:contain !important; }

/* Portrait frames get a gentler ratio on phones so faces are not cropped
   tightly when the column goes full width. */
@media (max-width:767px){
  .apl-ar-3x4 img{ aspect-ratio:4/5; }
}

/* --- 8. Cards ---------------------------------------------------------- */
.e-con-inner > .e-con.e-child,
.e-con.e-child{ min-width:0; }           /* let grid children shrink */
.elementor-widget-image img{ display:block; }

/* --- 9. Header / nav --------------------------------------------------- */
/* Header logo. Sized by width so the "AU PAIR MATCHING AGENCY LUXEMBOURG"
   strapline stays legible -- capping by height alone shrank it to ~77px wide,
   where the strapline turns to mush and reads as clipped. The block's own
   width is 190 (see logo.php), which also gives a 2x-sharp source. */
/* The logo wrapper is a flex item inside the header's logo group. Left to
   flex sizing it collapses to ~80px, and because the img carries
   `max-width:100%`, the image is then clamped to that 80px regardless of its
   own width. Give the wrapper (and the <a> and <figure> inside it) an
   explicit basis so the image can reach its intended size. */
.site-header .wp-block-site-logo,
.site-header .wp-block-site-logo a,
.site-header .wp-block-site-logo .custom-logo-link,
.site-header .logo-wrapper .wp-block-site-logo{
  display:block;
  width:auto !important;
  max-width:none !important;
  min-width:0 !important;
  flex:0 0 auto !important;
}
.site-header .wp-block-site-logo img,
.site-header .custom-logo{
  /* The 2026 logo is a wide lockup (874x286, ~3.06:1), not the older tall
     chateau mark (~1.38:1). Sizing a 3:1 lockup by width makes it render
     visually much shorter than the mark it replaced, so the header now pins
     the HEIGHT and lets the width follow. 72px tall ~= 220px wide, which
     reads slightly larger than the old mark -- the size increase the client
     asked for. */
  width:auto !important;
  height:72px !important;
  /* not `max-width:100%`: the wrapper can be narrower than the intended
     logo width, which would clamp the image back down to the wrapper. */
  max-width:none !important;
  max-height:none !important;
  object-fit:contain;
}
@media (max-width:1024px){
  .site-header .wp-block-site-logo img,
  .site-header .custom-logo{ height:64px !important; }
}
@media (max-width:781px){
  .site-header .wp-block-site-logo img,
  .site-header .custom-logo{ height:56px !important; }
}
@media (max-width:380px){
  .site-header .wp-block-site-logo img,
  .site-header .custom-logo{ height:46px !important; }
}
.wp-block-navigation .wp-block-navigation-item__content{
  font-family:"DMSans",system-ui,sans-serif;
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:.005em;
  color:var(--apl-navy);
  text-decoration:none;
}
/* Breathing room between header menu items. Set on the header only so the
   footer's stacked list keeps its own tighter rhythm. */
.site-header .wp-block-navigation{
  gap:.35rem 2.1rem !important;
}
.site-header .wp-block-navigation__container{
  gap:.35rem 2.1rem !important;
}
.site-header .wp-block-navigation-item__content{
  padding-block:.35rem;
}
/* Step the gap down as the bar narrows so the menu stays on one line. */
@media (max-width:1300px){
  .site-header .wp-block-navigation,
  .site-header .wp-block-navigation__container{ gap:.35rem 1.55rem !important; }
}
@media (max-width:1120px){
  .site-header .wp-block-navigation,
  .site-header .wp-block-navigation__container{ gap:.35rem 1.15rem !important; }
  .site-header .wp-block-navigation .wp-block-navigation-item__content{
    font-size:1rem;
  }
}
.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
  color:var(--apl-gold);
}
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
  font-weight:700;
  text-decoration:none;
}

/* Keep the overlay (hamburger / close) controls off desktop. The theme's nav
   has no explicit overlayMenu setting, so they can leak into wide layouts. */
@media (min-width:782px){
  .site-header .wp-block-navigation__responsive-container-open,
  .site-header .wp-block-navigation__responsive-container-close{
    display:none !important;
  }
  .site-header .wp-block-navigation__responsive-container:not(.is-menu-open){
    display:block !important;
    position:static !important;
    background:transparent !important;
    width:auto !important;
  }
}
/* Header layout: logo left, nav right, single row */
.site-header .wp-block-group{ align-items:center; }
.site-header .wp-block-navigation{ row-gap:.25rem; }
@media (max-width:781px){
  .site-header .wp-block-navigation__responsive-container.is-menu-open{
    padding:1.5rem;
  }
  .site-header .wp-block-navigation__responsive-container.is-menu-open
  .wp-block-navigation-item__content{
    font-size:1.1rem;
    padding-block:.75rem;
  }
}

/* --- 10. Fluent Forms -------------------------------------------------- */
.apl-enquiry-form .ff-el-group{ margin-bottom:1.1rem; }
.apl-enquiry-form .ff-el-input--label label{
  font-family:"DMSans",system-ui,sans-serif;
  font-weight:600;
  font-size:.95rem;
  color:var(--apl-navy);
  margin-bottom:.4rem;
}
.apl-enquiry-form .ff-el-form-control{
  width:100%;
  border:1px solid #C9D2DE;
  border-radius:10px;
  padding:.8rem .9rem;
  font-size:1rem;
  font-family:"DMSans",system-ui,sans-serif;
  color:var(--apl-text);
  background:#fff;
  transition:border-color .16s ease, box-shadow .16s ease;
}
.apl-enquiry-form .ff-el-form-control:focus{
  border-color:var(--apl-gold);
  box-shadow:0 0 0 3px rgba(184,145,47,.18);
  outline:none;
}
.apl-enquiry-form textarea.ff-el-form-control{ min-height:150px; resize:vertical; }
.apl-enquiry-form .ff-el-form-check{ margin-bottom:.45rem; }
.apl-enquiry-form .ff-el-form-check label{
  font-size:.97rem;
  line-height:1.55;
  color:var(--apl-text);
  cursor:pointer;
}
.apl-enquiry-form input[type="radio"],
.apl-enquiry-form input[type="checkbox"]{
  accent-color:var(--apl-gold);
  width:17px; height:17px;
  margin-right:.5rem;
  flex-shrink:0;
}
.apl-enquiry-form .ff-btn-submit{
  background:var(--apl-gold) !important;
  color:var(--apl-navy) !important;
  border:0 !important;
  border-radius:50px !important;
  padding:.95rem 2.2rem !important;
  font-family:"DMSans",system-ui,sans-serif;
  font-weight:600 !important;
  font-size:1rem !important;
  min-height:48px;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease;
}
.apl-enquiry-form .ff-btn-submit:hover{
  background:var(--apl-navy) !important;
  color:#fff !important;
}
.apl-enquiry-form .ff-el-is-error .ff-el-form-control{ border-color:var(--apl-red); }
.apl-enquiry-form .error-text,
.apl-enquiry-form .text-danger{ color:var(--apl-red); font-size:.88rem; }
.apl-enquiry-form .ff-message-success{
  background:#F1F7F1;
  border:1px solid #BEDBBE;
  border-radius:12px;
  padding:1.1rem 1.25rem;
  color:#1E4620;
}
@media (max-width:767px){
  .apl-enquiry-form .ff-t-cell{ padding:0 !important; }
  .apl-enquiry-form .ff-t-container{ display:block !important; }
  .apl-enquiry-form .ff-btn-submit{ width:100%; }
}

/* --- 11. Footer -------------------------------------------------------- */
.site-footer{ background:var(--apl-navy); color:#D7DEE8; }
.site-footer a{ color:#D7DEE8; text-decoration:none; }
.site-footer a:hover{ color:var(--apl-gold); text-decoration:underline; }

/* The footer nav renders as an overlay ("hamburger") at narrow widths, which
   hides the links behind a toggle inside the footer itself. Always show the
   list there. */
.site-footer .wp-block-navigation__responsive-container-open,
.site-footer .wp-block-navigation__responsive-container-close{
  display:none !important;
}
.site-footer .wp-block-navigation__responsive-container{
  display:block !important;
  position:static !important;
  background:transparent !important;
  width:auto !important;
  padding:0 !important;
}
.site-footer .wp-block-navigation__responsive-container .wp-block-navigation__container{
  display:flex !important;
  flex-direction:column;
  gap:.1rem;
}
.site-footer .wp-block-navigation{ gap:.15rem !important; }

/* Unify footer typography on the menu-link style: DMSans 15.2px / #fff.
   The theme mixed Cormorant headings, an Arial fallback on the subscribe
   button, an 11px label and a 12px copyright line. */
.site-footer,
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer p,
.site-footer a,
.site-footer li,
.site-footer label,
.site-footer input,
.site-footer button,
.site-footer .wp-block-navigation-item__content,
.site-footer .hostinger-reach-block-submit{
  font-family:"DMSans",system-ui,-apple-system,sans-serif !important;
  font-size:.95rem;
  line-height:1.65;
  letter-spacing:normal;
  color:#FFFFFF;
}

/* Column headings: same face and size, weight alone sets them apart.
   The theme sets these via has-*-font-size preset classes, so the size needs
   !important to land. */
.site-footer h1, .site-footer h2, .site-footer h3,
.site-footer h4, .site-footer h5, .site-footer h6,
.site-footer h3.has-large-font-size,
.site-footer .has-large-font-size{
  font-size:.95rem !important;
  font-weight:700 !important;
  margin-bottom:.75rem;
  text-transform:none;
}

/* Contact lines inherit a medium preset; match the menu links. */
.site-footer p,
.site-footer .has-medium-font-size{ font-size:.95rem !important; }

.site-footer .wp-block-navigation-item__content{ font-weight:500; }
.site-footer .current-menu-item > .wp-block-navigation-item__content{
  font-weight:700;
  color:var(--apl-gold);
}

/* Form label and copyright line were noticeably smaller than everything else */
.site-footer label{ font-weight:500; font-size:.95rem; }
.site-footer .has-small-font-size{ font-size:.95rem !important; }

.site-footer .hostinger-reach-block-submit{
  font-weight:600;
  color:#0D2340 !important;   /* on the gold button */
}
.site-footer input[type="email"]{ color:var(--apl-text); }

/* Mobile footer: centre everything. The theme stacks the three footer columns
   left-aligned at phone widths, which reads as ragged once the columns are
   full width. */
@media (max-width:781px){
  .site-footer,
  .site-footer .wp-block-column,
  .site-footer .wp-block-columns{ text-align:center; }

  .site-footer h3,
  .site-footer p{ text-align:center; }

  /* nav links */
  .site-footer .wp-block-navigation,
  .site-footer .wp-block-navigation__responsive-container .wp-block-navigation__container{
    align-items:center !important;
    justify-content:center !important;
  }
  .site-footer .wp-block-navigation-item{ justify-content:center; }

  /* social icons row */
  .site-footer .wp-block-social-links{
    justify-content:center !important;
    display:flex;
    flex-wrap:wrap;
  }

  /* newsletter block */
  .site-footer .hostinger-reach-block,
  .site-footer form{ text-align:center; }
  .site-footer label{ display:block; text-align:center; }
  .site-footer input[type="email"]{ text-align:center; }

  /* bottom copyright row */
  .site-footer .wp-block-group{ justify-content:center; }
}

/* Newsletter submit: gold on navy, readable */
.site-footer .hostinger-reach-block-submit{
  background:var(--apl-gold) !important;
  border-color:var(--apl-gold) !important;
  color:#0D2340 !important;
  border-radius:50px !important;
  font-weight:600;
}
.site-footer .hostinger-reach-block-submit:hover{
  background:#fff !important;
  border-color:#fff !important;
  color:#0D2340 !important;
}
.site-footer input[type="email"]{
  border-radius:10px;
  padding:.75rem .9rem;
  border:1px solid rgba(255,255,255,.35);
}
.site-footer .wp-block-navigation-item__content{
  color:#D7DEE8;
  display:inline-block;
  padding-block:.5rem;
  font-size:.95rem;
}
.site-footer .wp-block-navigation-item__content:hover{ color:var(--apl-gold); }
.site-footer h3{ margin-bottom:.6rem; }

/* Placeholder social icons: the theme shipped bare https://facebook.com etc.
   Hide any anchor that is not a real AuPairLux profile so we never publish a
   link that goes nowhere useful. Remove a selector once its URL is set. */
.wp-block-social-link-anchor[href="https://instagram.com"],
.wp-block-social-link-anchor[href="https://tiktok.com"],
.wp-block-social-link-anchor[href="https://twitter.com"],
.wp-block-social-link-anchor[href="https://x.com"],
.wp-block-social-link-anchor[href="https://linkedin.com"],
.wp-block-social-link-anchor[href="https://youtube.com"]{
  display:none !important;
}
.wp-social-link-instagram:has(> [href="https://instagram.com"]),
.wp-social-link-tiktok:has(> [href="https://tiktok.com"]){
  display:none !important;
}

/* Facebook, Instagram and LinkedIn icons are in place but their URLs are not
   set yet (#set-me) -- the client is not active on them before 1 October.
   Show them dimmed and non-clickable so the layout can be reviewed without
   shipping a link to nowhere. The suffix selector covers every platform, and
   each icon goes live automatically the moment its real profile URL replaces
   the placeholder. */
.wp-block-social-link-anchor[href$="#set-me"]{
  opacity:.45;
  pointer-events:none;
  cursor:default;
}

/* --- 11b. Tap targets (WCAG 2.5.8 / 2.5.5) ----------------------------
   The theme header/footer ships 21-24px controls. Enlarge the hit area
   without changing the visual size of icons or link text. */

/* Mobile nav toggle + close */
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close{
  min-width:44px; min-height:44px;
  display:inline-flex !important;
  align-items:center; justify-content:center;
}

/* Three-bar hamburger. WordPress core ships a two-bar icon (two <path>
   elements); hide that SVG and draw three bars with pseudo-elements so no
   core file is edited. */
.wp-block-navigation__responsive-container-open svg{ display:none !important; }
.wp-block-navigation__responsive-container-open{
  position:relative;
}
.wp-block-navigation__responsive-container-open::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:2px;
  background:currentColor;
  transform:translate(-50%,-50%);
  /* middle bar, plus the outer two drawn as box-shadows */
  box-shadow:0 -7px 0 0 currentColor, 0 7px 0 0 currentColor;
  border-radius:2px;
}

/* Social icons in the footer */
.wp-block-social-link{ margin:2px; }
.wp-block-social-link-anchor{
  min-width:44px; min-height:44px;
  display:inline-flex !important;
  align-items:center; justify-content:center;
}

/* Email / phone links in header & footer: pad the line box */
.site-footer a[href^="mailto:"],
.site-footer a[href^="tel:"],
.site-header a[href^="mailto:"],
.site-header a[href^="tel:"]{
  display:inline-block;
  padding-block:.62rem;
  line-height:1.3;
}

/* Newsletter + form submit buttons */
.hostinger-reach-block-submit,
.apl-enquiry-form .ff-btn-submit,
.fluentform .ff-btn-submit,
.fluentform button[type="submit"]{
  min-height:48px !important;
  padding-block:.95rem !important;
}

/* Language switcher */
#trp-floater-ls .trp-language-item{ min-height:44px; display:flex; align-items:center; }

/* --- 12. Accessibility helpers ---------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:3px solid var(--apl-gold);
  outline-offset:2px;
}
.apl-skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--apl-navy); color:#fff;
  padding:.7rem 1.1rem; z-index:100000; border-radius:0 0 8px 0;
}
.apl-skip-link:focus{ left:0; }

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  .elementor-button:hover{ transform:none; }
}

/* --- 13. TranslatePress switcher -------------------------------------
   The floating "English" pill is switched OFF at source, in the plugin
   option `trp_language_switcher_settings` -> floater.enabled = false, so it
   is not rendered into the page at all. (TranslatePress 3.3.5 uses this "v2"
   option; the older `trp_settings['trp-ls-floater']` key alone does not stop
   it, and both are now set to off.) The plugin stays active so translation
   data survives for when more languages are added.

   To bring it back: TranslatePress -> Language Switcher -> enable the
   floating switcher.

   TranslatePress was removed in favour of GTranslate (2026-09-28), so these
   rules are now only a safety net in case the plugin is ever reactivated --
   nothing of its chrome should render. GTranslate's own switcher is styled
   in section 18. */
#trp-floater-ls,
#trp-floater-ls-current-language,
#trp-floater-ls-language-list,
.trp-language-switcher-container,
.trp-floating-switcher,
nav.trp-language-switcher.trp-floating-switcher{
  display:none !important;
}

/* --- 14. Hero slogan --------------------------------------------------
   "The One and Only!" sits above the hero strapline. The client asked for it
   to read large, since AuPairLux is the only au pair agency in Luxembourg.
   It is a sibling <p> inside the hero's text-editor widget, so it inherits
   the widget's white colour and centring and only needs its own scale.
   It uses the same manuscript face as the header slogan (see 17). Great
   Vibes ships a single 400 weight -- asking for 600 makes the browser
   synthesise a fake bold that smears the joins, so keep it at 400. */
.apl-slogan{
  font-family:"Great Vibes","Snell Roundhand","Apple Chancery",
              "Segoe Script","Brush Script MT",cursive;
  font-size:clamp(2rem,1.3rem + 2.4vw,3.4rem);
  font-weight:400;
  line-height:1.15;
  letter-spacing:.01em;
  margin:0 0 .55rem;
  color:#E8C56A;               /* lighter gold: AA on the navy hero scrim */
  text-shadow:0 1px 10px rgba(13,35,64,.45);
}

/* --- 15. Partner logos ------------------------------------------------
   Partner marks are supplied as transparent PNGs at their own native aspect
   (House o Orange is a wide 374x113 lockup). They are artwork, not
   photographs, so they must never be cropped to a ratio box or stretched --
   cap the width and let the height follow.

   The marks differ wildly in aspect: House o Orange is ~3.3:1 while Boutique
   Translation is ~1.4:1. A single max-height of 70px would render Boutique at
   only ~97px wide, half the visual weight of the others on the same row. So
   the height cap is raised and the row is centred, which balances a tall mark
   against a wide one without scaling any of them non-uniformly. */
.apl-partner-logo img{
  width:auto !important;
  max-width:230px;
  max-height:96px;
  height:auto;
  object-fit:contain;
  display:block;
}
@media (max-width:767px){
  .apl-partner-logo img{ max-width:200px; }
}

/* --- 16. Footer wordmark ----------------------------------------------
   The rectangular AuPairLux lockup, placed in the footer template part so it
   appears on every page (see banner.php).

   The 2026 artwork has a transparent background, but its wordmark is navy
   (#0D2340) and its strapline is navy too -- composited straight onto the
   navy footer, "AuPair" and "AU PAIR MATCHING AGENCY LUXEMBOURG" all but
   disappear. So it keeps a white plaque rather than sitting on the footer
   colour directly. Do not remove the plaque just because the PNG is
   transparent. */
.apl-footer-banner{
  margin:0 auto 2.25rem;
  max-width:420px;
  text-align:center;
}
.apl-footer-banner img{
  width:100%;
  height:auto;
  display:block;
  background:#FFFFFF;
  border-radius:10px;
  padding:14px 18px;
}
@media (max-width:781px){
  .apl-footer-banner{ max-width:300px; margin-bottom:1.75rem; }
}

/* --- 17. Header slogan -------------------------------------------------
   "The One and Only!" beside the logo in the header (added to template part
   16 by slogan.php). The client asked for manuscript (script) type in gold:
   AuPairLux is the only au pair matching agency located in Luxembourg, so the
   claim rides with the brand mark on every page.

   The header logo group is `display:flex;flex-wrap:nowrap`, so the slogan
   must be allowed to shrink and must not force the nav to wrap. It is hidden
   below the tablet breakpoint -- at phone widths the logo already fills the
   row, and the home hero still carries the slogan (.apl-slogan). */
.apl-header-slogan{
  font-family:"Great Vibes","Snell Roundhand","Apple Chancery",
              "Segoe Script","Brush Script MT",cursive;
  font-size:clamp(1rem,.62rem + .62vw,1.3rem);
  font-weight:400;
  line-height:1.1;
  color:var(--apl-gold);
  margin:0 0 0 .7rem;
  align-self:center;
  white-space:nowrap;
  letter-spacing:.01em;
}

/* The header is a 2-column grid whose first column (logo + slogan) is sized
   from its content, so the slogan steals width from the nav column and the
   7-item menu wraps "Contact" onto a second row. Let the nav keep its space
   and stay on one line. */
.hostinger-ai-menu-wrapper .hostinger-ai-site-navigation{
  flex-wrap:nowrap;
}
.hostinger-ai-menu-wrapper .hostinger-ai-site-navigation .wp-block-navigation-item__content{
  white-space:nowrap;
}
/* The header row is `alignwide`, i.e. capped at the theme's wide-size of
   1100px, but logo + slogan + 7 nav items + the language dropdown measure
   wider than that. `flex-wrap:nowrap` above means the surplus does not wrap --
   it overflows to the RIGHT, pushing the switcher off the edge of the screen
   (the French labels are longer than the English ones, so it showed up only
   once GTranslate was live).

   Let the header use the real viewport width instead of the 1100px wide-size,
   keeping the site's normal side gutter. Everything then sits inside the
   screen and the row reads further left, as the client asked. */
.hostinger-ai-menu-wrapper.alignwide{
  max-width:min(1600px, 100% - 3rem);
  margin-left:auto;
  margin-right:auto;
}
/* The nav column must be allowed to shrink inside the grid: a grid item's
   default `min-width:auto` refuses to go below its content width, which is
   what let the row overflow in the first place. */
.hostinger-ai-menu-wrapper > *{
  min-width:0;
}
.hostinger-ai-site-navigation-wrapper{
  flex-wrap:nowrap;
  justify-content:flex-end;
  gap:.75rem;
}

/* The slogan is decoration and the switcher is a control, so the slogan is
   the first thing to go when the row gets tight. With the wider header above
   it now survives down to 1400px.

   IMPORTANT: translated menus are much wider than the English original --
   "Find an Au Pair" becomes "Trouver une fille au pair". Google swaps the
   text in after load, so the row can be comfortable in English and overflow
   in French at the same window size. `html[lang]:not([lang^="en"])` matches
   whatever language Google sets, and drops the slogan for all of them.

   The 1400px cut was too cautious: it hid the slogan on 1280px and 1366px
   laptops, which is most of them, so the client reported the slogan missing.
   Measured with the slogan forced visible, the English row fits with no
   overflow at 1280px (nav overflow 0, document overflow 0) and only starts
   to crowd at 1200px, so the cut moves to 1280px. */
@media (max-width:1279px){
  .apl-header-slogan{ display:none; }
}
html:not([lang^="en"]) .apl-header-slogan{
  display:none;
}

/* Last-resort guard: however long the translated labels get, the nav may
   shrink and the row must never push the switcher off-screen. Menu items
   stay on one line; the nav itself scrolls if it truly cannot fit. */
@media (min-width:782px){
  .hostinger-ai-site-navigation-wrapper > .hostinger-ai-site-navigation{
    min-width:0;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .hostinger-ai-site-navigation-wrapper > .hostinger-ai-site-navigation::-webkit-scrollbar{
    display:none;
  }
}
.apl-gt-switcher{ flex-shrink:0; }

/* Translated labels are longer, so tighten the menu when the page is not in
   English. French runs ~40% wider than the English original ("Find an Au
   Pair" -> "Trouver une fille au pair"), which clipped "Contact" at 1440.
   Closing the gaps and easing the type down a touch fits all 7 items plus
   the switcher without touching the English layout. */
html:not([lang^="en"]) .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation{
  gap:.9rem;
}
html:not([lang^="en"]) .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation
  .wp-block-navigation-item__content{
  font-size:.94em;
}
@media (max-width:1500px){
  html:not([lang^="en"]) .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation{
    gap:.7rem;
  }
  html:not([lang^="en"]) .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation
    .wp-block-navigation-item__content{
    font-size:.88em;
  }
}
/* 1366 is a very common laptop width and French still clipped "Contact"
   there, so squeeze once more before the burger menu takes over at 781px. */
/* Below 1400px the row is tight in EVERY language -- adding the switcher
   cost the nav ~150px, so English clipped "Contact" at 1366 as well. Tighten
   for all languages here; the `html:not([lang^="en"])` rules above stay, and
   stack on top for the longer translated labels. */
@media (max-width:1400px){
  .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation{
    gap:.6rem;
  }
  .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation
    .wp-block-navigation-item__content{
    font-size:.9em;
  }
  .apl-gt-switcher{ margin-left:.5rem; }
  .apl-gt-switcher select{
    font-size:14px;
    padding:.3rem 1.7rem .3rem .65rem;
  }
  html:not([lang^="en"]) .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation{
    gap:.45rem;
  }
  html:not([lang^="en"]) .hostinger-ai-menu-wrapper .hostinger-ai-site-navigation
    .wp-block-navigation-item__content{
    font-size:.82em;
  }
}

/* Below the desktop breakpoint the theme swaps to a burger menu, so the nav
   no longer competes for width -- but the switcher must not crowd the logo. */
@media (max-width:781px){
  .hostinger-ai-menu-wrapper.alignwide{
    max-width:min(1600px, 100% - 1.5rem);
  }
  /* The theme lays the header out as a rigid 50/50 grid
     (`grid-template-columns:repeat(2, minmax(0, 1fr))`). On a phone the logo
     claims half the row, leaving too little for the burger + switcher, which
     then overflow the right edge. Let the logo column take only what it
     needs and give the rest to the controls. */
  /* The theme's own rule is `.wp-container-core-group-is-layout-<hash>` --
     a class selector that ties with ours, and it is emitted in an inline
     <style> in <head>. Match on BOTH classes so this wins on specificity
     rather than relying on source order, which an update could change.
     (Measured: without this the columns compute to 171px/123px, so the
     switcher starts at x=160 and sits on top of a logo ending at x=207.) */
  /* gtswitcher.php places the shortcode block as a SIBLING of the nav, so
     the header grid holds three items -- [logo] [nav] [switcher] -- but the
     theme declares only two columns. The third lands in an implicit column
     and runs off the right edge, taking the burger with it.

     Give the row three explicit columns at phone widths: logo takes what it
     needs, the switcher takes what it needs, and the nav (the burger) keeps
     the slack in between. */
  /* Measured at a real 390px viewport, the theme's 2-column grid resolved to
     `171px 115px 0px`: the logo column kept its full intrinsic width and the
     third (implicit) column collapsed to zero, so the switcher was laid on
     top of the logo.

     Drop the grid entirely at phone widths and use a single flex row, where
     the logo is allowed to shrink. That removes the column maths rather than
     fighting it: [logo (shrinks)] [switcher] [burger]. */
  .hostinger-ai-menu-wrapper.is-layout-grid,
  .hostinger-ai-menu-wrapper.wp-block-group-is-layout-grid{
    display:flex !important;
    flex-wrap:nowrap;
    align-items:center;
    gap:.5rem;
  }
  /* The logo group is the only thing that may give up space. The theme sets
     the logo's width inline (240px from the site-logo block), which a
     percentage max-width cannot override inside a shrinking flex item -- so
     cap it in absolute terms. 150px leaves room for the switcher + burger on
     a 390px screen without the wordmark disappearing under the dropdown. */
  .hostinger-ai-menu-wrapper > .wp-block-group:first-child{
    flex:0 1 auto;
    min-width:0;
    overflow:hidden;
  }
  .hostinger-ai-menu-wrapper .wp-block-site-logo,
  .hostinger-ai-menu-wrapper .wp-block-site-logo img{
    max-width:150px !important;
    width:auto !important;
    height:auto;
  }
  .apl-gt-switcher{
    flex:0 0 auto;
    margin-left:auto;   /* push the controls to the right edge */
  }
  .hostinger-ai-site-navigation-wrapper{
    flex:0 0 auto;
    justify-content:flex-end;
  }
  .hostinger-ai-site-navigation-wrapper{
    gap:.5rem;
    min-width:0;
  }
  .apl-gt-switcher{
    margin-left:.4rem;
    min-width:0;
  }
  .apl-gt-switcher select{
    max-width:7rem;
    text-overflow:ellipsis;
    padding-right:1.6rem;
  }
}

/* Between the burger breakpoint and ~1150px a 7-item French menu cannot fit
   on one line at any sane size. The nav scrolls horizontally there (see the
   overflow rule above) rather than truncating mid-word, so every item stays
   reachable; fading the right edge signals there is more to scroll to. */
@media (min-width:782px) and (max-width:1150px){
  html:not([lang^="en"]) .hostinger-ai-site-navigation-wrapper
    > .hostinger-ai-site-navigation{
    -webkit-mask-image:linear-gradient(to right, #000 88%, transparent 100%);
            mask-image:linear-gradient(to right, #000 88%, transparent 100%);
    padding-right:.5rem;
  }
}

/* --- 18. Header language switcher (GTranslate) ------------------------
   [gtranslate] in header part 16 (placed by gtswitcher.php), to the right of
   the nav. GTranslate ships an empty `.gtranslate_wrapper` and fills it from
   its own JS after load, so this styles whatever it injects rather than a
   known server-rendered tree -- keep the selectors shallow and forgiving.

   Widget colours are configured in the GTranslate option itself (gt.php), so
   these rules only handle placement and the bits its settings do not cover.

   Note the wrapper is empty until the script runs: give it no fixed size, or
   a blank gap appears in the header on slow connections. */
.apl-gt-switcher{
  display:flex;
  align-items:center;
  margin:0 0 0 .75rem;
  min-height:1px;
  flex:0 0 auto;
}
.apl-gt-switcher .gtranslate_wrapper{
  display:flex;
  align-items:center;
}
/* The injected <select>/links inherit the header font rather than the
   plugin's default sans stack. */
.apl-gt-switcher select,
.apl-gt-switcher a{
  font-family:inherit;
  font-size:15px;
  line-height:1.2;
}
.apl-gt-switcher select{
  border:1px solid rgba(184,145,47,.45);
  border-radius:999px;      /* match the pill buttons used site-wide */
  background:#fff;
  color:var(--apl-navy);
  padding:.35rem 1.9rem .35rem .8rem;
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none'%3E%3Cpath d='M5 8l5 5 5-5' stroke='%23B8912F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right .45rem center;
}
.apl-gt-switcher select:focus-visible{
  outline:3px solid var(--apl-gold);
  outline-offset:2px;
}

/* Hide the "Powered by Google Translate" bar and the top banner the widget
   injects -- they sit over the header and break the layout. */
.goog-te-banner-frame,
.skiptranslate iframe,
#goog-gt-tt{
  display:none !important;
}
body{ top:0 !important; }   /* Google shifts <body> down for its banner */

@media (max-width:781px){
  .apl-gt-switcher{ margin-left:.5rem; }
  .apl-gt-switcher select{ font-size:14px; padding:.3rem 1.7rem .3rem .65rem; }
}