/*
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: 'Baskervville', serif; font-size: 18px; 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: 'Baskervville'; font-style: normal; font-weight: 400 700; src: url('fonts/Baskervville-VariableFont_wght.ttf') format('truetype'); font-display: swap; }
@font-face { font-family: 'Baskervville'; font-style: italic; font-weight: 400 700; src: url('fonts/Baskervville-Italic-VariableFont_wght.ttf') format('truetype'); font-display: swap; }

/*** Header ***/
.home .header { transition: opacity 0.5s ease; }
.header { margin: 0 auto; width:100%; float:left; position:absolute; z-index: 1000; height: 175px;}
.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 );}
.home .header::after { display: none }
.home .stick::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 ); display: block }
.header .logonavwrapper .logo { position: absolute; z-index: 1000; width:230px; height: auto; left: calc(50% - 115px); top: 25px }
.header .logonavwrapper .logo img { display:block; margin: 0 auto; text-align:center; width:100%; height:auto; }
.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; letter-spacing: 1% }
.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 }
.header .headerbuttons { position: absolute; right: 20px; top: 1em; z-index: 10; display: grid; grid-template-columns: auto auto; grid-template-areas: "book insta" "event insta"; gap: 8px 10px; align-items: start; }
.header .headerbuttons a:nth-child(1) { grid-area: event; }
.header .headerbuttons a:nth-child(2) { grid-area: book; }
.header .headerbuttons a:nth-child(3) { grid-area: insta; align-self: start;  }
.headerbuttons a:nth-child(1) button, .headerbuttons a:nth-child(2) button { width: 100%; white-space: nowrap; }
.home .stick { position: fixed; top: 0; width:100%; z-index: 1000; opacity: 1; }
.stick { position: fixed; width:100%; z-index: 1000; background: #fbf7eb}
.home .header .logonavwrapper .logo img { display: none; }
.home .stick .logonavwrapper .logo img { display: block }
.stick .navigation { /* display: none */ }

/*** 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', 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: 12px; font-family: 'Blacker', serif; color: #fff; background: #570d17; padding: 6px 20px 9px; margin: 2em 0 0; display: inline-block; letter-spacing: 1px }
ul#mobile-menu-list li.menuinstagram a { position: relative; display: inline-block; width: 30px; height: 30px; 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 ***/
.home .navigation li a { color: #fff }
.navigation { width:100%; text-transform: uppercase; font-size: 12px; line-height: 1.45em; position: relative; margin: 2em auto 0; font-family: 'Blacker', serif; letter-spacing: 1px }
.navigation ul { padding: 0; list-style:none; margin: 0 auto; 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; }
.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 */ }
.stick .navigation li a{ color: #000; }

.main-nav { position: relative; width: 100%; z-index: 1000; }
.nav-inner { max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 1.5rem; }
.home .nav-left { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex: 1; text-align: center; position: relative; justify-content: flex-end; transform: translateX(0); transition: transform 0.7s ease-in-out; }
.home .nav-right { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex: 1; text-align: center; position: relative; justify-content: flex-start; transform: translateX(0); transition: transform 0.7s ease-in-out; }
.nav-left { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex: 1; text-align: center; margin: 1em 0 0; position: relative; justify-content: flex-end; transform: translateX(0); transition: transform 0.7s ease-in-out; }
.nav-right { list-style: none; padding: 0; display: flex; gap: 1.5rem; flex: 1; text-align: center; margin: 1em 0 0; position: relative; justify-content: flex-start; transform: translateX(0); transition: transform 0.7s ease-in-out; }

.nav-left { transform: translateX(-100px);}
.nav-right { transform: translateX(100px);}
.home .stick .nav-left { transform: translateX(-100px); }
.home .stick .nav-right { transform: translateX(100px);}
.home .stick .nav-right { justify-content: flex-start; }
.nav-left li, .nav-right li { line-height: 120%; position: relative }
.nav-left li.current-page-item a::after, .nav-right li.current-page-item a::after { content: ""; position: absolute; width: 100%; height: 1px; bottom: -5px; left: 0; background-color: #000; }
.nav-left li span, .nav-right li span { font-size: 15px }
.nav-left a, .nav-right a { text-decoration: none; font-weight: 300; color: #000; }
.nav-left li::after, .nav-right li::after { content: ""; position: absolute; width: 100%; height: 1px; bottom: -5px; left: 0; background-color: #000; 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); }

/*** 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 }
.page-template-tpl_pagenoheadingnoh1 h1 { font-size: 2em; font-family: 'Blacker', serif; font-weight: normal; line-height: 1.25; }
.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.6; font-size: 0.9em }
.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 }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.blackerinline { font-family: 'Blacker Inline', serif; }
.blacker { font-family: 'Blacker', serif; } 

/*** Pages with different coloured backgrounds ***/
body.page-template-tpl_pagenoheadingdarkcream, body.page-template-tpl_pagenoheadingdarkcream .contentwrap { background: #f1ecd5; }
body.page-template-tpl_pagenoheadingdarkcream .postContent h1{ font-size: 2em; font-family: 'Blacker', serif; font-weight: normal; line-height: 1.25; }

/*** 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; }
.eventsscroll .kb-splide .splide__slide { width: 37.5% !important }
.spaces .kt-blocks-post-footer { display: flex; flex-wrap: wrap; }
.spaces .kt-blocks-post-footer-right { flex: 0 0 100%; width: 100%; justify-content: flex-start; margin-left: 0; }
.spaces .spaces-card-button { margin-top: 1rem; margin-left: 0; }
.spaces .spaces-card-button__link { display: inline-block; padding: 5px 10px 8px; background: #C5D4E2; color: #000; text-decoration: none; text-transform: uppercase; letter-spacing: 1px; font-family: 'Blacker', serif; transition: all 0.3s ease-in-out; text-align: center }
.spaces .spaces-card-button__link:hover, .spaces .spaces-card-button__link:focus { background: #570D17; color: #fff; }

/*** Buttons ***/
.wp-block-button__link, .wp-block-kadence-advancedbtn { text-transform: uppercase; font-family: 'Blacker', serif; letter-spacing: 1%}
.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; border-top: 1px solid rgba(0,0,0,0.1) }
.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: 'Blacker',serif !important; font-weight: 500 !important }
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme { background-color: #fbf7eb !important; font-family: 'Baskervville', serif }
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton { color: #000 !important}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover { color: #fff !important; background: #570d17 !important}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon { color: #000 !important}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton.moove-gdpr-modal-save-settings, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button span.gdpr-nav-tab-title { color: #000 !important }
#moove_gdpr_cookie_modal .moove-gdpr-modal-content { font-family: 'Baskervville', serif }

/*** Fanzo Feed ***/
.fanzo-feed { display: flex; flex-direction: column; gap: 0; margin: 0 0 2em }
.fanzo-feed h3 { font-size: 0.8em }
.fanzo-feed__item { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); flex-wrap: nowrap; }
.fanzo-feed__day:last-child .fanzo-feed__item { border-bottom: none; }
/* Date/time */
.fanzo-feed__time { flex: 0 0 180px; font-size: 0.85rem; color: #666; white-space: nowrap; }
/* Competition logo (small, e.g. Premier League badge) */
.fanzo-feed__comp-logo { flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain; }
/* Competition/league name */
.fanzo-feed__competition { flex: 0 0 180px;  font-size: 0.8rem; color: #888; white-space: nowrap; }
/* Teams row — takes remaining space */
.fanzo-feed__teams { flex: 1 1 auto; display: flex; align-items: center; gap: 8px; min-width: 0; }
/* Team or sport badge */
.fanzo-feed__badge { width: 24px; height: 24px; object-fit: contain; flex-shrink: 0; }
/* Sport icon fallback is slightly larger as it's the only visual */
.fanzo-feed__badge--sport { width: 28px; height: 28px; opacity: 0.7; }
/* Match title */
.fanzo-feed__title { margin: 0; font-size: 0.8rem; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Channel logo (Sky Sports, Racing TV etc.) */
.fanzo-feed__channel-logo {  flex: 0 0 auto; width: 32px; height: 20px; object-fit: contain; }
/* Big screen / sound flags */
.fanzo-feed__flag { flex: 0 0 auto; font-size: 0.7rem; padding: 2px 6px; border-radius: 4px; white-space: nowrap; }
.fanzo-feed__flag--big-screen { background: #e8f4fd; color: #1a6fa8; }
.fanzo-feed__flag--sound { background: #edfaee; color: #1a7a25; }
/* CTA link */
a.fanzo-feed__book { flex: 0 0 auto; font-size: 0.8rem; font-weight: 400; white-space: nowrap; text-decoration: none; padding: 6px 12px 8px; border-radius: 0; background: #C6A3A7; color: #000; transition: opacity 0.2s; text-transform: uppercase; font-family: 'Blacker', serif; }
a.fanzo-feed__book:hover { color: #fff; background: #570D17 }
/* Mobile */
@media (max-width: 600px) {
    .fanzo-feed__item { flex-wrap: wrap; gap: 8px; }
    .fanzo-feed__time { flex: 0 0 100%; font-size: 0.8rem; text-align: center }
    .fanzo-feed__teams { flex: 1 1 100%; order: -1; display: flex; justify-content: center }
    .fanzo-feed__teams h3.fanzo-feed__title { font-size: 0.8em }
    .fanzo-feed__competition,
    .fanzo-feed__comp-logo { display: none; }
    .fanzo-feed__channel-logo { display: none; }
    a.fanzo-feed__book { margin-left: auto; display: none }
}

/* -- 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.25em; }
.menu-toggle-label { right: 20px; left: inherit }
.mobile.active { background: #c5d4e2; flex-direction: column }
.mobile.active::before { content: ""; display: block; width: 150px; height: 110px; background: url("images/The-Cadogan-Arms-Logo-Black.png") no-repeat center top 30px; background-size: contain; margin-bottom: 20px; }
.footer{ padding: 0 0 40px 0}
.footer-logo { width: 100px; height: 120px; background: url("images/agp.svg") no-repeat center calc(50% + -25px); }
.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: 10000; border-top: 1px solid rgba(0,0,0,0.1) }
.header .headerbuttons button.book, .header .headerbuttons button.stay { margin: 0; width: 50vw; padding: 1em 0; letter-spacing: 1px }
.header .headerbuttons { gap: normal; }
.eventsscroll .kb-splide .splide__slide { width: 87.5% !important }
.spaces .kb-splide .splide__slide { width: 50% !important }
}