/*
Theme Name: Mitsi LA
Version: 1.0
Description: WordPress theme for Mitsi LA
Author: INSPIRE
Author URI: http://www.inspiredm.co.uk
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mitsi-la

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

/*** General ***/
* { padding: 0px; margin: 0px; }
p { margin: 10px 0px }
body { font-family: 'gillsanslight', sans-serif; font-size: 20px; background: #f7d3c7; margin:0; font-weight:400; overflow-x: hidden; color: #3f0d12; line-height: 1.5 }
.inwrap { width: 100%; margin: 0 auto; }
.contentwrap { width: 100%; display:flex; flex-direction: column }
.content { width: 90%; margin: 130px auto 0; }
.contenthome { width: 100%; margin: 0 auto; }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { text-decoration:none; color: #3f0d12 }
a img {border:none }
strong { font-family: 'gillsans', sans-serif; }
@font-face { font-family: 'gillsans'; src: url('fonts/GillSans.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'gillsanslight'; src: url('fonts/GillSansLight.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'degular'; src: url('fonts/Degular-Semibold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }
@font-face { font-family: 'meno'; src: url('fonts/meno-display-semibold.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; }

/*** Header ***/
.header { margin: 0 auto; width:100%; position:absolute; z-index: 1000; height: 110px; display: flex; align-items: center; justify-content: center; }
.header .logonavwrapper { display: flex; align-items: center; justify-content: space-between; width: 100% }
.header .logonavwrapper .logo { position: relative; z-index: 10000; max-width:200px; transition: all 0.4s ease-in-out 0s; left: 20px }
.header .logonavwrapper .logo img { display:block; margin: 0 auto; text-align:center; width:100%; height:auto}
.header .headerbuttons { position: absolute; right: 25px; top: 25px; display: flex; align-items: center}
.stick { position: fixed; background: rgba(247,211,199,0.9) }
.mobilebook { display: none}
.mobile-active .logo { width: 150px; left: calc(50% - 75px); bottom: 5px}

.homeintro { opacity: 0; transition: opacity 2s ease; }
.homeintro.is-visible { opacity: 1; }
.homeintrotext { opacity: 0; transform: translateX(-75px); transition: opacity 2s ease, transform 2s ease; }
.homeintrotext.is-visible { opacity: 1; transform: translateX(0); }

.home .nav-left, .home .nav-right { /* opacity: 0; */ transition: opacity 1.5s ease;}
.home .stick .nav-left, .home .stick .nav-right { opacity: 1; }

/*** Navigation ***/
.navigation { text-transform: uppercase; font-weight: 300; position: absolute; right: 20px; }
.navigation ul { list-style:none; display:flex; }
.navigation ul li a:hover { text-decoration:none; }
.navigation li { margin: 0 0 0 20px }
.navigation li.current_page_item { border-bottom: 1px solid #3f0d12}
.navigation li a, .navigation li li a { color: #3f0d12; }
.navigation li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin: 0px; color:#000; flex-direction: column; } 
.navigation li ul ul { margin: -35px 0 0 166px; }
.navigation li:hover ul ul, #subnav li:hover ul ul ul { left: -999em; }
.navigation li:hover ul, .navigation li li:hover ul, .navigation li li li:hover ul { left: auto; }

/*** Mobile Menu ***/
#mobile-menu .sub-menu { display: none; }
#mobile-menu .sub-menu.active { display: block; }
.mobile-active .location li a { }
.menu-toggle { display: none; }
.menu-toggle-label { position: fixed; top:40px; left: 25px; cursor: pointer; z-index: 100000; flex-direction: column; width: 35px; display: none }
.menu-toggle-label span { display: block; width: 100%; height: 2px; background-color: #3f0d12; margin-bottom: 6px; transition: transform 0.3s, opacity 0.3s; transform-origin: center; }
.menu-toggle-label span.visually-hidden { height: 0 !important; margin: 0 !important }
.menu-toggle-label span:last-child { margin-bottom: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.menu-toggle:checked + .menu-toggle-label span:nth-child(2) { opacity: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.mobile { position: fixed; top: 0; left: 0; width: 100%; height: 100%; ; z-index: 999; overflow-y: auto; transition: transform 0.3s ease; transform: translateX(-100%); background: #f7d3c7; flex-direction: column }
.mobile-main { font-size: 3.25em; font-family: 'degular', serif; width:100%; text-transform: uppercase; padding-left: 15px; padding-right: 15px}
.mobile.active { transform: translateX(0%); display: flex; justify-content: center; align-items: center; }
.mobile.active .nav-logo { transform: translateX(0%); display: flex; justify-content: center; align-items: center; }
.mobile-active .menu-toggle-label span { background-color: #3f0d12; }
.menu-mobile-container { width: 100% }
.mobile ul { list-style: none; padding: 0; margin: 0; line-height: 1.1 }
.mobile .mobile-main ul li a { position: relative; color: #3f0d12; text-transform: uppercase }
.mobile .mobile-main ul li a span { font-family: 'meno-display-extra-condensed'; font-weight: 700 }
.mobile-active span.top { transform: translateY(8px) rotate(45deg); }
.mobile-active span.middle { display: none }
.mobile-active span.bottom { transform: rotate(-45deg); margin: 0 0 12px }
.mobile ul.sub-menu { font-size: 0.6em; text-transform: none; margin: 0.5em 0 1em }
.mobile ul.sub-menu li a:hover::before, .mobile ul.sub-menu li a:hover::after { display: none !important }
.mobile li.menu-item-has-children a:hover::before, .mobile li.menu-item-has-children a:hover::after { content: none !important; width: auto; height: auto; background: none; }
.menu-item-has-children > a { position: relative; display: block; text-align: center; }
.toggle-icon {  stroke: currentColor; display: block; }
.toggle-icon .vertical { transition: opacity 0.2s ease; }
.toggle-icon .vertical.hidden { opacity: 0; }

.main-nav { position: relative; width: 100%; z-index: 1000; }
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 1rem 2rem; display: flex; align-items: center; justify-content: center; gap: 2rem; }
.nav-left, .nav-right { list-style: none; padding: 0; display: flex; gap: 2rem; flex: 1; text-align: center; justify-content: center; margin: 1em 0 0; position: relative }
.nav-left li, .nav-right li { margin: 0 0.5em; line-height: 120%; position: relative }
.nav-left li.current-page-item a, .nav-right li.current-page-item a { border-bottom: 2px solid #3f0d12}
.nav-left li span, .nav-right li span { font-size: 15px }
.nav-left a, .nav-right a { text-decoration: none; font-weight: 300; color: #3f0d12; text-transform: uppercase; font-family: 'degular', sans-serif; letter-spacing: 2% }
.nav-left li::after, .nav-right li::after { content: ""; position: absolute; width: 100%; height: 2px; bottom: 0; left: 0; background-color: #3f0d12; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out; }
.nav-left li.current-page-item:hover:after, .nav-right li.current-page-item:hover:after { content: none; }
.nav-left li:hover:after, .nav-right li:hover:after { visibility: visible; transform: scaleX(1); }
.nav-right li.reservations { border: 1px solid #f4f2ea; padding: 5px 10px; border-radius: 3px; transition: border-color 1.5s ease; margin: -6px 0.5em 0 }
.nav-right li.reservations:hover { border: 1px solid #3f0d12; }
.nav-right li.reservations:hover:after { visibility: hidden }
.home .nav-right li.reservations { margin: 0 0.5em }

.nav-logo { flex: 0 0 auto; }
.nav-logo img { display: block; height: 85px; transition: all 0.25s ease-in-out 0s }
.stick .nav-logo img { height: 55px; transition: all 1s ease-in-out 0s}
.home .nav-logo { position: absolute; top: 0; left: 50%; height: 200px; width: 40vw; background: url(images/mitsi-logo.svg) center center no-repeat; background-size: contain; opacity: 1; transform: translate(-50%, calc(50vh - 100px)); transition: opacity 5s ease-in-out, transform 0.7s ease-in-out, width 0.7s ease-in-out, height 0.7s ease-in-out; will-change: transform, width, height, opacity; }
.home .nav-left { position: relative; top: 0; opacity: 1; transform: translate(0%, calc(50vh - 100px)); transition: opacity 5s ease-in-out, transform 0.7s ease-in-out, width 0.7s ease-in-out, height 0.7s ease-in-out; will-change: transform, width, height, opacity; margin: 1em 0 0; display: flex; align-items: center; height: 200px; z-index: 100 }
.home .nav-right { position: relative; top: 0; opacity: 1; transform: translate(0%, calc(50vh - 100px)); transition: opacity 5s ease-in-out, transform 0.7s ease-in-out, width 0.7s ease-in-out, height 0.7s ease-in-out; will-change: transform, width, height, opacity; margin: 1em 0 0; display: flex; align-items: center; height: 200px; z-index: 100 }
.home .nav-left { left: -10%; opacity: 1 }
.home .nav-right { right: -10%; opacity: 1 }
@starting-style { .home .nav-logo, .home .nav-left, .home .nav-right { opacity: 0; } }
.home .stick .nav-left { transform: translate(15%, 0); height: calc(55px - 1em); margin: 0 }
.home .stick .nav-right { transform: translate(-15%, 0); height: calc(55px - 1em); margin: 0 }
.home .stick .nav-logo { height: 55px; width: 400px; transform: translate(-50%, 0); background: url(images/m.svg) center center no-repeat; background-size: contain; opacity: 1; }
.home .nav-logo img { display: none; }

/*** Content ***/
.page { float:left; width:100%; }
.page .postHead { background: none; }
.postContent { padding: 0; max-width: 1200px; margin: 0 auto }
.contenthome .postContent { padding: 0; }
h1, h2, h3, h4, h5, h6 { line-height: 120%; font-family: 'degular', sans-serif;  }
.postContent h1 { font-size: 3em; margin:0.5em 0; text-align: center; text-transform: uppercase; letter-spacing: 2%; font-weight: 200}
.postContent h2 { font-size: 2em; margin:.5em 0; }
.postContent h2 em { font-family: 'meno', serif; font-size: 0.9em }
.postContent h3 { font-size: 1.75em; margin: 0.5em 0; }
.postContent h4 { font-size: 1.5em; margin: 0.5em 0; }
.postContent h5 { font-size: 1.25em; margin: 0.5em 0; }
.postContent h6 { font-size: 1em; margin: 0.5em 0; }
.postContent p { margin: 1.25em 0 ; line-height: 1.25 }
.postContent p a { text-decoration: underline; }
.postContent p a:hover { color: #000 }
.postContent p.clearfaceitalic { font-family: 'ClearfaceItalic', serif; margin: 0 }
.postContent ul { margin: 1em; line-height: 126%; }
.postContent ul li { margin: 1% 0; }
.postContent ol li { padding:5px 0; }
.postContent ol { margin: 1em; line-height: 126% }
.postContent blockquote { font-weight:normal; margin: 2em 0; padding: 0.5em 0.5em 1em ; border-left: 10px solid rgba(0,0,0,1); background: rgba(0,0,0,0.1) }
.postContent blockquote p { margin: 1%; font-size: 1.25em; }
.postContent blockquote cite { margin: 1%; font-size: 1em; }
.postContent hr { margin: 5% 0 }
.postContent img { max-width: 100%; height:auto }
.postContent h1 a { text-decoration: none }
.postContent .gillsans { font-family: 'gillsans'; font-weight: 700 }
.visually-hidden { align-content: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.featuredimage { position: absolute; right: 0; width: 40%; height: 800px; background-size: cover; background-repeat: no-repeat}

/*** Book page menu ***/
.postContent .menu-container { text-align: center; text-transform: none; color: #f7d3c7; font-family: 'degular', serif; }
.postContent .menu-container ul li { position: relative; font-size: 30px; padding-block: 15px; line-height: 1; margin: 0 }
.postContent .menu-container ul li::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: radial-gradient(circle, #f7d3c7 4px, transparent 4px) 10px center, radial-gradient(circle, #f7d3c7 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #f7d3c7 30px, #f7d3c7 calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }
.postContent .menu-container ul li:first-child::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: radial-gradient(circle, #f7d3c7 4px, transparent 4px) 10px center, radial-gradient(circle, #f7d3c7 4px, transparent 4px) calc(100% - 10px) center, linear-gradient(to right, transparent 0, transparent 30px, #f7d3c7 30px, #f7d3c7 calc(100% - 30px), transparent calc(100% - 30px), transparent 100%); background-size: 8px 8px, 8px 8px, 100% 1px; background-repeat: no-repeat; background-position: 10px center, calc(100% - 10px) center, 0 center; }

/*** Specials ***/
.postContent .wp-caption { background: #f8f7eb; border: solid 1px #EBE9D7; text-align: center; padding-bottom: 4px; }
.postContent .wp-caption img { border: solid 5px #f8f7eb; }
.postContent .alignleft { float: left; margin: 0px 15px 5px 0px; display: block; max-width: 50% }
.postContent .alignright { float: right; margin: 0px 0px 5px 15px; display: inline; }
.postContent .wp-caption p { margin: 0px; }
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignfull img { display: block }
.alignwide { max-width: 1300px; margin-left: auto; margin-right: auto }
table td p { margin: 0 }

.menuaccordion h4 { font-size: 1.25em; font-family: 'meno', serif; font-style: italic; margin: 1em 0 0; font-weight: normal}
.menuaccordion p { margin: 0 0 1em 0 }
li.kt-tab-title-active span.kt-title-text { border-bottom: 5px solid #3f0d12}
.kt-accordion-header-wrap span.kt-blocks-accordion-title { font-family: 'gillsanslight', sans-serif; }

/*** Press ***/
.press { display: flex; flex-wrap: wrap; gap: 2%; row-gap: 2em; margin: 0 auto; width: 80% }
.catpost { flex: 0 0 calc(33.3333% - 2%); box-sizing: border-box; }
.catpostimage { aspect-ratio: 6/4; width: 100%; overflow: hidden; position: relative; height: auto; max-height: 300px }
.catpostimage img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1); }
.catpostimage img:hover { transform: scale(1.1, 1.1); }
.catpost h2 { font-size: 1.25em; font-weight: 400; margin: 1em 0; line-height:110%; text-align: center }
.catpost h2 a { color: #3f0d12 }
.catpost p.press-meta { margin: 2em 0 0; display: block; font-size: 0.8em; font-weight: 600; text-transform: uppercase; text-align: center; letter-spacing: 5% }

/*** Footer ***/
.footer { width: 100%; margin: 2em auto 0; display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 0.8em }
.footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { margin: 0.5em 0; font-family: 'degular', sans-serif; }
.footer h2 { font-size: 2.5em; }
.footer h3 { font-size: 2em; }
.footer h4 { font-size: 1.5em; }
.footer h5 { font-size: 1em; }
.footer h6 { font-size: 0.75em; }
.footer a { color: #3f0d12 }
.footer .footer-content { width: 100%; position: relative }
.footer .footer-content h3 { font-size: 1.5em; }
.footer .sidebarItem p { line-height: 1.5; letter-spacing: 5%; }
.footer .footer-content .logo { cursor: pointer }
.home .footer .kadence-columneec39f-6f { visibility: hidden }
.menu-footer-container { margin: 1em 0 ; text-transform: uppercase; }
.menu-footer-container ul { display: flex; padding: 0; margin: 0; list-style: none; flex-wrap: wrap; justify-content: center; font-size: 0.8em }
.menu-footer-container ul li { list-style: none; white-space: nowrap; letter-spacing: 5%; margin: 0 1em 0 0; }
.menu-footer-container ul li a { color: #3f0d12; text-decoration: none; min-height: 44px }


/*** Mobile Footer Menu ***/
.mobile-footer { position: fixed; bottom: 1em; left: 0; width: 100%; }
.mobile-footer ul#mobile-footer-menu { display: flex; justify-content: center; }
.mobile-footer ul#mobile-footer-menu li a { margin: 0 1em; font-size: 1em; color: #3f0d12; display: block }
.mobile-footer ul#mobile-footer-menu li a:hover { color: #776407; }

/*** Skip Links ***/
.skip-link { position: absolute; top: -100px; left: 0; padding: 8px; background: #fff; z-index: 100; }
.skip-link:focus { top: 0; }
.screen-reader-text {  clip: rect(1px, 1px, 1px, 1px); position: absolute !important; height: 1px; width: 1px; overflow: hidden; }

/*** Cookie Notice ***/
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme { background: #f4f2ea !important; z-index: 100000; font-weight: 600 !important}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button { background: #f4f2ea !important }
button.mgbutton.moove-gdpr-infobar-settings-btn:hover { background: #370E01 !important}
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme { border-top: 1px solid #370E01 !important }
.moove-gdpr-button-holder button { border-radius: 3px !important; padding: 10px 25px 8px !important; font-weight: 600 !important; letter-spacing: 2% !important }
.moove-gdpr-button-holder button.moove-gdpr-infobar-allow-all:hover, .moove-gdpr-button-holder button.moove-gdpr-infobar-reject-btn:hover { background: #f4f2ea !important; color: #370E01 !important; border: 1px solid #370E01 !important }

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 1024px) {
.navigation { display: none }
.header .logonavwrapper .logo { max-width:200px; left: 50%; transform: translateX(-50%);}
.nav-instagram, .cream .nav-instagram { left: 5rem; }
.nav-tiktok, .cream .nav-tiktok { left: 8rem; }
.nav-logo { position: relative; top: 0}
.nav-logo img { height: 60px }
.main-nav::before, .main-nav::after, .cream .main-nav::before, .cream .main-nav::after { display: none }
ul.nav-left, ul.nav-right { display: none }
.menu-toggle-label {  display: block }
.mobile-main { font-size: 1.25em; text-align: center; text-transform: none }
.header { height: 90px }
.home .nav-left, .home .nav-right { display: none }
.mobilebook { position: absolute; right: 25px; font-size: 18px; letter-spacing: 1%; font-family: 'degular', serif; display: block; padding: 5px 10px; border: 1px solid #f4f2ea; border-radius: 3px }
.mobilebook:hover { border: 1px solid #3f0d12; }
.mobile .mobile-main ul li { position: relative; padding: 0.4em 0; }
.mobile .mobile-main ul li.reservations { display: inline-block; border: 1px solid #f4f2ea; border-radius: 3px; padding: 5px 10px }
.mobile .mobile-main ul li.reservations:hover { border: 1px solid #3f0d12; }
.contenthome .postContent { max-width: 90% }
.footer-reveal-bg { height: 25vh; }
.footer-panel { margin-top: -10vh; background: none }
.postContent p { font-size: 0.9em }
.postContent h3 { font-size: 1.5em }
}

@media only screen and (max-width : 600px) {
.navigation { display: none }
.header .logonavwrapper .logo { max-width:150px; left: 50%; transform: translateX(-50%);}
ul.nav-left, ul.nav-right { display: none }
.main-nav::before, .main-nav::after, .cream .main-nav::before, .cream .main-nav::after { display: none }
.nav-logo { position: relative; top: 0; left: -12.5%; }
.home .nav-logo { position: absolute; top: -5px; left: 50%; height: 200px; width: 150px; background: url(images/mitsi-logo.svg) center center no-repeat; background-size: contain; transform: translate(-50%, calc(50vh - 100px)); transition: transform 0.7s ease-in-out, width 0.7s ease-in-out, height 0.7s ease-in-out; will-change: transform, width, height; }
.home .mobile-active .nav-logo { transform: none; left: calc(50% - 75px); height: 45px}
.home .stick .nav-logo { height: 45px; width: 200px; }
.home .nav-left, .home .nav-right { display: none }
.nav-logo img { height: 45px }
.stick .nav-logo img { height: 35px }
.mobile-main { font-size: 1.25em; text-align: center; text-transform: none }
.mobilebook { position: absolute; right: 15px; font-size: 14px; letter-spacing: 1%; color: #3f0d12; font-family: 'degular', serif; display: block; margin-top: 10px; padding: 5px 10px; border: 1px solid #f4f2ea; border-radius: 3px }
.mobilebook:hover { border: 1px solid #3f0d12; }
.menu-toggle-label {  display: block }
.mobile .mobile-main ul li { position: relative; padding: 0.4em 0; }
.mobile .mobile-main ul li.reservations { display: inline-block; border: 1px solid #f4f2ea; border-radius: 3px; padding: 5px 10px }
.mobile .mobile-main ul li.reservations:hover { border: 1px solid #3f0d12; }
.header { height: 90px }
.header .careersbutton a.book { display: none }
.contentwrap { flex-direction: column}
.content { width: 100%; margin: 80px auto 0 }
.mobile-footer { bottom: 3em }
.mobile-footer ul#mobile-footer-menu {  }
.postContent, .press { width: 90% }
.catpost { flex: 0 0 calc(50% - 2%); }
.catpost p.press-meta { margin: 1em 0 0; }
.catpost h2 { font-size: 1.1em; margin: 0.5em 0}
.postContent h1 { font-size: 1.5em }
.postContent h2 { font-size: 1.25em }
.postContent h3 { font-size: 1.05em }
.menuaccordion h4 { font-size: 1.1em; }
.menuaccordion p { font-size: 18px; }
.mobile ul li a:hover::before { width: 40px; height: 25px; }
.mobile ul li a:hover::after { width: 40px; height: 25px; background-size: 25px }
.modal-content .mobile-main { font-size: 1.5em  }
.menu-footer-container ul li { margin: 0 0.5em}
.home .footer .kadence-columneec39f-6f { display: none }
}