/* ==========================================================================
   St Michaels local theme - overrides on top of live.css
   live.css is a verbatim port of the Nuxt build. Several of its initial states expect JS (GSAP) to
   animate elements in (hero canvas opacity:0, lazy images opacity:0, menu links opacity:0, accordion
   height:0). We ship those states "resolved" here and add the small amount of behaviour CSS the
   slide-outs/header need. Keep component styling itself in live.css; put per-layout extras in
   assets/css/layouts/<layout>.css.
   ========================================================================== */

/* ---- base: things the live reset does not cover -------------------------------------------- */
body{font:var(--font-body);color:var(--color-faded-nautical);background:var(--color-sun-shadow);-webkit-font-smoothing:antialiased}
button{background:none;border:0;padding:0;margin:0;color:inherit;font:inherit;text-align:inherit;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
.StyleText ul{list-style-type:disc}
.StyleText ol{list-style-type:decimal}
img{max-width:100%;height:auto}
summary{list-style:none}
summary::-webkit-details-marker{display:none}
:focus-visible{outline:2px solid var(--color-burnt-orange);outline-offset:2px}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- media: images/videos render immediately (no lazy-loader in this build) ------------------ */
.MediaImageLazy__image,.MediaImageLazy__image--loaded{opacity:1;animation:none}
.MediaVideoLazy__media,.MediaVideoLazy__media--loaded{opacity:1;animation:none}
.MediaImageLazy>img{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:var(--image-lazy-fit,cover)}
.MediaVideoLazy>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.Hero__media.MediaVideoLazy>video{filter:saturate(1.3)}

/* ---- hero: reveal without GSAP ------------------------------------------------------------- */
.Hero--ready .Hero__canvas{opacity:1;animation:sm-fade-in var(--transition-slow,1.2s) ease both}
.Hero--ready .Hero__content-sections{animation:sm-rise .9s cubic-bezier(.2,.7,.2,1) both;animation-delay:.15s}
.Hero:not(.Hero--media) .Hero__section--media{min-height:0}
.Hero:not(.Hero--media){--hero-height:50vh;padding-top:var(--core-total-header-height)}
.Hero:not(.Hero--media) .Hero__content-sections{padding-top:var(--core-header-height)}
@keyframes sm-fade-in{from{opacity:0}to{opacity:1}}
@keyframes sm-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.Hero--ready .Hero__canvas,.Hero--ready .Hero__content-sections{animation:none}}

/* ---- scroll-reveal states live drives with GSAP: render visible, soft fade-in ------------------ */
.ContentImageTextOverlay__title,.ContentImageTextOverlay__text{opacity:1;animation:sm-fade-in 1s ease both}
.ContentImageTextOverlay__text{animation-delay:.15s}
.ContentCardsFilter__column{opacity:1}
.FormSubmit__section--submit{opacity:1;visibility:visible}
.FormSubmit__section--notice:not([hidden]){opacity:1;visibility:visible}

/* ---- header: sticky, hides on scroll-down, solid once scrolled ------------------------------- */
.CoreHeader{--core-header-position:sticky;transition:var(--core-header-transition),transform var(--transition-medium,.4s ease)}
.CoreHeader:not(.CoreHeader--visible){transform:translateY(-100%)}
.CoreHeader--sticky .StyleUIHeaderButton--direction-ltr{--style-ui-header-button-color:var(--color-faded-nautical)}
.CoreHeader .StyleUIHeaderButton:before{opacity:0}
.CoreHeader .ButtonBook .StyleUIHeaderButton{padding:0 var(--space-md)}
@media (min-width:830px){.CoreHeader .ButtonBook .StyleUIHeaderButton{padding:20px 50px}}
.CoreHeader .ButtonMenu .StyleUIHeaderButton{padding:0 var(--space-md)}
@media (min-width:830px){.CoreHeader .ButtonMenu .StyleUIHeaderButton{padding:20px 50px}}
body.sm-modal-open .CoreHeader{transform:translateY(-100%)}

/* ---- slide-out modals (Menu / Book) --------------------------------------------------------- */
.Layout__overlay{position:relative;z-index:100}
.ModalSlideOut{z-index:100}
.ModalSlideOut[hidden]{display:none}
.ModalSlideOut__tray{transform:translateX(-100%);transition:transform var(--transition-medium,.45s) cubic-bezier(.2,.7,.2,1)}
.ModalSlideOut--direction-rtl .ModalSlideOut__tray{transform:translateX(100%)}
.ModalSlideOut__overlay{opacity:0;transition:opacity var(--transition-medium,.45s) ease}
.ModalSlideOut.is-open .ModalSlideOut__tray{transform:none}
.ModalSlideOut.is-open .ModalSlideOut__overlay{opacity:1}
body.sm-modal-open{overflow:hidden}
.ModalSlideOut__section--header{justify-content:flex-end}
/* live's sticky header/footer gradients sit at z-index 20 over the scrolling links: let clicks pass through */
.ModalSlideOut__section--header:before,.ModalSlideOut__section--footer:before{pointer-events:none}
.ModalSlideOut__section--header,.ModalSlideOut__section--footer{pointer-events:none}
.ModalSlideOut__section--header>*{pointer-events:auto}
.ModalSlideOutBook__footer,.ModalSlideOutMenu__footer{pointer-events:none}
.ModalSlideOutBook__footer a,.ModalSlideOutMenu__footer a{pointer-events:auto}
.ModalSlideOutMenu__social .CoreFooterSocial__icon{height:16px;width:auto;max-width:24px}
.CoreFooterSocial__icon{width:auto}
.ModalSlideOut__section--main{padding-top:var(--space-md)}
.ModalSlideOutMenu__link-item,.ModalSlideOutBook__link-item{opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.12s + var(--sm-i,0)*.05s)}
.ModalSlideOut.is-open .ModalSlideOutMenu__link-item,.ModalSlideOut.is-open .ModalSlideOutBook__link-item{opacity:1;transform:none}
.ModalSlideOutMenu__link .-type-heading--h3{font-size:1.9rem;line-height:1.1}
@media (min-width:1230px){.ModalSlideOutMenu__link .-type-heading--h3{font-size:2.4rem}}
.ModalSlideOutMenu__navigation{padding-top:var(--space-md)}
.ModalSlideOutMenu__footer{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-sm) var(--space-md);width:100%;padding:var(--space-md) calc(var(--container-gutter)*2)}
@media (min-width:1230px){.ModalSlideOutMenu__footer{padding:var(--space-md) calc(12.5% + var(--container-gutter))}}
.ModalSlideOutMenu__social{margin-left:auto}
.ModalSlideOutMenu__social .CoreFooterSocial__links{margin:calc(var(--space-sm)*-1)}
.ModalSlideOutMenu__social .CoreFooterSocial__link{padding:var(--space-sm)}
.ModalSlideOutMenu__social .CoreFooterSocial__icon{height:16px}
.ModalSlideOutBook__links{list-style:none;display:grid;gap:var(--space-lg)}
.ModalSlideOutBook__group-title{display:block;margin-top:var(--space-sm)}
.ModalSlideOutBook__sublinks{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs) var(--space-md);margin-top:var(--space-sm)}
.ModalSlideOutBook__sublink{display:inline-block;padding:var(--space-xs) 0}
.ModalSlideOutBook__frame{width:100%;overflow:hidden}
.ModalSlideOutBook__frame img{width:100%;height:100%;object-fit:cover}
.ModalSlideOutBook__footer{width:100%;text-align:center;padding:var(--space-md) calc(var(--container-gutter)*2)}
.ModalSlideOutBook__footer a{text-decoration:underline}

/* ---- accordion: native <details>, no height animation ---------------------------------------- */
.UIAccordion__content-wrapper{height:auto}
.UIAccordion__details[open] .UIAccordion__summary-icon{transform:rotate(45deg)}
.UIAccordion__summary-icon{transition:transform var(--transition-fast,.25s) ease}

/* ---- carousels: Swiper wiring for live UICarousel / UICarouselFade markup --------------------- */
.UICarousel .swiper,.UICarouselFade .swiper{width:100%;overflow:hidden}
.UICarouselFade .swiper{position:relative;height:100%}
.UICarouselFade .swiper-slide{height:100%}
.UICarouselFade .swiper-slide .UICarouselFade__image{position:relative}
.UICarousel .swiper-slide{height:auto}
.UICarouselControls__button{color:inherit}

/* ---- forms: REST-posted; notice states ------------------------------------------------------- */
.FormSubmit__section--notice{padding-top:var(--space-md)}
[data-sm-form-notice].is-error{color:var(--color-burnt-orange)}
.Form__footnote[data-sm-form-notice]{margin-top:var(--space-md)}

/* ---- dev: missing layout placeholder --------------------------------------------------------- */
.sm-missing{padding:var(--space-lg) 0;background:repeating-linear-gradient(-45deg,rgba(194,99,74,.08) 0 10px,transparent 10px 20px);border-block:1px dashed var(--color-burnt-orange)}
.sm-missing code{font-family:ui-monospace,monospace;background:rgba(27,51,76,.08);padding:.1em .4em}