/*
Theme Name: The Cadogan Arms
Version: 1.0
Description: WordPress theme for The Cadogan Arms
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: cadoganarms

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: 'Libre Baskerville', serif; font-size: 20px; color:#000; margin:0; font-weight:400; background: #fbf7eb; overflow-x: hidden }
.inwrap { width: 100%; margin: 0 auto; }
.contentwrap { width: 100%; display:flex; background: #fbf7eb }
.content { width: 90%; margin: 200px auto 0; }
.contenthome { width: 100%; margin: 0 auto; }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { text-decoration:none; }
a img {border:none }
@font-face { font-family: 'Blacker'; font-style: normal; font-weight: normal; src: url('fonts/blacker_pro_titling-regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Blacker Inline'; font-style: normal; font-weight: normal; src: url('fonts/blacker_pro_titling_inline-regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: normal; font-weight: 400; src: url('fonts/LibreBaskerville-Regular.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Libre Baskerville'; font-style: italic; font-weight: 400; src: url('fonts/LibreBaskerville-Italic.ttf') format('truetype'); font-display: swap; }

/*** Header ***/
.home .header { margin: 0 auto; width:100%; float:left; position:absolute; z-index: 1000; }
.header { margin: 0 auto; width:100%; float:left; position:absolute; z-index: 1000; height: 185px;}
.header::after { content: ""; position: absolute; left: 30px; right: 30px; bottom: 10px; height: 15px; background: linear-gradient( to bottom, #000 0, #000 1px, transparent 1px, transparent 9px, #000 9px, #000 10px, transparent 10px );}
.header .logonavwrapper .logo { position: absolute; z-index: 1000; width:250px; height: auto; left: calc(50% - 125px); top: 25px }
.header .logonavwrapper .logo img { display:block; margin: 0 auto; text-align:center; width:100%; height:auto}
.header .headerbuttons { position: absolute; right: 30px; top: 1em; display: flex; }
.header .headerbuttons button.book, .header .headerbuttons button.stay { border: none; padding: 5px 15px 8px; font-size: 12px; color: #000; text-decoration: none; font-family: 'Blacker',serif; border-radius: 0;  text-align: center; cursor: pointer }
.header .headerbuttons button.book { background: #C6A3A7; }
.header .headerbuttons button.book:hover { background: #570D17; color: #fff; }
.header .headerbuttons button.stay { background: #C5D4E2; margin: 0 10px 0 0 }
.header .headerbuttons button.stay:hover { background: #570D17; color: #fff; }
.header .headerbuttons button.instagram { background: url("images/instagram-black.svg") no-repeat center; height: 30px; width: 30px; margin: 1px 0 0 10px; border: none }
.home .header .headerbuttons button.instagram { background: url("images/instagram.svg") no-repeat center; height: 30px; width: 30px; margin: 1px 0 0 10px; border: none }
.home .stick .headerbuttons button.instagram { background: url("images/instagram-black.svg") no-repeat center; height: 30px; width: 30px; margin: 1px 0 0 10px; border: none }
.header .headerbuttons button.instagram:hover { cursor: pointer }
.home .stick { position: fixed; top: 0; width:100%; z-index: 1000; }
.stick { position: fixed; width:100%; z-index: 1000; background: #fbf7eb}
.home .header .logonavwrapper .logo img { display: none }
.home .stick .logonavwrapper .logo img { display: block }

/*** Mobile Menu ***/
.menu-toggle-label span.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }
.mobile { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; overflow-y: auto; transition: transform 0.3s ease; transform: translateX(-100%); display: flex; justify-content: center; align-items: center; font-size: 1.6em; line-height: 1.5 }
.mobile.active { transform: translateX(0); background: url("images/tcr-coat-of-arms.png") no-repeat center right 50px, #c5d4e2; background-size: 30% }
.menu-toggle { display: none; }
.menu-toggle-label { position: fixed; top:20px; left: 30px; width: 40px; height: 25px; cursor: pointer; z-index: 100000; }
.menu-toggle-label span { display: block; width: 100%; height: 1px; margin-bottom: 8px; background: #000; transition: transform 0.3s, opacity 0.3s; }
.home .menu-toggle-label span { background: #fff }
.home .stick .menu-toggle-label span { background: #000 }
.menu-toggle-label span:last-child { margin-bottom: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(2) { transform: translateY(9.5px) rotate(45deg); background: #000 }
.menu-toggle:checked + .menu-toggle-label span:nth-child(3) { opacity: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(4) { transform: translateY(-9.5px) rotate(-45deg); background: #000 }
ul#mobile-menu-list { list-style: none; text-align: center; text-transform: uppercase; font-family: 'Blacker Inline', serif }
ul#mobile-menu-list li { margin: 0.125em 0; }
ul#mobile-menu-list li a { color: #000; transition: color 0.3s ease; }
ul#mobile-menu-list li a:hover { color: #000; }
ul#mobile-menu-list li.menureservations a { font-size: 16px; font-family: 'Blacker', serif; color: #fff; background: #570d17; padding: 6px 25px 9px; margin: 2em 0 0; display: inline-block}
ul#mobile-menu-list li.menuinstagram a { position: relative; display: inline-block; width: 40px; height: 40px; text-indent: -9999px; overflow: hidden; margin: 1em 0 0 }
ul#mobile-menu-list li.menuinstagram a::after { content: ""; position: absolute; inset: 0; background: url("images/instagram-black.svg") no-repeat center; background-size: contain; }


/*** Navigation ***/
.navigation { width:50%; text-transform: uppercase; font-size: 0.6em; line-height: 1.45em; position: relative; margin: 2em 25% 0; color: #fff; font-family: 'Blacker', serif }
.navigation ul { padding: 0; list-style:none; display:flex; margin: 0 auto; justify-content: center; font-size: 1em; text-transform: uppercase }
.navigation ul li a:hover { text-decoration:none; }
.navigation li { position: relative }
.navigation li a, .navigation li li a { display: inline-block; text-decoration: none; border: 0; position: relative; color: #fff; margin: 0 1.25em }
.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; }
.navigation li.notheader { 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;  }
.postContent a { color: #3d3938; text-decoration:underline }
.postContent .half { width:48%; float:left}
h2, h3, h4, h5, h6 { font-family: 'Blacker', serif; font-weight: normal; line-height: 1.25 }
.postContent h1 { font-size: 3em; margin:0.5em 0; font-family: 'Blacker Inline', sans-serif; text-transform: uppercase; font-weight: normal; line-height: 1.3333 }
.postContent h2 { font-size: 2em; margin:0.5em 0; }
.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; line-height:135%; }
.postContent h6 { font-size: 1em; text-transform: uppercase; }
.postContent p { margin: 0.5em 0 ; line-height:1.5; font-size: 0.8em }
.postContent p.intro { font-size: 1.4em; margin: 1% 0 ; line-height:150%; }
.postContent p sup, .postContent p sub { font-size: 0.5em; }
.postContent ul { margin: 5px 0px; }
.postContent ul li { font-size: 1.1em; margin: 1% 0 1% 1%; line-height: 140%; }
.postContent ol li { padding:5px 0; font-size: 1.1em}
.postContent ol { margin: 5px 0px 5px 22px; }
.postContent blockquote { font-weight:normal; margin: 2em 0; padding: 0.5em 0.5em 1em ; border-left: 10px solid rgba(238,124,52,1); background: rgba(238,124,52,0.2) }
.postContent blockquote p { margin: 1%; font-size: 1.25em; line-height: 140%; font-weight: 300; }
.postContent blockquote cite { margin: 1%; font-size: 1em; font-weight: 600; font-style: normal }
.postContent hr { margin: 5% 0 }
.postContent img { max-width: 100%; height:auto }
.postContent blockquote.half { float:left; width: 48%; margin: 0 2% 0 0 }
.postContent a.post-edit-link { display: none; text-align: center; margin: 1em 0 }

/*** Pages with different coloured backgrounds ***/
body.page-template-tpl_pagenoheadingdarkcream, body.page-template-tpl_pagenoheadingdarkcream .contentwrap { background: #f1ecd5; }

/*** 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 .aligncenter { width: 100%}
.postContent .wp-caption p { margin: 0px; }
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.postContent .alignwide { max-width: 1200px; margin-left: auto; margin-right: auto }
.roomscadoganarms { margin-top: -340px; }

/*** Buttons ***/
.wp-block-button__link, .wp-block-kadence-advancedbtn { text-transform: uppercase; font-family: 'Blacker', serif}
.modalbutton button { font-family: 'Blacker', serif }

/*** Footer ***/
.footer { height: auto; font-size: 0.6em; clear: both; line-height: 140%; margin: 0 auto; font-family: 'Blacker', serif; display: flex; justify-content: center; align-items: center; background: #c5d4e2; position: relative }
.footer-logo {  display: block; width: 240px; height: 120px; background: url("images/Ardent-Pub-Group.svg") no-repeat center; background-size: contain; position: absolute; z-index: 10}
.footer a { color: #000 }
.footer .alignfull { margin: 0 auto; }

/*** Cookie Notice ***/
.moove-gdpr-button-holder button { font-family: 'wedding-gothic-atf',sans-serif !important; font-weight: 500 !important }

/* -- Media Queries -- */

@media only screen and (min-width : 901px) and (max-width : 1220px) {
.navigation { display: none }
.home .header { background: none }
}

@media only screen and (min-width : 601px) and (max-width : 900px) {
.contentwrap { flex-direction: column }
.content { width: 100%;  }
.navigation { display: none }
.home .header { background: none }
}

@media only screen and (max-width : 600px) {
.home .header .logonavwrapper .logo { left: calc(50% - 50%)}
.header { height: 120px; }
.header::after { content: ""; position: absolute; left: 15px; right: 15px; bottom: 10px; height: 15px; background: linear-gradient( to bottom, #000 0, #000 1px, transparent 1px, transparent 5px, #000 5px, #000 6px, transparent 6px );}
.header .logonavwrapper .logo { width:120px; height: auto; left: calc(50% - 60px) }
.home .stick .logo { width: 120px !important; margin: 0 calc(50% - 60px) 0 !important }
.contentwrap { flex-direction: column}
.content { width: calc(100% - 30px); margin: 120px auto 0 }
.navigation { display: none }
.mobile { font-size: 1.5em; }
.menu-toggle-label { right: 20px; left: inherit }
.mobile.active { background: #c5d4e2; flex-direction: column }
.mobile.active::before { content: ""; display: block; width: 180px; height: 110px; background: url("images/The-Cadogan-Arms-Logo-Black.png") no-repeat center; background-size: contain; margin-bottom: 40px; }
.footer{ padding: 0 0 40px 0}
.footer-logo { width: 100px; height: 200px; background: url("images/agp.svg") no-repeat center calc(50% + 45px); }
.postContent h1 { font-size: 2em }
.postContent h2 { font-size: 1.5em }
.postContent h3 { font-size: 1.25em }
.postContent h4 { font-size: 1.125em }
.postContent h5 { font-size: 1em }
.postContent p { font-size: 0.7em }
.header .headerbuttons { position: fixed; right: 0; bottom: 0; display: flex; flex-direction: row; top: auto; width: 100%; z-index: 1000 }
.header .headerbuttons button.book, .header .headerbuttons button.stay { margin: 0; width: 50vw; padding: 1em 0 }
}