/*
Theme Name: Inverlonan
Version: 1.5
Author: Addedlovely
*/

:root {
  
  /* Structure */
  --header-height: 190px;
  --header-height-large: 330px;
  --footer-height: 480px;
  --padding: 100px;
  --container-width: 1380px;
  --container-medium: 1180px;
  --container-narrow: 1020px;
  --grid-gap: 50px;  
  --margin: 70px;
  --button-size:44px;

  /* Typography */
  --serif:  "cordale", serif;
  --font-x-small: 14px;
  --font-small: 18px;
  --font-regular: 20px;
  --font-medium: 22px;
  --font-large: 28px;
  --font-x-large: 32px;
  --font-xl-large: 48px;
      
  /* Colours */
  --black: #000000;
  --white: #FFF;
  --light-blue: #c1ccd7;  
  --blue: #809eb2;
  
  /* Transitions */
  --transition-fade: 0.2s ease-out opacity, 0.2s ease-out visibility;
  --transition-color: 0.2s ease-out color;
  --transition-menu: 0.2s ease-out color, 0.2s ease-out background;
  --transition-transform: 0.2s ease-out transform;
  --transition-height: 0.2s ease-out max-height, 0.2s ease-out clip-path;
  --transition-color-background: 0.2s ease-out color, 0.2s ease-out background;
  
  /* Swiper */
  --swiper-pagination-bullet-width: 6px;
  --swiper-pagination-bullet-height: 6px;
  --swiper-pagination-color: #000;
  --swiper-pagination-bullet-inactive-color: var(--light-blue);
  --swiper-pagination-bullet-inactive-opacity: 1;
  
  /* Plyr */
  --plyr-video-control-background-hover: #000;
}

/* Colours */
.black { color:var(--black); }
.white { color:var(--white); }
.blue { color:var(--blue); }
.light-blue { color:var(--light-blue); }
.bg-black { background:var(--black); }
.bg-white { background:var(--white); }
.bg-blue { background:var(--blue); }
.bg-light-blue { background:var(--light-blue); }

/* Structure */
html, body { height: 100%; display: flex; flex-direction: column; }
.container { margin-left: auto; margin-right: auto; max-width: var(--container-width);  width: 100%; padding: 0 var(--padding); }
.container.narrow { max-width: var(--container-narrow); }
.container.medium { max-width: var(--container-medium); }
.grid { grid-gap:var(--grid-gap); }
.image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.margin-top { margin-top:var(--margin); }
.margin-bottom { margin-bottom:var(--margin); }
.layout { padding-top:var(--padding); padding-bottom:var(--padding); text-align: center; }
.underline { text-decoration: underline; text-underline-offset: 8px; }

/* Typography */
body { font-family: var(--serif); color: var(--black); background: var(--white); line-height: 1.333333333333333; font-size: var(--font-medium); }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: bold; font-size: inherit; }
.font-x-small { font-size: var(--font-x-small); }
.font-small { font-size: var(--font-small); }
.font-regular { font-size: var(--font-regular); }
.font-medium { font-size: var(--font-medium); }
.font-large { font-size: var(--font-large); line-height: 1.2; }
.font-x-large { font-size: var(--font-x-large); line-height: 1.2; }
.font-xl-large { font-size: var(--font-xl-large); line-height: 1.2; }

/* Form */
.button { height: 48px; display: inline-block; border: 1px solid currentcolor; padding: 0 28px; line-height: 46px; text-transform: uppercase; font-size:var(--font-regular); margin-left: auto; margin-right: auto; }
.button-alt { font-size: var(--font-regular); text-transform: uppercase; display: inline-block; margin-top:30px; }

/* Swiper */
.swiper { z-index: 0; }
.swiper-pagination { display: flex; justify-content: center; position: static;}
.swiper-pagination-bullet { cursor: pointer; }

/* Lightbox */
.baguetteBox-button, .baguetteBox-button:focus, .baguetteBox-button:hover { background: none; }
.baguetteBox-button polyline, .baguetteBox-button line { stroke:#000; }
#baguetteBox-overlay .full-image img { box-shadow: none; padding:100px; }

/* Plyr */
.plyr__poster { background-size: cover; }

/* ==========================================================================
  Header
 ========================================================================== */
.header { top:0; left: 0; right: 0; height: var(--header-height); z-index: 1; }
.header-logo {  left: 0; right: 0; top:0; bottom: 0; margin: auto;  width: 294px; height: 28px; }
.header-buttons, .button-menu  { top:0; bottom: 0; margin: auto; }
.header-buttons { right: var(--padding); grid-gap:8px; top:43px; }
.header-buttons a { width: 100%; }
.header-buttons span { display: none; }
.button-menu { left: 135px; width:40px; height: 33px; display: flex; flex-direction: column; padding: 0; }
.button-menu span { background: currentcolor; width: 28px; height: 4px; display: block; }
.button-menu span:nth-of-type(2) { width: 100%; margin: auto 0; }
.button-booking-secondary { text-transform: capitalize; }

/* Menu */
.menu { z-index: 1; left: 0; right: 0; line-height: 1.6; padding: 32px 0; transform: translateY(-100%); transition: var(--transition-transform); pointer-events: none; grid-gap:28px; }
.menu-bothys { min-width: 13%; }
.menu-pages { min-width: 36%; columns: 2; column-gap: 28px; /* padding-top: 32px; */ }
.menu-booking { text-align: center; margin-top: 39px; margin-right:0; }
.button-menu-close { width: 30px; height: 30px; margin-top: auto; margin-bottom: auto; padding: 0; margin-left:34px; margin-right: auto; }
.show-menu .menu { transform: translateY(0); pointer-events: auto; }

/* ==========================================================================
  Layouts
 ========================================================================== */

/* Hero */
.layout-hero { overflow: hidden; z-index: 0; }
.hero-image { aspect-ratio: 1380/766; }
.hero-image:before { content:''; height: 32%; top:-6.5%; left: 0; right: 0; position: absolute; background: linear-gradient(180deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); z-index: 1; }
.hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-image .swiper { height: 100%; }
.hero-image-caption { left:0; right: 0; bottom: 32px; text-align: right; box-sizing: border-box; }
.hero-caption { left: 0; right: 0; width: auto; }
.hero-subtitle { display: block; margin-top:10px; }

/* Text */
.layout-text h2 { margin-bottom: 14px; }
.layout-text h2.center { margin-bottom: 36px; }
.layout-text h3 { margin-bottom: 10px; margin-top: 34px; }
.layout-text h3.subtitle { margin-top:30px; text-wrap:balance; }
.layout-text h3 + br { display: none; }
.layout-text p { margin-bottom: 32px; }
.layout-text ul { padding-left:15px; }
.layout-text li { margin-bottom: 24px; margin-left: 15px; list-style-position: outside; }
.layout-text p:last-of-type { margin-bottom: 0; }
.layout-text .font-large { line-height: 1.35; }

/* Text : Columns */
.layout-text-columns p { margin-bottom: 14px; }

/* Text & Image */
.layout-text-image article, .layout-text-image figure { grid-row:1; }
.layout-text-image.text-left article { grid-column: 1; }
.layout-text-image.text-left figure { grid-column: 2; }
.layout-text-image h2 { margin-bottom: 14px; }

/* Quote */
.layout-quote .container { max-width: 1220px; }
.layout-quote cite { margin-top:8px; }

/* Images */
.layout-images .is-landscape { grid-row: span 1; aspect-ratio: 360 / 255; }
.layout-images .is-portrait { grid-row: span 2; aspect-ratio: 360 / 560; }

/* Banners */
.layout-banners.text-below .banner-title { padding:20px 0 26px 0; }
.layout-banners.text-below .banner-title + .banner-subtitle { margin-top:-26px; }
.banner-subtitle { font-weight: normal; }
.banner-image { aspect-ratio: 566/400; }
.banner-caption { top:0; left: 0; bottom: 0; right: 0; display: flex; background: rgba(0,0,0,0.2); align-items: center; justify-content: center; }

/* Video */
.plyr .plyr__control--overlaid { padding: 0; height: 92px; width: 92px; background: url('assets/images/icon-play.svg') no-repeat; background-size: 100% auto; }
.plyr .plyr__control--overlaid svg { display: none; }
.plyr .plyr__control--overlaid:hover { background: url('assets/images/icon-play.svg') no-repeat; background-color: #000; background-size: 100% auto;}

/* Press */
.press-logo { aspect-ratio: 4/3; display: block; }
.press-logo img { object-fit: contain; box-sizing: border-box; }

/* Award */
.award-logo { aspect-ratio: 1/1; max-width: 160px; margin: auto auto 40px auto; }
.award-logo img { object-fit: contain; }


/* ==========================================================================
  Footer
 ========================================================================== */
.footer { min-height: var(--footer-height); padding: 50px 0; margin-top: auto; }
.footer-menu-item { padding: 5px 0; border-bottom: 1px solid currentcolor; max-width: 200px; }
.footer-contact address { margin-bottom: 28px; }
.footer-contact .underline { margin-top: 28px; }
.footer-social { width: 32px; height: 32px; margin-top:auto; }
.footer-credit { color:#848489; font-size:12px; max-width: 200px; grid-column-start: 3; text-align: right; margin-top: -66px;}

/* ==========================================================================
  Modal
 ========================================================================== */
.modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; display: flex; background: rgba(255,255,255,0.6); padding: var(--padding); }
.modal[aria-hidden='true'] { display: none; }
.button-modal-close { width: var(--button-size); height: var(--button-size); stroke: currentcolor; top:0; right:0; padding:10px; }
.button-modal-close svg { width: 20px; height: 20px; margin: auto; }

/* Modal : Form */
.modal-form { width: 100%; max-width: 400px; margin: auto; padding: 40px; flex-direction: column; background-color: #d4dbe3; }
.modal-form h3 { text-align: center; margin-bottom:30px; }

/* ==========================================================================
 Media Queries
 ========================================================================== */
/* Support Hover events  */
@media (hover: hover) {
  /* Header */
  .button-booking { transition:var(--transition-color-background); }
  .button-booking:hover { background: var(--white); color:var(--black); border-color: var(--white); }

  /* Menu */
  .menu-item { transition:var(--transition-fade); }
  .menu-item:hover { opacity: 0.5; }
  .menu-booking { transition:var(--transition-color-background); }
  .menu-booking:hover { background: var(--black); color:var(--light-blue); }
}

@media screen and ( max-width: 1240px ) {
  
  /* Header : Tuck */
  .button-menu { left: var(--padding); }
  .button-booking { right: var(--padding); }
  .button-menu-close { margin-left: 0; } 

}

@media screen and ( max-width: 1024px ) {

  :root { 
    --padding: 40px;
  }

} 

@media screen and ( min-width: 801px ) {

  /* Header : Large Logo */
  .header-logo.large-logo { width: 268px; height: 277px;}
  .header-logo.large-logo .icon-logo { display: none; }
  .header.has-large-logo { height: var(--header-height-large); }
  .header.has-large-logo .button-menu { margin-top:79px; }
  .button-booking .desktop { display: block; }

  /* Hero */
  .hero-caption { bottom: 50px; }

}

@media screen and ( max-width: 1024px ) {

  :root { 
    --padding: 70px;
    --grid-gap: 40px;  
    --margin: 50px;
    
    /* Typography : 20% reduction */
    --font-x-small: 12px;
    --font-small: 14px;
    --font-regular: 16px;
    --font-medium: 17px;
    --font-large: 22px;
    --font-x-large: 26px;
    --font-xl-large: 38px;
  }
  
  /* Header */
  .button-menu { left:var(--padding); }
  .button-booking { right:var(--padding); }
  .header-logo.large-logo { width: 214px; height: 222px; }
  
  /* Footer */
  .footer-credit { margin-top: -54px; }
} 

@media screen and ( max-width: 800px ) {

  :root { 
    --padding: 24px;
    --grid-gap: 12px;  
    --margin: 32px;
    --header-height:92px;
    
    /* Typography : 30% reduction */
    --font-x-small: 12px;
    --font-small: 14px;
    --font-regular: 14px;
    --font-medium: 15px;
    --font-large: 14px;
    --font-x-large: 22px;
    --font-xl-large: 22px;

  }
  
  /* Structure */
  .button { height: 36px; padding: 0 28px; line-height: 34px; min-width: 230px; }


  /* Header */
  .header-logo, .header-logo.large-logo { width: 148px; height: 16px; }
  .header-logo .icon-logo-large { display: none; }
  .header-logo.large-logo .icon-logo { display: block; }
  .header-buttons { top:18px; }
  .button-booking { height: 24px; line-height: 22px; padding: 0 12px; min-width: 0; }
  .button-booking .mobile { display: block;}
  .button-menu { width: 26px; height: 22px; }
  .button-menu span { height: 2px; width: 19px; }
  
  /* Menu */
  .menu { top:0; bottom: 0; font-size: 18px; transform: translateX(-100%); overflow: auto; max-height: 100vh; }
  .menu .container { flex-direction: column; height: 100%; line-height: 2; }
  .menu-pages, .menu-bothys, .menu-booking { max-width: 170px; min-width: 0; width: 100%; margin-left: auto; margin-right: auto; }
  .menu-pages { columns: auto; padding-top:0; }
  .menu-bothys { margin-top:auto; }
  .menu-booking { border: 0; padding: 0; text-align: left; font-weight: bold; font-size: 18px; margin: 0 auto auto auto; height: auto; }
  .menu-booking:before { content:'-'; display: block; }
  .menu-booking:hover { background: none; color: var(--black); }
  .menu-pages { font-weight: bold;}
  .button-menu-close { margin-top:0; margin-bottom:0; margin-left: 0; }
  .show-menu { position: fixed; top:0; left:0; right:0; overflow: hidden; }
  .show-menu .menu { transform: translateX(0); }
  
  /* Layout : Hero */
  .hero-image { aspect-ratio: 375/345; }
  .hero-image.has-caption { opacity: 0.75; }
  .hero-image-caption { display: none; }
  .hero-caption { bottom: 30px; }
  .hero-caption .button-alt { margin-top:20px; }
 
  /* Layout : Images */
  .layout-images { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-images .is-portrait { aspect-ratio: 158 / 236; }
  
  /* Layout : Text */
  .layout-text p { margin-bottom: 16px; }
  .layout-text h3.subtitle { margin-top:10px; }

  /* Layout : Text & Image */
  .layout-text-image { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .layout-text-image figure { aspect-ratio: 566/400;}
  .layout-text-image article { grid-row: 2; }
  .layout-text-image.text-left figure { grid-column: 1; }
  
  /* Layout : Quote */
  .layout-quote { font-size: var(--font-large); }
  .layout-quote br { display: none; }

  /* Layout : Video */
  .layout-video { padding-left: 0; padding-right:0; } 
  .plyr .plyr__control--overlaid { height: 60px; width: 60px; }

  /* Layout : Banners */
  .layout-banners.grid-cols-3 { grid-template-columns: repeat(1, minmax(0, 1fr)); grid-gap:20px; }
  .layout-banners.grid-cols-3 .banner { padding-bottom: 8px; }
  .layout-banners.text-below .banner-title { padding-top:10px; }
  
  /* Layout : Text Columns */
  .layout-text-columns .grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
  .layout-text-columns .text-column-right { margin-top:-12px; }
  
  /* Layout : Award */
  .award-logo { max-width: 100px; }

  /* Footer */
  .footer { min-height: auto; }
  .footer .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-gap: 32px; }
  .footer-contact { flex-wrap: wrap; flex-direction: row; }
  .footer-contact h3 { width: 100%; }
  .footer-contact address { width: 100%; }
  .footer-contact a { width: 50%; }
  .footer-contact {  grid-column: 1/-1; text-align: center; }
  .footer-menu h3 { padding: 5px 0; }
  .footer-credit { grid-column-start: 2; margin-top: -46px; }
  
  /* Modal */
  .modal { padding: 0; }
  .modal-form { height: 100%; background: #FFF; padding: 40px 0px; }
  #baguetteBox-overlay .full-image img { padding:0; }

} 

@media screen and ( max-width: 350px ) {
    .footer-credit { grid-column:1/-1; margin-top:0; max-width:none; text-align:left; }
}