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

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.
*/

/* ─── Design Tokens ───────────────────────────────────────────────────────── */

:root {
  --evergreen:      #003428;
  --laurel:         #045D3C;
  --ember:          #B33E26;
  --daphne:         #F7C2Cd;
  --apollo:         #F3DB00;
  --linen:          #DFDAD5;
  --linen-80:       #e5e1dd;
  --linen-50:       #efecea;

  --font-display: 'roca', Georgia, serif;
  --font-body:    'basicsans', sans-serif;
    
  --radius-pill: 999px;

  --container-max: 1140px;
  --pad-mobile: 24px;
  --pad-tablet: 40px;
  --pad-desktop: 40px;
  --section-gap: 120px;
}

/*** General ***/
* { padding: 0px; margin: 0px; }
p { margin: 10px 0px }
html { scroll-behavior: smooth }
body { font-family: 'basicsans', sans-serif; font-size: 18px; color: var(--evergreen); margin:0; font-weight:400; background: var(--linen-80); }
.inwrap { width: 100%; display: flex; flex-direction: column; min-height: 100%}
.contentwrap { width: 95%; 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: 'basicsans'; src: url('fonts/basicsans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'basicsans'; src: url('fonts/basicsans-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'basicsans'; src: url('fonts/basicsans-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'roca'; src: url('fonts/roca-bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'roca'; src: url('fonts/roca-bold-italic.woff2') format('woff2'); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'roca'; src: url('fonts/roca-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'roca'; src: url('fonts/roca-black-italic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: swap; }

.alignleft { float: left }
.alignwide { margin: 0 auto; max-width: var(--container-max) }

/*** 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; }

/*** Header ***/
.header { margin: 0 auto; width:95%; position:relative; padding: 0 2.5%; overflow-x: clip; }
.header .logonavwrapper { display: flex; align-items: center; justify-content: space-between; width: 100% }
.header .logonavwrapper .logo { position: relative; z-index: 10000; max-width:90%; transition: all 0.4s ease-in-out 0s }
.header .logonavwrapper .logo img { display:block; margin: 0 auto; text-align:center; width:100%; height:auto}
.header .description { font-size: 2.5em; font-weight: 300; text-transform: uppercase; margin: -1% 0 0 -.175%; color: #fff; z-index: 10}
.stick { position: fixed; top: 0; background: rgba(255,183,116,0.9); z-index: 1000; box-shadow: 0 5px 10px rgba(0,0,0,0.1)}
.stick .logo { width: 7.5% !important; transition: all 1s ease-in-out 0s}

/*** Navigation ***/
.navigation  { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; }
.navigation ul { list-style:none; display:flex; }
.navigation ul li a:hover { text-decoration:none; }
.navigation li.current_page_item > a { font-weight: 700; }
.navigation li a { font-weight: 500; color: var(--evergreen) }
.navigation li { position: relative; margin: 0 20px }
.navigation li::after { content: ""; position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background-color: #000; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out; }
.navigation li.current_page_item:hover:after { content: none; }
.navigation li:hover:after { visibility: visible; transform: scaleX(1); }

/*** Sub Navigation ***/
.navigation .sub-menu { display: none; }
.navigation .menu-item.current-menu-item,
.navigation .menu-item.current-menu-parent,
.navigation .menu-item.current-menu-ancestor { position: relative; }
.navigation .menu-item.current-menu-item::after,
.navigation .menu-item.current-menu-parent::after,
.navigation .menu-item.current-menu-ancestor::after { content: none; }
.navigation .menu-item.current-menu-item > .sub-menu,
.navigation .menu-item.current-menu-parent > .sub-menu,
.navigation .menu-item.current-menu-ancestor > .sub-menu { display: flex; position: absolute; left: 50%; transform: translateX(-50%); box-sizing: border-box; justify-content: center; flex-wrap: wrap; gap: 28px; padding: 12px 2.5%; background: var(--linen-80); width: 120vw }
.navigation .sub-menu li { margin: 0; }
.navigation .sub-menu a { font-size: 0.9em; }
.navigation .sub-menu .current-menu-item > a { font-weight: 700; }
.stick .navigation .sub-menu { box-shadow: 0 5px 10px rgba(0,0,0,0.1)}

body.page-template-tpl_life .header, body.page-template-tpl_team .header /*** , body.single-team .header ***/ { background: var(--evergreen) }
body.page-template-tpl_life .navigation li a, body.page-template-tpl_team .navigation li a /*** , body.single-team .navigation li a ***/ { color: #fff }
body.page-template-tpl_life .navigation li::after, body.page-template-tpl_team .navigation li::after /*** , body.single-team .navigation li::after ***/ { content: ""; position: absolute; width: 100%; height: 2px; bottom: -5px; left: 0; background-color: #fff; visibility: hidden; transform: scaleX(0); transition: all 0.3s ease-in-out; }
body.page-template-tpl_life .navigation li.current_page_item:hover:after, body.page-template-tpl_team .navigation li.current_page_item:hover:after, body.single-team .navigation li.current_page_item:hover::after { content: none; }
body.page-template-tpl_life .navigation li:hover:after, body.page-template-tpl_team .navigation li:hover:after, body.single-team .navigation li:hover:after { visibility: visible; transform: scaleX(1); }
body.page-template-tpl_life .nav-book-cta, body.page-template-tpl_team .nav-book-cta/*** ,  body.single-team .nav-book-cta ***/ { border: 1px solid #fff }
body.page-template-tpl_life .nav-book-cta:hover, body.page-template-tpl_team .nav-book-cta:hover /***, body.single-team .nav-book-cta:hover ***/ { border: 1px solid var(--laurel) }
body.page-template-tpl_life .menu-toggle-label span, body.page-template-tpl_team .menu-toggle-label span, body.single-team .menu-toggle-label span { background: #fff }
body.page-template-tpl_team h1 { margin: 0; }
body.page-template-tpl_team .mobile.active, body.page-template-tpl_life .mobile.active, body.single-team .mobile.active { background: var(--evergreen) }
body.page-template-tpl_team ul#mobile-menu-list li a, body.page-template-tpl_life ul#mobile-menu-list li a, body.single-team ul#mobile-menu-list li a  { color: #fff; }

/*** 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.5em; }
.mobile.active { transform: translateX(0); background: var(--linen-50) }
.menu-toggle { display: none; }
.menu-toggle-label { width: 30px; height: 21px; cursor: pointer; z-index: 100000; display: none; position: relative }
.menu-toggle-label span { display: block; width: 100%; height: 2px; margin-bottom: 5px; background: var(--evergreen); transition: transform 0.3s, opacity 0.3s; }
.menu-toggle-label span:last-child { margin-bottom: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(2) { transform: translateY(7.5px) rotate(45deg); }
.menu-toggle:checked + .menu-toggle-label span:nth-child(3) { opacity: 0; }
.menu-toggle:checked + .menu-toggle-label span:nth-child(4) { transform: translateY(-7.5px) rotate(-45deg); }
ul#mobile-menu-list { list-style: none; font-size: 0.9em; text-align: center; font-weight: 500 }
ul#mobile-menu-list ul { list-style: none; font-size: .75em; }
ul#mobile-menu-list li { margin: 0.75em 0; }
ul#mobile-menu-list li a { color: var(--evergreen); transition: color 0.3s ease; }
ul#mobile-menu-list li a:hover { color: var(--laurel); font-weight: 700 }
#mobile-menu .menu-item-has-children > a { position: relative; display: block; text-align: center; }
#mobile-menu .menu-item-has-children > a .submenu-indicator { position: absolute; right: -1em; top: 50%; transform: translateY(-50%); transition: transform 0.3s ease, opacity 0.3s ease; font-size: 1em; display: flex; align-items: center; justify-content: center; width: 1.5em; height: 1.5em; }
#mobile-menu .toggle-icon { stroke: currentColor; display: block; }
#mobile-menu .toggle-icon .vertical { opacity: 1; transform: scaleY(1); transform-box: fill-box; transform-origin: center; transition: opacity 0.25s ease, transform 0.25s ease; }
#mobile-menu .toggle-icon .vertical.hidden { display: block !important; opacity: 0; transform: scaleY(0); }

/*** Book a Consultation header button ***/
.nav-book-cta { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 1rem; font-weight: 500; white-space: nowrap; padding: 5px 22px; height: 35px; border-radius: var(--radius-pill); background-color: var(--evergreen); color: #ffffff !important; text-decoration: none; box-shadow: 0 4px 14px rgba(239, 216, 0, 0.3); transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; flex-shrink: 0; z-index: 1 }
.nav-book-cta:hover { background-color: var(--laurel); color: #ffffff !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(239, 216, 0, 0.4); }
.mobile-book-cta  { display: none }

/*** Content Home ***/
.contenthome { width: 100%; margin: 0 auto; display: flex; flex-direction: column}

/*** Content ***/
.page { float:left; width:100%; }
.page .postHead { background: none; }
.postContent { padding: 1% 0 0; }
.postContent a { color: var(--evergreen); text-decoration:underline }
h1, h2, h3, h4, h5, h6 { line-height: 120%; font-family: 'roca', sans-serif; }
.postContent h1 { font-size: 2.5em; font-weight: 300; margin:0.5em 0 ; }
.postContent h2 { font-size: 2em; margin:0.5em 0 ; }
.postContent h3 { font-size: 1.75em; margin: 1em 0; line-height:110%; }
.postContent h4 { font-size: 1.5em; margin: 1em 0; }
.postContent h5 { font-size: 1.25em; margin: 1em 0; line-height:135%; }
.postContent h6 { font-size: 1.2em; margin: 1em 0; line-height:130%; }
.postContent p { margin: 1em 0 ; line-height:160%; }
.postContent p sup, .postContent p sub { font-size: 0.5em; }
.postContent ul { margin: 5px 0px 5px 0; }
.postContent ul li { line-height: 140%; list-style:inside; padding: 0.5em 0 }
.postContent ol li { padding:0.25em 0; line-height: 160%}
.postContent ol { margin: 5px 0px 5px 22px; }
.postContent blockquote { font-weight:normal; margin: 1% 0; padding: 0.25% 0 ; }
.postContent blockquote h3 { font-size:20px ; letter-spacing:2px; margin:15px 0 5px; text-transform:uppercase}
.postContent blockquote p { margin: 1%; font-size: 1.25em; line-height: 140%; font-weight: 300; }
.postContent blockquote p strong { font-weight: 700; }
.postContent hr { width:100%; margin: 5px 0 15px; border-top: 1px solid #000; float:left; border-bottom:none; border-left:none; border-right:none }
.postContent img { max-width: 100%; height:auto }
.postContent a.post-edit-link { margin: 2% 0; clear:both}
.flex50 { flex: 0 0 50%; padding: 0; position: relative }
.flex33 { flex: 0 0 32%; padding: 0 0 3em; margin: 0 0 2% 0; }
.category-resources .flex33 { border-bottom: 1px solid #c6c6c6 }
.flex50 img, .flex33 img { width:100%; float: left}
.flex100 { display: flex; padding: 0; flex-wrap: wrap; justify-content: flex-start; gap: 2%}
h1.cattitle { margin: 1% 0; font-size: 2.5em; font-weight: normal; text-transform: capitalize }
h3.blogtitle { font-size: 1.25em; margin: 1em 0 0; display: inline-block }
.headerimage { width:100%; float:right; margin: 0 0 25vw; background-size: cover; background-position: center; background-repeat: no-repeat; height: 30vw; position: fixed; display: flex; align-items: center; justify-content: center}
.headerimage h1 { text-align: center; font-size: 6em; color: #fff; text-transform: uppercase; font-weight: 700}
.headerimagemargin { margin: 30vw 0 0; background: #F4F2EE; position: relative; padding: 1% 2.5% }
.catintro { font-size: 1.5em; margin: 1em 0 }
.roca { font-family: 'roca', sans-serif; }
#services { scroll-margin-top: 150px; }

/*** Category Grid ***/
.category-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2em; margin: 0 auto; max-width: var(--container-max); float: none; padding: 0 0 2% }
.category-card img { width: 100%; height: auto; display: block; }
.category-card { padding: 1em; margin: 0; border-radius: 20px; text-decoration: none; color: inherit; box-shadow: rgba(40, 114, 79, 0.3) 0px 0px 10px 0px; display: flex; }
.category-card:hover { background: rgba(255,255,255,0.4); box-shadow: rgba(239, 216, 0, 0.3) 0px 4px 14px 0px }
.category-card:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.category-grid { align-items: stretch; }
.category-card .catpost { display: flex; flex-direction: column; width: 100%; height: 100%; }
.category-card img { width: 100%; display: block; }
.category-card .blogtitle { margin-bottom: 0.8em; }
.category-card .read-more { margin-top: auto; font-weight: bold; margin-bottom: 0 }

/*** 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 .wp-caption p { margin: 0px; }
.postContent .imageborder img { border: 1px solid #d4d4d4 }
figcaption { text-align: center }
h1.hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.home .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg { color: #fff; fill: #fff}
.wp-block-code { background: rgba(255,255,255,0.5); padding: 1em }
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }

/*** Team Ring Centre Content ***/
.btr-center-text h4 { font-size: 24px; margin: 1em 0 }
.btr-center-text p { font-size: 18px; font-family: 'basicsans', sans-serif; margin: 1em 0 }

/*** Constant Contact Forms ***/
#ctct-form-wrapper-0 input { width: calc(100% - 20px); border: 1px solid rgba(203, 213, 224); border-radius: 3px;  padding: 10px; background: rgba(255, 255, 255, 0.5); }
#ctct-form-wrapper-0 input[type="submit"] { width: auto; border-radius: 999px; padding: 7px 18px; line-height: 28px}
#ctct-form-wrapper-0 input[type="submit"]:hover { background-color: var(--laurel) !important}
#ctct-form-wrapper-0 label { font-size: 14px }
.ctct-required-indicatior { color: var(--ember) }

/*** Tags ***/
a.tag-link { padding: 0.5em 1em; border: 1px solid var(--evergreen); text-decoration: none; margin: 0.5em 1em 0.5em 0; display: inline-block; border-radius: 20px; color: var(--evergreen); font-size: 14px; font-weight: 400 }
a.tag-link:hover { border: 1px solid var(--laurel); background: var(--laurel); color: #fff  }
.headertags { margin: 2% 0; padding: 1em 0; border-top: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6  }

/*** Footer ***/
.footer { width: 95%; height:auto; padding: 1em 2.5%; font-size:0.75em; clear:both; line-height:140%; float: left; display: flex; color: #fff; justify-content: space-between}
.footer a { color: #fff }
.copyright .fleft { width: 48%; float: left; margin: 1% 0 1% 2%; }
.copyright .fright { width: 48%; float: left; text-align:right; margin: 1% 2% 1% 0; }
.copyright { color: rgba(255,255,255,0.7); background: var(--laurel); width: 100%; display: flex; font-size: 0.7rem}

/*** Footer Navigation ***/
.footer ul#menu-footer-menu, .footer ul#footer-menu { float:left; display: table; margin: 1% auto 0; width: 100% }
.footer ul#menu-footer-menu li, .footer ul#footer-menu li { display:inline-block; padding: 0 0.5% }

/*** Blog Navigation ***/
.blogNavigation { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; grid-template-areas: "leftlabel rightlabel" "lefttitle righttitle"; column-gap: 40px; row-gap: 8px; width: 100%; margin: 1em auto; border-top: 1px solid rgba(0,0,0,0.5); padding: 1em 0 0; line-height: 1 }
.blogNavigation .alignleft { grid-area: leftlabel; justify-self: start; text-align: left; font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px }
.blogNavigation .alignlefttitle { grid-area: lefttitle; justify-self: start; text-align: left; }
.blogNavigation .alignright { grid-area: rightlabel; justify-self: end; text-align: right; font-size: 0.75em; text-transform: uppercase; letter-spacing: 2px }
.blogNavigation .alignrighttitle { grid-area: righttitle; justify-self: end; text-align: right; }
.blogNavigation a { text-decoration: none }
.blogNavigation a:hover { text-decoration: underline }
.blogNavigation:last-child { margin: 0 0 3em }

/* Cookie Banner */
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme { background: var(--linen-50) !important}

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 900px) {
.navigation { display: none }
.menu-toggle-label { display: block }
.header .logo { margin: 1% 38% ; width:24%; }
.contenthome h2 { font-size: 12vh; }
.projects h2 { font-size: 1.2em }
.category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width : 600px) {
.category-grid { grid-template-columns: 1fr; }
.navigation { display: none }
.subnavigation { display: none; }
.mobile-toggle-wrapper { margin-right: 2.5% }
.menu-toggle-label { display: block }
.header .logo { width:40% !important; margin: 5% 2% !important }
.header .logo img, .headerhome .logo img { width:100%; margin: 1% 0 }
.header .description { font-size: 1.5em;  margin: -3% 0 0 1% }
h1.cattitle { margin: 1% 2% }
h2.blogtitle { font-size: 1.25em; }
.headerimage h1 { font-size: 2em; }
.contenthome h2 { font-size: 8vh; }
.content, .sidebar { width: 100%; float:left }
.headimage { width:100%; margin: 0 0 1% 0 }
.catintro { margin: 1em 2.5% }
.project { width: 50% }
.projects h2 { font-size: 1.2em }
.sidebarhome { flex-direction: column }
.sidebarhome .sidebarItem { text-align: center }
.nav-book-cta { display: none }
.mobile-book-cta { display: block; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000; padding: 12px var(--pad-mobile, max(16px, env(safe-area-inset-bottom, 16px))); background: rgba(229,225,221,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; transform: translateY(100%); pointer-events: none; transition: opacity .25s ease, transform .25s ease; box-shadow: 0 -5px 10px rgba(0,0,0,0.1)}
.mobile-book-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.mobile-book-cta__link { display: flex; align-items: center; justify-content: center; width: 70%; background: var(--evergreen); color: #ffffff; font-family: var(--font-body); font-size: 1rem; font-weight: 500; letter-spacing: 0.2px; padding: 10px 0; border-radius: var(--radius-pill); text-decoration: none; box-shadow: 0 4px 14px rgba(239, 216, 0, 0.3); transition: background-color 180ms ease, box-shadow 180ms ease; margin: 0 auto}
.mobile-book-cta__link:hover, .mobile-book-cta__link:active { background-color: var(--laurel); color: #ffffff; box-shadow: 0 8px 22px rgba(239, 216, 0, 0.4); }
.footer { flex-direction: column; margin: 0 0 2em }
.noshow /*** delete this later ***/ { display: none }
.btr-center-text h4 { font-size: 19px; }
.btr-center-text p { display: none }
}