/*
Theme Name: inspiredc
Version: 1.0
Description: WordPress theme for INSPIRE
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: inspiredc

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 {
  --light-moss:   var(--wp--preset--color--light-moss);
  --teal:         var(--wp--preset--color--teal);
  --pink:         var(--wp--preset--color--pink);
  --moss:         var(--wp--preset--color--moss);
  --dark-grey:    var(--wp--preset--color--dark-grey);
  --font-display: var(--wp--preset--font-family--montserrat);
  --font-body:    var(--wp--preset--font-family--montserrat);
}

/*** General ***/
* { padding: 0px; margin: 0px; }
p { margin: 10px 0px }
html, body { height: 100% }
body { font-family: 'Montserrat', sans-serif; font-size: 16px; color:#000; margin:0; background: #F4F2EE; }
.inwrap { width: 100%; display: flex; flex-direction: column; min-height: 100%}
.contentwrap { width: 95%; margin: 0 auto; min-height: 100dvh; max-width: 1500px }
.clear { clear: both; display: block; }
a, a:link, a:active, div a { text-decoration:none; }
a img {border:none }

.alignleft { float: left }
.alignfull { margin: 0 calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.alignwide { margin: 0 auto; max-width: 1500px }

/*** 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%; z-index: 1000}
.header .logonavwrapper { display: flex; align-items: center; justify-content: space-between; width: 100% }
.header .logo { position: relative; transition: all 0.4s ease-in-out 0s; background: url(images/INSPIRE.svg) no-repeat center; width: 200px; margin: 1%; height: 70px }
.stick { position: fixed; top: 0; box-shadow: 0 5px 10px rgba(0,0,0,0.1)}
.stick .logo { width: 125px !important; transition: all 1s ease-in-out 0s; height: 50px}
.home .header { background: none }
.home .header .logo { background: url(images/INSPIRE-WHITE.svg) no-repeat center; }
.home .stick { background: #fff }
.home .stick .logo { background: url(images/INSPIRE.svg) no-repeat center; }

/*** Navigation ***/
.navigation { text-transform: uppercase; font-weight: 300; position: absolute; right: 2.5% }
.navigation ul { list-style:none; display:flex; }
.navigation ul li a:hover { text-decoration:none; }
.navigation li.current_page_item { font-weight: 600; }
.navigation li a, .home .stick .navigation li a { font-weight: 500; color: #000 }
.home .navigation li a { color: #fff }
.navigation li ul { z-index: 9999; position: absolute; left: -999em; height: auto; margin: 0px; color:#000; flex-direction: column; display: none } 
.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 { position: relative; margin: 0 20px; letter-spacing: 1px; font-size: 12px }
.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; }
.home .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; }
.home .stick .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::after, .home .navigation li.current_page_item::after, .navigation li.current-menu-item::after { content: none; }
.navigation li:hover:after, .home .navigation li:hover:after { visibility: visible; transform: scaleX(1); }
.navigation li.contact a { padding: 8px 16px; border-radius: 50px; border: 1px solid #000; transition: color 0.5s ease, background-color 0.5s ease, border-color 0.5s ease; }
.navigation li.contact a:hover { color: #000; border: 1px solid #000; background: #fff; }
.home .navigation li.contact a { border: 1px solid #fff}
.home .stick .navigation li.contact a { border: 1px solid #000 }
.navigation li:last-child { margin: 0 0 0 20px}
.navigation li:last-child:hover::after { visibility: hidden }

/*** Mobile Navigation ***/
.imn { display: flex }
.home .imn-hamburger .imn-bar { background: #fff}
.home .stick .imn-hamburger .imn-bar { background: #000}

/*** Content Home ***/
.contenthome { width: 100%; margin: 0 auto; display: flex; flex-direction: column}
.contenthome h2 { font-size: 15vh; font-weight: 900; text-transform: uppercase; color: #000; line-height: 1; z-index: 100; margin: 0}
.contenthome h2 a { color: rgba(255,255,255,0.4)}

/*** Content ***/
.page { float:left; width:100%; }
.page .postHead { background: none; }
.postContent { padding: 1% 0 0; margin: 0 auto }
.postContent a { color: #000; text-decoration:underline }
.postContent h1 { font-size: 2.5em; font-weight: 300; margin:0.5em 0 ; }
.postContent h2 { font-size: 2em; margin:0.5em 0 ; font-weight: 400 }
.postContent h3 { font-size: 1.75em; margin: 1em 0; line-height:110%; font-weight: 400  }
.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 { font-size: 1.1em; margin: 1em 0 ; line-height:160%; }
.postContent ul { margin: 5px 0px 5px 0; }
.postContent ul li { line-height: 140%; }
.postContent ol li { padding:1em 0; font-size: 1.1em; 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 h6 { padding: 0 0 15px 45px; }
.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 blockquote.half { float:left; width: 48%; margin: 0 2% 0 0 }
.postContent a.post-edit-link { margin: 2% 0; clear:both}
h1.cattitle { margin: 1% 0; font-size: 2.5em; font-weight: normal; text-transform: capitalize }
h3.worktitle { font-size: 2em; font-weight: 300; color: #000; margin: 2% 0 0; float: left }
h3.worktitle:hover, h2.blogtitle:hover { color: #888;}
h2.blogtitle { font-size: 1.5em; color: #000; margin: 2% 0 0; display: inline-block }
.headerimage { width:100%; background-size: cover; background-position: center; background-repeat: no-repeat; height: 45vw; position: fixed; display: flex; align-items: center; justify-content: center; overflow: hidden}
.headerimage h1 { text-align: center; font-size: 6em; color: #FF0067; text-transform: uppercase; font-weight: 700; text-shadow: 0px 0px 20px rgba(0,0,0,0.1); position: relative; z-index: 1; letter-spacing: 5px }
.headerimage--video .vfi-video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0}
.headerimagemargin { margin: 45vw 0 0; background: #F4F2EE; position: relative; padding: 1% 2.5% 0 }
.catintro { font-size: 1.5em; margin: 1em 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 }

/*** Tags ***/
a.tag-link { padding: 0.5em 1em; border: 1.5px solid #c6c6c6; text-decoration: none; margin: 0.25em 1em 0.25em 0; display: inline-block; border-radius: 20px; color: #6f6f6f; font-size: 12px; font-weight: 600 }
a.tag-link:hover { border: 1.5px solid #888;  }
.headertags { margin: 2% 0; padding: 1em 0; border-top: 1px solid #c6c6c6; border-bottom: 1px solid #c6c6c6  }

/*** Projects ***/
.projectsheader { float: left; width: 100%; position: relative; background: #fff}
.projectsheader h2 { text-align: center; margin: 1em 0; text-transform: uppercase; clear: both }
.projects { display: flex; width: 100%; justify-content: space-between; background: #ffffff; flex-wrap: wrap; position: relative }
.project { position: relative; background: #000; width: 25%; overflow: hidden }
.project-thumb { display: block; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden }
.project-thumb img, .project-thumb video, .project-thumb iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1); opacity: 1; transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),     opacity 0.4s ease; will-change: transform, opacity; }
.project-thumb:hover img, .project-thumb:hover video, .project-thumb:hover iframe { transform: scale(1.04); opacity: 0.2; }
.projects h2{ position: absolute; text-align: center; top: calc(50% - 0.75em); color: var(--pink); font-size: 1.5em; width: 100%; text-transform: uppercase; letter-spacing: 2px; text-shadow: 0 0 10px rgba(0,0,0,0.25)}

/*** Footer ***/
footer { color: #fff; background: var(--moss); display: flow-root; position: relative }
footer a { color: #fff }
.footer-content { margin: 2em 0; padding: 0 2% }
.footer { width: 100%; height:auto; margin: 0 auto; font-size:0.75em; line-height:140%; background: var(--dark-grey); display: flex }
.footer .fleft { width: 48%; margin: 1% 0 1% 2%; }
.footer .fright { width: 48%; text-align:right; margin: 1% 2% 1% 0; }

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

/* -- Media Queries -- */

@media only screen and (min-width : 601px) and (max-width : 900px) {
.navigation { display: none }
.header .logo { margin: 1% 38% ; width:24%; }
.contenthome h2 { font-size: 12vh; }
.projects h2 { font-size: 1.2em }
}

@media only screen and (max-width : 600px) {
h1.cattitle { margin: 1% 2% }
h2.blogtitle { font-size: 1.25em; }
.contenthome h2 { font-size: 8vh; }
.postContent { padding: 1% 2.5% 0 }
.content, .sidebar { width: 100%; float:left }
.headimage { width:100%; margin: 0 0 1% 0 }
.flex33 { flex: 0 0 95%; }
.catintro { margin: 1em 2.5% }
h3.worktitle { font-size: 1.5em}
.project { width: 50% }
.projects h2 { font-size: 1.2em }
.kadence-blocks-gallery-item__caption { display: none }
.headerimage { height: 65vw; }
.headerimagemargin { margin: 65vw 0 0; }
.headerimage h1 { font-size: 2em; }
}