/*
Theme Name:  La Marelle
Theme URI:   https://elementor.com/hello-theme/
Description: Make your modifications to [Hello Elementor Theme] in this child theme.
Author:      Naël Soufi
Version:     4.0.0
Template:    hello-elementor
Text Domain: hello-elementor-child
*/


/* =Theme customization starts here
-------------------------------------------------------------- */
/**
 * CONTENTS
 *
 * RESETS
 * Box-sizing................Universal reset
 * Elementor.................Framework overrides
 *
 * SETTINGS
 * Custom Properties.........Design tokens (colors, spacing, typography)
 *
 * BASE
 * Forms.....................Required field labels  
 * Typography................Text wrapping and reading widths
 *
 * COMPONENTS
 * Bespoke Section...........Style full bleed image, cards
 * Buttons...................Cut corner buttons, full width
 * Confidential Page.........Sizing of the columns
 * Contact Form..............Form controls, hints, validation, conditional fields
 * Header....................Flex responsive header and hero
 * FAQ.......................Styling questions title
 * Footer....................Responsive rule on smaller screens
 * Location Grid.............Style title block and smaller screen versions
 * Logo Banner...............Logo banner with visual balancing for logos
 * Navigation Menu...........Menu and humburger (reponsive and accessible)
 * Offer Section.............Style offer cards titles, center marelle logo
 * Photo Gallery.............Correct lightbox height
 * Setup Section.............Handle image bleed and title positionning
 * Setup Aside...............Manage fluide positionning for aside block
 *
 * UTILITIES
 * Corner Cuts...............Cosmetic corner cutting
 * Grids.....................Dense grid layout for pictures
 * Highlight.................Text highlight style
 * Logos.....................Visual weight balancing
 * Overflow..................Overflow on x and y axis
 * Screen Reader.............Hide text for screen reader
 * Text Align................Responsive text alignment
 * Text Decorators...........Text helpers (underscore, arrows, underline)
 */

/*------------------------------------*\
  #RESETS
\*------------------------------------*/

/**
* Universal box-sizing reset
*
* Applied to all elements to prevent padding and border from adding
* to element dimensions. Makes layout calculations more predictable.
* 
* Modern best practice uses inheritance model rather than universal
* selector for better performance, though the difference is negligible
* in most projects.
*/

*,
*::before,
*::after {
  box-sizing: border-box;
}

/**
* Elementor Widget Overrides
*
* Elementor wraps text elements in div containers with default width behavior
* that interferes with our max-width text sizing system. These overrides make
* the wrapper divs "invisible" by conforming to their child element's size.
*
* Without these overrides, our heading and paragraph max-width rules would
* apply to the wrapper instead of the actual text element, breaking our
* typography system.
*/

.elementor-widget-heading { width: fit-content; }
.elementor-widget-text-editor { width: fit-content; }

/*------------------------------------*\
  #SETTINGS
\*------------------------------------*/

:root {
  /* 
  * La Marelle Fluid Spacing System
  * Base: 1rem (16px) → 1.5rem (24px)
  * Viewport: 320px (20rem) → 1440px (90rem)
  * Scale ratio: 1.5 (Perfect Fifth - Dramatic)
  */

  /* Single value spaces */
  --space-3xs: clamp(0.2963rem, 0.2107rem + 0.4286vw, 0.5926rem);
  --space-2xs: clamp(0.4444rem, 0.3161rem + 0.6429vw, 0.8889rem);
  --space-xs: clamp(0.6667rem, 0.4741rem + 0.9643vw, 1.3333rem);
  --space-s: clamp(1rem, 0.7143rem + 1.4286vw, 2rem);
  --space-m: clamp(1.5rem, 1.0714rem + 2.1429vw, 3rem);
  --space-l: clamp(2.25rem, 1.6071rem + 3.2143vw, 4.5rem);
  --space-xl: clamp(3.375rem, 2.4107rem + 4.8214vw, 6.75rem);
  --space-2xl: clamp(5.0625rem, 3.6161rem + 7.2321vw, 10.125rem);
  --space-3xl: clamp(7.5938rem, 5.4241rem + 10.8482vw, 15.1875rem);

  /* One-up pairs - for more dramatic variance */
  --space-3xs-2xs: clamp(0.2963rem, 0.1054rem + 0.9554vw, 0.8889rem);
  --space-2xs-xs: clamp(0.4444rem, 0.1581rem + 1.4321vw, 1.3333rem);
  --space-xs-s: clamp(0.6667rem, 0.2371rem + 2.1482vw, 2rem);
  --space-s-m: clamp(1rem, 0.3571rem + 3.2143vw, 3rem);
  --space-m-l: clamp(1.5rem, 0.5357rem + 4.8214vw, 4.5rem);
  --space-l-xl: clamp(2.25rem, 0.8036rem + 7.2321vw, 6.75rem);
  --space-xl-2xl: clamp(3.375rem, 1.2054rem + 10.8482vw, 10.125rem);
  --space-2xl-3xl: clamp(5.0625rem, 1.8080rem + 16.2723vw, 15.1875rem);

  /* Custom pairs - use these for special cases */
  --space-xs-2xl: clamp(0.6667rem, 0.23705rem + 7.2321vw, 10.125rem);
  --space-m-xl: clamp(1.5rem, 0.5357rem + 4.8214vw, 6.75rem);

  /** 
  * Negative versions for CSS tricks
  * Elementor doesn't recognize "calc" in custom spacings
  * Hence why we pre-calculate it here
  */

  /* Simple negative space*/
  --space-n-3xs: calc( var(--space-3xs) * -1 );
  --space-n-2xs: calc( var(--space-2xs) * -1 );
  --space-n-xs: calc( var(--space-xs) * -1 );
  --space-n-s: calc( var(--space-s) * -1 );
  --space-n-m: calc( var(--space-m) * -1 );
  --space-n-l: calc( var(--space-l) * -1 );
  --space-n-xl: calc( var(--space-xl) * -1 );
  --space-n-2xl: calc( var(--space-2xl) * -1 );
  --space-n-3xl: calc( var(--space-3xl) * -1 );


  /**
  * Set common widths for containers
  * Based on typical container hierarchy system
  * - Full viewport: section background, decorative
  * - Content wrapper: main content constraint for readability
  * - Text Content: see next section of css
  * - Breakout/Feature: Visual interest between text and full width
  */

  --container-width--full: min(100%, 90rem);
  --container-width--wrapper: min(85%, 75rem);
  --container-width--breakout: min(70%, 64rem);

  @media screen and (max-width: 30rem) {
    --container-width--wrapper: calc(100% - var(--space-3xs) * 2);
    --container-width--breakout: calc(100% - var(--space-3xs) * 2);
  }

  /**
  * Set max width for text blocks
  * Readibility is impacted by characters/line and varies per screen size
  * - Big screens can't stretch text forever (max ch)
  * - Medium screens need less characters per line (ideal in vw)
  * - Small screens need to keep a readable number of characters (min ch)
  *
  * Note: We use min because there's no way we reach 50ch on smaller screens.
  *
  * Decided to keep two variables, one for title, one for content, in case
  * I change my mind on the sizing of one or the other.
  * For now they remain the same.
  *
  * Research-backed optimal ranges:
  * - Body text: 50-75 characters (66 ideal)
  * - Headings: 30-40 characters for impact
  * - Mobile: Shorter lines for scanning behavior
  */
  
  --text-width--title: clamp(min(93.75vw, 50ch), 100%, 75ch);
  --text-width--content: clamp(min(93.75vw, 50ch), 100%, 75ch);

	/* Brand Colors */
	--color-blue-100: #EAEBF9;
	--color-blue-200: #D9D8F4;
  --color-blue-600 : #354093;
  --color-blue-900: #23235E;
  --color-orange-200: #FCD2C3;
  --color-orange-300: #EF9D84;
  --color-orange-500: #DD614F;

  /* Typescale */
  --font-size-xs : clamp(0.5rem, 0.45vw + 0.41rem, 0.75rem);
  --font-size-s : clamp(0.75rem, 0.45vw + 0.66rem, 1rem);
  --font-size-base : clamp(1rem, 0.45vw + 0.91rem, 1.25rem);
  --font-size-lg : clamp(1.5rem, 0.45vw + 1.41rem, 1.75rem);
  --font-size-xl : clamp(2rem, 0.91vw + 1.82rem, 2.5rem);
  --font-size-2xl : clamp(2.75rem, 1.36vw + 2.48rem, 3.5rem);
  --font-size-3xl : clamp(2rem, 5.45vw + 0.91rem, 5rem);

  /* Brand Fonts */
  --font-family-display: "Simplon Mono", monospace;
  --font-family-body: "Space Grotesk", sans-serif;

  /* Brand Typography */
  /* Body S */
  --body-s-font-size: var(--font-size-s);
  --body-s-line-height: 1.5;
  --body-s-font-style: normal;
  --body-s-font-weight: 400;
  --body-s-font-family: var(--font-family-body);

  /* Label M */
  --label-m-font-size: var(--font-size-s);
  --label-m-line-height: 1.4;
  --label-m-font-style: italic;
  --label-m-font-weight: 400;
  --label-m-font-family: var(--font-family-body);
}

/*------------------------------------*\
  #BASE
\*------------------------------------*/

/*------------------------------------*\
  #BASE-FORMS
\*------------------------------------*/

/**
* Add "*" for every label inside a required field wrapper
*
* DOM structure dependency:
*   form > div > [aria-required="true"] sibling of label
*
* If Elementor or your forms plugin changes this structure, this selector
* will stop working. Check the Elementor form widget HTML if asterisks
* disappear after updates.
*
* Why this approach:
*   - User-friendly norm to indicate required fields
*   - Avoids hardcoding asterisk in HTML
*   - Prevents inconsistencies due to forgetfulness
*   - Respects ARIA accessibility attributes
*/

form div:has([aria-required="true"]) > label::after,
label:has(+ span [aria-required="true"])::after {
  content: "*";
}

/**
* Base form element styling
*
* Universal styles that apply to all forms across the site
* Sets default spacing and typography for semantic form elements
*/

fieldset {
  border: none;
  padding: 0;
  margin-top: var(--space-l);
}

fieldset legend {
  font-family: var(--e-global-typography-8a153b3-font-family);
  font-size: var(--e-global-typography-8a153b3-font-size);
  font-weight: var(--e-global-typography-8a153b3-font-weight);
  line-height: var(--e-global-typography-8a153b3-line-height);
  color: white;
  margin-bottom: var(--space-s);
  width: 100%;
  border-bottom: solid 1px var(--color-blue-200);
  padding-bottom: var(--space-2xs);
}

form label {
  margin-bottom: var(--space-3xs);
}

form .form-footer {
  margin-top: var(--space-l);
}

.page form .wpcf7-list-item input[type="checkbox"] {
  padding: var(--space-l);
}

/*------------------------------------*\
  #BASE-TYPOGRAPHY
\*------------------------------------*/

/**
* Improve text rendering
*
* Text-wrapping behavior:
* text-wrap: balance — better widow/orphan control for headings
* text-wrap: pretty — optimized hyphenation and line-break for body
*
* 1. Yet another dic-, hum, div measuring contest with Elementor...
*/

h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
max-width: var(--text-width--title);
}

p, li, blockquote, span,
.page .elementor .elementor-element .e-con-inner .elementor-widget-text-editor /* [1] */{
  text-wrap: pretty;
  max-width: var(--text-width--content);
}

/**
* Add proper spacing inside text editor
*
* Since Elementor isn't capable of handling it with intelligence.
*/

.elementor-widget-text-editor {
  & li, & p { margin-bottom: 1em; }
  & ul, & ol { margin-top: 1em; }
  & p:last-of-type { margin-bottom: 0; }
}

/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/

/*------------------------------------*\
  #COMPONENTS-BESPOKE-SECTION
\*------------------------------------*/
/**
* Styling "Jouez à la Marelle" section
* Deal with balancing left bleed image and introduction container
* on smaller screens in order to avoid a big empty space on the right.
*
*
* Block: .bespoke-section
* Elements: __introduction, __grid, __card
*
*/

.bespoke-section {
  container: bespoke-section / inline-size;
}

@container bespoke-section (max-width: 49.25rem) {
  .bespoke-section .bespoke-section__introduction {
    margin-left: var(--space-s-2xl);
  }
}

/**
* Add spacing between cards once they stack on smaller screens
*/

@media screen and (max-width: 61.125rem) {
  .bespoke-section__grid .bespoke-section__card:not(:last-of-type) {
    margin-bottom: var(--space-s);
  }  
}

/*------------------------------------*\
  #COMPONENTS-BUTTONS
\*------------------------------------*/

/**
* Apply corner cut effect to buttons
* Elementor applies corner cut to the wrapping div instead of the a tag
* For this reason, we target the a tag child of the btn classes
*
* Top-left corner cut on buttons
*
*/

.btn--cut a {
  --notch: var(--space-xs);
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}

/**
* Remove underline on buttons
*
*/
.btn a {
  text-decoration: none;
}

/**
* Make buttons full width on smaller screens
*
* We're engaging in a priority war with Elementor here.
*/
@media screen and (max-width: 32rem){
  .page .elementor .elementor-element .btn-container,
  .page .elementor .elementor-element .btn,
  .page .elementor .elementor-element .btn a,
  .page .elementor .elementor-element .btn--cut, 
  .page .elementor .btn-container .btn,
  .page .elementor .btn-container .btn a {
    width: 100%;
  }
}

/*------------------------------------*\
  #COMPONENTS-CONFIDENTIAL-PAGE
\*------------------------------------*/
/**
* Confidential page columns
*
* Styling the "En bref" / "En détail" column system.
* Easier to change things here than in Elementor.
*/
.confidential-page__column {
  --container-width--confidential: clamp(min(100%, 20rem), calc(50% - var(--space-xl)), 66ch);
  
  width: var(--container-width--confidential);
}

/*------------------------------------*\
  #COMPONENTS-CONTACT-FORM
\*------------------------------------*/

/**
* Contact form component
*
* Styles specific to the contact form in #contact-section
* Handles form control wrapping, field hints, validation messages,
* conditional field display logic, and GDPR notices
*
* Block: #contact-section (wrapper)
* Elements: .field-hint, .gdpr-notice, .conditional-section, .hidden-field
*
* Some parts use Elementor generated variables which is a brittle way
* of doing things. But the idea that the fonts are tied
* to a font style at the website scale override the fear
* of code breaking.
*/

/**
* Form control wrapper spacing
*
* Handle spacing between fields and make sure field hints aren't far from
* their select or input field.
*
* Engage in specificity battle with Elementor
*/

form .wpcf7-form-control-wrap {
  display: block;
  max-width: 100%;
  margin-bottom: var(--space-s);
}

form .wpcf7-form-control-wrap:has(+ .field-hint),
form .wpcf7-form-control-wrap:has(+ fieldset) {
  margin-bottom: var(--space-3xs);
}

/**
* Field styling
*
* Style input, selector and other checkboxes
*/

.wpcf7-form-control:not([type="submit"]) {
  display: block;
  width: 100%;
}

select.wpcf7-form-control {
  appearance: none;
  font-size: var(--font-size-base);
  font-family: var(--font-family-body);
  padding: 0.75em 1em;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%232a3b8f%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 0.65em auto;
}

.checkbox-stack .wpcf7-checkbox,
.radio-stack .wpcf7-radio {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
}

.wpcf7-list-item label {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    cursor: pointer;

    & input[type="checkbox"],
    & input[type="radio"] {
      width: var(--space-s);
      height: var(--space-s);
      display: block;
      cursor: pointer;
    }
}

/**
* Field hints and labels styling
*
* Style helper text that appears below form fields
*/

form .field-hint, #services-label, .gdpr-notice {
  font-size: var(--label-m-font-size);
  line-height: var(--label-m-line-height);
  font-style: var(--label-m-font-style);
  font-weight: var(--label-m-font-weight);
  font-family: var(--label-m-font-family);
  color: var(--color-blue-200);
  display: block;
}

form .field-hint { margin-bottom: var(--space-s); }
form .field-hint:last-child { margin-bottom: 0px; }
#services-label { margin-bottom: var(--space-xs); }

/**
* GDPR notice styling
*
* Displays privacy policy information with proper spacing and link styles
*/

.gdpr-notice {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-3xs);
  max-width: var(--text-width--content);
}

.gdpr-notice a {
  text-decoration: underline;
  transition: 0.3s ease;

  &:hover{
    color: var(--color-orange-200);
  }
}

/**
* Button states for contact form
*
* Hover and focus states for form submission buttons
*/

.wpcf7 form input.btn:hover,
.wpcf7 form input.btn:focus {
  color: var(--color-orange-500);
  background-color: var(--color-orange-200);
}

/**
* Display logic for JavaScript-controlled fields
*
* Hides and displays fields based on user choices
* Conditional sections are toggled by JavaScript based on form state
*/

.conditional-section {
  display: none;
}

.conditional-section.invoice-fields,
.conditional-section.visit-fields {
  /* Grid properties will be inherited from .form-section */
  /* JavaScript will toggle display between 'none' and 'grid' */
}

/**
* Hidden field for JavaScript/URL-controlled values
*
* Visually hidden but accessible to assistive technologies
*/

.hidden-field {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
* Screen reader only content
*
* Content for ARIA announcements that should not be visually displayed
*/

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/**
* Form validation and response messages
*
* Styles for Contact Form 7 response outputs (success, error, invalid)
* and inline validation error messages
*/

#contact-section .wpcf7-form {
  & .wpcf7-response-output {
    width: fit-content;
    padding: var(--space-s);
    margin: 0px;
    margin-top: var(--space-xs);

    font-family: var(--body-s-font-family);
    font-size: var(--body-s-font-size);
    font-weight: var(--body-s-font-weight);

    border: none;
  }

  &.sent .wpcf7-response-output {
    background-color: #effcc3;
    color: #5b9e10;
  }

  &.invalid .wpcf7-response-output {
    background-color: var(--color-orange-200);
    color: var(--color-orange-500);
  }

  &.failed .wpcf7-response-output {
    background-color: #fcc3c3;
    color: #9e1010;
  }

  & .wpcf7-not-valid-tip {
    font-family: 'Simplon Mono', monospace;
    width: fit-content;
    color: #fcc3c3;
    background-color: #9e1010;
    margin-top: var(--space-3xs);
  }
}

/*------------------------------------*\
  #COMPONENTS-HEADER
\*------------------------------------*/

/**
* Colapse left column for home header
* 
* Left column takes too much real estate at smaller screens
* Logo can overflow to keep being displayed without the column
*
* 1. Enable container queries
* 2. Use media queries for header (can't use container queries on itself)
*/

#home-header {
  container-type: inline-size;
  container-name: home-header;
  grid-template-columns: minmax(8rem, min(15vw, 12.5rem)) 1fr;
}

.home-header__hero {
  padding-left: var(--space-m-l);
}

@media (max-width: 45rem) {
  #home-header {
    grid-template-columns: 0 1fr;
  }
}

@container home-header (max-width: 45rem) {

  .home-header__left-column {
    width: 0;
  }

  .home-header__left-column > *:not(.home-header__logo) {
    display: none;
  }

  .home-header__hero {
    padding-top: var(--space-2xl);
    padding-inline: var(--space-xs);
  }
}


/**
* Center the layout for smaller screens
*
* Make buttons width 100%
* Align items on the center
* Text-align center
*
*/

@container home-header (max-width: 32rem) {
.elementor .elementor-element .home-header__hero .e-con-inner{
    padding-top: var(--space-2xl);
    text-align: center;
    align-items: center;
  }

  .home-header__btn-container,
  .home-header__btn-container a {
    width: 100%;
    align-items: center;
  }
}
/*------------------------------------*\
  #COMPONENTS-FAQ
\*------------------------------------*/
/**
* Add transition delay to FAQ items
*
* Elementor somehow doesn't provide that...
*/

details.e-n-accordion-item * {
  transition: 0.3s ease;
}

.e-n-accordion .e-n-accordion-item summary.e-n-accordion-item-title {
  padding-bottom: var(--space-xs);
}

/*------------------------------------*\
  #COMPONENTS-FOOTER
\*------------------------------------*/
/**
* Colapse footer grid into a single column at breakpoint
* .e-con-inner class is targeted because in pure Elementor nesting "logic"
* the div that holds the custom ID isn't the one that has the grid rules.
*/

@media screen and (max-width: 55rem){
    #main-footer .e-con-inner {
      grid-template-columns: auto;
      gap: var(--space-m);
      justify-content: center;
    }
}


/*------------------------------------*\
  #COMPONENTS-LOCATION-GRID
\*------------------------------------*/
/**
* Location grid components
*
* Used for displaying event spaces with title, location, and capacity
* Applied to Elementor container widgets arranged in grid layout
*
* Style title block instead of nesting them in containers.
* Space cards when they stack in columns on smaller screens.
* Center title elements at the bottom of cards on smaller screens.
*
* Block: .location-grid
* Elements: __card, __title
*
* 1. Priority war with elementor.
* 2. Had to give up container query on the account of Safari sucking balls.
*/

.location-grid__title {
  background-color: white;
  border: solid 1px var(--color-orange-300);
}

@media screen and (max-width: calc(48rem)) { /* [2] */
  .location-grid .location-grid__card {
    margin-bottom: var(--space-m);
  }
}


@media screen and (max-width: 40rem) {
  .elementor-element .e-con-inner .location-grid .location-grid__card .location-grid__title { /* [1] */
    transform: translate(-50%, -50%);
    left: 50%;
    top: calc(100% - var(--space-l));
    bottom: unset;
  }
}

/*------------------------------------*\
  #COMPONENTS-LOGO-BANNER
\*------------------------------------*/

/**
 * Logo banner component
 * 
 * Displays client/partner logos with balanced visual weight.
 * Scale factors are calculated server-side (PHP) and injected
 * as --scale-factor on each image.
 *
 * Block: .logo-banner
 * Elements: __item (individual logo container)
 */

.logo-banner {
    /* Fallback for browsers without clamp() support */
    --base-height: 2.5rem;
    /* Modern browsers will use this instead */
    --base-height: clamp(2rem, 5vw, 3rem);
}

.logo-banner__item {
    width: fit-content;
}

.elementor .elementor-element .logo-banner .logo-banner__item img {
    /* Fallback inside var() as final safety net */
    height: calc(var(--base-height) * var(--scale-factor));
    width: auto;
}

/*------------------------------------*\
  #COMPONENTS-NAVIGATION-MENU
\*------------------------------------*/

/**
* Styling navigation menu
* Keep it responsive and accessible
*
* Block: .main-navigation
* Elements: __hamburger-button, __hamburger-icon, __items
*
*/
.main-navigation {
  display: flex;
  width: 100%;
  flex-direction: row;
  border-color: var(--color-blue-600);
  border-left: 1px solid;
  z-index: 10000;
}

.main-navigation__items {
  display: flex;
  gap: var(--space-s);
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;

  font-family: var(--body-s-font-family);
  font-size: var(--body-s-font-size);
  font-style: var(--body-s-font-style);
  font-weight: var(--body-s-font-weight);
  line-height: var(--body-s-line-height);
  text-transform: uppercase;
  color: var(--color-blue-600);

  & a {
    color: inherit;
    text-decoration: none;
    transition: 0.3s;
  }

  & a:hover {
    color: var(--color-orange-500);
    border-color: var(--color-orange-500);
  }

  & li:first-of-type {
    margin-left: auto;
  }

  & .main-navigation__item--border {
    padding: var(--space-3xs) var(--space-s);
    border: dotted 1px var(--color-blue-600);
  }

  & .main-navigation__cta {
    margin-left: auto;
    display: flex;
    
    & a {
      color: var(--color-blue-100);
      background-color: var(--color-blue-600);
      padding: 1.5em 3em;

      --notch: var(--space-xs);
      clip-path: polygon(
        0 0,
        calc(100% - var(--notch)) 0,
        100% var(--notch),
        100% 100%,
        0 100%
      );

      &:hover{
        color: var(--color-orange-500);
        background-color: var(--color-orange-200);
      }
    }
  }
}

.main-navigation__hamburger-button {
  display: none;
}

/**
* Responsive hamburger navigation
*/

@media screen and (max-width: 60rem) {
  #main-navigation__wrapper {
    grid-template-columns: 0px 1fr;
  }

  .main-navigation {
    position: relative;
    border: none;
    margin-bottom: -100%;
  }

  .main-navigation__hamburger-button {
    display: block;
    background: transparent;
    border: none;
    padding: var(--space-xs);
    cursor: pointer;
    z-index: 99999;
    position: relative;
    margin-left: auto;
  }

  .main-navigation__hamburger-icon {
    display: block;
    width: 1.5rem;
    height: 1.125rem;
    position: relative;

    & span {
      display: block;
      height: 2px;
      width: 100%;
      background: currentColor;
      position: absolute;
      left: 0;
      transition: all 0.3s ease;
    }

    & span:nth-child(1) { top: 0; }
    & span:nth-child(2) { top: 50%; transform: translateY(-50%); }
    & span:nth-child(3) { bottom: 0; }
  }
  
  .main-navigation__hamburger-button[aria-expanded="true"]
  .main-navigation__hamburger-icon span:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .main-navigation__hamburger-button[aria-expanded="true"]
  .main-navigation__hamburger-icon span:nth-child(2) {
    opacity: 0;
  }

  .main-navigation__hamburger-button[aria-expanded="true"]
  .main-navigation__hamburger-icon span:nth-child(3) {
    bottom: 50%;
    transform: translateY(50%) rotate(-45deg);
  }

  .main-navigation__items {
    position: fixed;
    top: 0;
    right: 0;
    width: min(80vw, 25rem);
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);

    /* Hide off-screen by default */
    transform: translateX(100%);
    transition: transform 0.3s ease;

    /* Stack vertically */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--space-m) var(--space-xs) var(--space-xs);

    /* Ensure menu is above overlay */
    z-index: 10000;
  }

  .main-navigation__items.is-open {
    transform: translateX(0);
  }

  .main-navigation__items li:first-of-type,
  .main-navigation__items .main-navigation__cta {
    margin-left: 0px;
  }

  .main-navigation__items a {
    display: block;
    padding: var(--space-3xs) var(--space-s);
    margin-bottom: var(--space-m);
  }

  .main-navigation__items .main-navigation__cta,
  .main-navigation__items .main-navigation__cta a {
    text-align: center;
    width: 100%;
  }

  /* Optional: Overlay backdrop */
  .menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 9999;
  }

  .menu-overlay.is-open {
    opacity: 1;
    visibility: visible;
  }
}



/*------------------------------------*\
  #COMPONENTS-OFFER-SECTION
\*------------------------------------*/
/**
* Styling title card for the offer blocks
* Set background color and custom width
*
* Not possible on title widget in Elementor GUI
* Doing it through CSS avoids resource consuming nesting
*
* Reposition marelle monogram on smaller screens too
* 
* We have to beat Elementor's specificity here.
*
* Block: .offer-section
* Elements: __card, __title
*
*/

.elementor.elementor .e-con-inner .e-con>.offer-section__title {
  max-width: none;
}

.offer-section__title--blue-200 { background-color: var(--color-blue-200); }
.offer-section__title--blue-900 { background-color: var(--color-blue-900); }

@media screen and (max-width: 55rem) {
  .offer-section {
    padding-top: var(--space-3xl);
  }
  
  .offer-section__icon {
    align-self: center;
  }
}

/*------------------------------------*\
  #COMPONENTS-PHOTO-GALLERY
\*------------------------------------*/
/**
* Avoid photos from reseting dimensions when the lightbox is on
* Enabling lightbox link on pictures nest img tags in a tags
* which requires an adaptation to keep the gallery intact.
*/

#photo-gallery a:has(img) {
  height: 100%;
}

/*------------------------------------*\
  #COMPONENTS-SETUP-SECTION
\*------------------------------------*/
/**
* Handles picture bleeding from above
* Makes sure picture doesn't mask the title and that picture
* takes full space on smaller screens once title is out of the way.
*
* We engage in priority war with Elementor here, twice
*/
.page .elementor .elementor-element .setup-section__image {
  max-width: clamp(20rem, 50%, 60rem);
}

.setup-section {
    padding-top: var(--space-m);
  }

@media screen and (max-width: 72rem) {
  .setup-section {
    padding-top: clamp(5rem, 20%, 15rem);
  }

  .setup-section .setup-section__heading,
  .setup-section .setup-section__heading h2,
  .setup-section .setup-section__subheading,
  .setup-section .setup-section__subheading p {
    width: max(calc(20rem - var(--space-m)), 100%);
  }

  .page .elementor .elementor-element .setup-section__image {
    max-width: max(20rem, 100%);
    align-self: center;
  }  
}

/*------------------------------------*\
  #COMPONENTS-SETUP-ASIDE
\*------------------------------------*/

/**
* Calculate fluide spacing for room configuration aside
* 
* Defines how much room is available at all time for icons and calculate how
* the available space impacts the grid set up, specifically the amount of rows.
* With this amount of rows, we can then calculate how much space (row height)
* to add to the padding-top / negative margin-bottom of the impacted elements.
*
* Variables are defined mostly at the root level to be globally accessible.
* 0. I have no idea why this works but not 4 or 5. Spent too much time
*    on this bullshit so I'm saying "good enough" and moving on.
* 1. The section width (wrapper) minus the aside's padding.
*    We don't use the wrapper variable and replace it with 85vw or 1200px
*    because 85% is applied relative to the parent's, which is not what we
*    want to calculate the available width (we want 85% of body) so
*    the view port is a good proxy for the body width here.
*    The * 0.8 is to simulate the 85% space the icon container takes
*    inside its parent.
* 2. There's only x-1 space in the grid where x is the number of icons.
*    As a result, we need to combine the spaces and split among the columns
*    in order to have a column-width that make sense.
* 3. We devide the available width by our column width first.
*    Then, we round it down to have an euclidian division (min. 1)
* 4. We remove 2 row height to the final result because
*    when the grid is only one or two row, we don't want to increase padding.
*/


/**
* Set variables for spacing calculation for the setup aside
*
* We use variables to calculate fluide spacing to keep the aside outside
* of the setup section, as intended in the mock-up, despite the increase
* in the amount of rows for the aside, as screen gets smaller.
*
* Variables are declared here in root so they're available for multiple
* sections that interact with this aside and therefore need to access
* the values.
*
* We need to know how many icons the aside can take at any breakpoint
* and how much space a new row creates. When the grid cannot mathematically
* accomodate all the icons on one row, we know another row-height has been
* added to the setup aside.
*/

:root {
  --icon-min-width: 4.375rem;
  --num-items: 4.00000000005; /* [0] */
  --row-height: 5.5rem;

  --available-width: calc(min(85vw, 1200px) * 0.80 - 58.628px * 2); /* [1] */
  --col-width: calc(var(--icon-min-width) + ((var(--space-l) * (var(--num-items) - 1)) / var(--num-items))); /* [2] */

  --cols-raw: calc(var(--available-width) / var(--col-width));
  --num-cols: max(1, round(down, var(--cols-raw), 1)); /* [3] */

  --rows-raw: calc(var(--num-items) / var(--num-cols));
  --num-rows: min(calc(round(up, var(--rows-raw), 1)), 3);

  --grid-height: calc(var(--num-rows) * var(--row-height));
}

.setup-aside {
  transform: translateY(calc(14rem + var(--grid-height) - var(--row-height) * 1.5)); /* [4] */
}

.location-section {
  padding-top: calc(var(--space-2xl) + var(--grid-height));
}

/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/

/*------------------------------------*\
  #UTILITIES-CORNER-CUTS
\*------------------------------------*/

/**
* Cosmetic corner cuts decoration
* 
* Two-class system:
*   1. Size class sets --notch variable
*   2. Corner class applies clip-path using that variable
*
* 1. Set a default in case no size has been given
* 2. Override default if provided
*/

[class*="corner-cut--"] { /* [1] */
  --notch: var(--space-m);
}

/* [2] */
.u-corner-cut--3xs { --notch: var(--space-3xs); }
.u-corner-cut--2xs { --notch: var(--space-2xs); }
.u-corner-cut--xs { --notch: var(--space-xs); }
.u-corner-cut--s { --notch: var(--space-s); }
.u-corner-cut--m { --notch: var(--space-m); }
.u-corner-cut--l { --notch: var(--space-l); }
.u-corner-cut--xl { --notch: var(--space-xl); }
.u-corner-cut--2xl { --notch: var(--space-2xl); }
.u-corner-cut--3xl { --notch: var(--space-3xl); }

.u-corner-cut--top-left {
  clip-path: polygon(
    var(--notch) 0,
    100% 0,
    100% 100%,
    0 100%,
    0 var(--notch)
  );
}

.u-corner-cut--top-right {
  clip-path: polygon(
    0 0,
    calc(100% - var(--notch)) 0,
    100% var(--notch),
    100% 100%,
    0 100%
  );
}

.u-corner-cut--bottom-left {
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    var(--notch) 100%,
    0 calc(100% - var(--notch))
  );
}

.u-corner-cut--bottom-right {
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - var(--notch)),
    calc(100% - var(--notch)) 100%,
    0 100%
  );
}

/*------------------------------------*\
  #UTILITIES-GRIDS
\*------------------------------------*/

/**
* Dense Grid Layout
* 
* Reorder elements in grid to fill in gaps
* Allow for various aspect-ratio while having dynamic size rows.
* 
*/
.u-grid--dense {
  grid-auto-flow: dense;
}

/*------------------------------------*\
  #UTILITIES-HIGHLIGHTS
\*------------------------------------*/

/**
* Text highlight styles
*
* Applied to wrapper elements, styles the <em> child element
* Allows non-technical users to apply highlights via WYSIWYG italic button
*
* Why target <em>:
*   - Works with Elementor's n-depth wrapper nesting
*   - Users can apply via familiar italic button in editor
*   - Prevents errors from users deleting/modifying span tags
*   - Semantically appropriate for emphasis
*
* Usage: Add .u-highlight with a color modifier to wrapper element
*/

.u-highlight em {
  font-style: normal;
}

.u-highlight--blue em {
  background-color: var(--color-blue-900);
  color: var(--color-orange-200);
}

.u-highlight--orange em {
  background-color: var(--color-orange-500);
  color: white;
}

.u-highlight--white em {
  background-color: white;
  color: var(--color-orange-500);
}

/*------------------------------------*\
  #UTILITIES-OVERFLOW
\*------------------------------------*/

/**
* Add overflow to wrappers
* Allows for graphic elements to overlap sections/columns
*/

.u-overflow--x { overflow-x: visible; }
.u-overflow--y { overflow-y: visible; }

/*------------------------------------*\
  #UTILITIES-SCREEN-READER
\*------------------------------------*/

/**
* Hide text meant for screen readers
*/

.u-screen-reader-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/*------------------------------------*\
  #UTILITIES-TEXT-ALIGN
\*------------------------------------*/

/**
* Responsive text alignment using container queries
*
* Automatically switches text alignment based on container width rather than
* viewport width. This makes the component context-aware and reusable.
*
* Behavior:
*   - Wide containers (>50rem): Text centers for visual balance
*   - Narrow containers (≤50rem): Text aligns left for readability
*
* Threshold of 50rem (~800px) chosen to match optimal reading line length
*
* Applied to: Section containers that need responsive text alignment
* Note: Fighting Elementor again on priority rules...
*/

.u-text-align--responsive {
  container-type: inline-size;
  container-name: text-align-context;
}

@container text-align-context (max-width: 50rem) {
  .u-text-align--responsive h2,
  .u-text-align--responsive .elementor-element.elementor-widget-text-editor,
  .u-text-align--responsive .elementor-element.elementor-widget-text-editor p {
    text-align: left;
    align-self: flex-start;
  }
}

/*------------------------------------*\
  #UTILITIES-TEXT-DECORATORS
\*------------------------------------*/

/**
* Add cosmetic content before or after text
*
* Applied to Elementor widget wrapers, targets text elements at any depth
*
* Usage:
*   - Underscore before — Section headings, list items
*   - Underscore after — Primary/secondary buttons, card titles
*   - Arrow before — Titles acting as list items
*   - Arrow after - Reserved for future use (semantic completeness)
*
* Design choice:
*   Elementor's wrapper depth is inconsistent:
*       * Headings: Direct children (n-1)
*       * Paragraphs: Nested 2-3 level deep (n-2, n-3)
*       * Buttons: Text wraped inside a .elementor-button-text class
*
*   As a result, we use descendant selector to handle all cases.
*   - Risk: Affect all nested elements of same type
*   - Mitigation: Keep Elementor widgets granular (one text element per widget)
*/

.u-underscore--before{
  h1::before, h2::before, h3::before,
  h4::before, h5::before, h6::before,
  p::before, li::before{
    content: "_";
  }

  .elementor-button-text::before {
    content: "_";
  }
}

.u-underscore--after {
  h1::after, h2::after, h3::after,
  h4::after, h5::after, h6::after,
  p::after, li::after{
    content: "_";
  }

  .elementor-button-text::after {
    content: "_";
  }
}

.u-arrow--before {
  h1::before, h2::before, h3::before,
  h4::before, h5::before, h6::before,
  p::before, li::before{
    content: "→ ";
  }

  .elementor-button-text::before {
    content: "→ ";
  }
}

.u-arrow--after {
  h1::after, h2::after, h3::after,
  h4::after, h5::after, h6::after,
  p::after, li::after{
    content: "→ ";
  }

  .elementor-button-text::after {
    content: "→ ";
  }
}