/*!
Theme Name: YKW (johnoDEV)
Template: johnodev
Author: johnodesigns.com
Author URI: https://youknowhwodigital.com/
Description: Theme for Adaston, in collaboration with johnoDEV. Based on johnoDEV child starter theme.
Version: 1.0.0
Tested up to: 8.0.0
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: ykw
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

@layer parent, child, child-base, child-layout , child-footer, child-header, child-posts, child-components, child-sections;


/* ----------------------------------------------------
    ADASTON BRAND DEFAULTS — johnodev parent expectations
    Unlayered: parent's compiled CSS uses these unlayered (e.g. `* { font-family: var(--font-pri) }`),
    so defaults must also be unlayered to win the cascade. If ACF site_colours / typography options
    are populated, jd_theme_css_variables() emits a later <style id="jd-theme-vars"> that overrides.
    ---------------------------------------------------- */

:root {
    /* Primary font (parent's universal `*` selector reads this) */
    --font-pri: 'Gotham Book', sans-serif;

    /* Brand colour palette mapped to johnodev's --col-* contract */
    --col-primary:   #32615A; /* green-dark */
    --col-primary-l: #54A297; /* green-deep */
    --col-primary-d: #1A1A1A; /* dark */
    --col-secondary: #465C69; /* blue-dark */
    --col-secondary-l: #7498AC; /* blue */
    --col-secondary-d: #1A1A1A;
    --col-accent:    #65C7B8; /* green */
    --col-accent-l:  #96D8CE; /* green-pale */
    --col-accent-d:  #32615A; /* green-dark */
    --col-black:     #000000;
    --col-dark:      #1A1A1A;
    --col-white:     #FFFFFF;
    --col-light:     #F7F7F7;
    --col-green:     #65C7B8;
    --col-red:       #c0392b;
    --col-amber:     #f39c12;
}

/* Heading typefaces — unlayered so they survive parent's unlayered `* { font-family }` rule.
   Sizes and margins inherit from johnodev parent (kept intentionally for consistency). */
h1, h2, .h1, .h2 {
    font-family: 'MFred', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
}

h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    font-family: 'Gotham', sans-serif;
    font-weight: 500;
}

body {
    font-family: 'Gotham Book', sans-serif;
}

/*  ----------------------------------------------------
    CHILD THEME STYLES
    ---------------------------------------------------- */

@layer child{

/* Variables */

:root {
    /* Core neutrals */
    --white: #FFFFFF;
    --black: #000000;
    --dark:   #1A1A1A;  /* Eerie Black */
    --light:   #F7F7F7;  /* Cultured */

    /* Greens */
    --green:       #65C7B8; /* Medium Aquamarine */
    --green-soft:  #D0EDE9; /* Azureish White */
    --green-pale:  #96D8CE; /* Pale Robin Egg Blue */
    --green-dark:  #32615A; /* Dark Slate Gray */
    --green-deep:  #54A297; /* Polished Pine */

    /* Blues */
    --blue:        #7498AC; /* Weldon Blue */
    --blue-soft:   #D3EBF8; /* Water */
    --blue-pale:   #A2D3F5; /* Baby Blue Eyes */
    --blue-pale-2: #A1D2EF; /* Baby Blue Eyes #2 */
    --blue-dark:   #465C69; /* Deep Space Sparkle */

    /* Utility / strokes */
    --stroke: #AFAFAF;
    --br-sml: 4px;
    --br-med: 10px;
    --br-large: 20px;
    --acc: var(--green-dark);

}

@font-face {
	font-family: MFred;
	src: url(dist/fonts/MFred.ttf) format("truetype"), url(dist/fonts/MFred.woff2) format("woff2"), url(dist/fonts/MFred.woff) format("woff"), url(dist/fonts/MFred.eot) format("eot");
	font-weight: 400;
	font-style: normal
}

@font-face {
	font-family: Gotham;
	src: url(dist/fonts/Gotham-Light.woff2) format("woff2"), url(dist/fonts/Gotham-Light.woff) format("woff"), url(dist/fonts/Gotham-Light.ttf) format("truetype");
	font-weight: 300;
	font-style: normal;
	font-display: swap
}

@font-face {
	font-family: Gotham Book;
	src: url(dist/fonts/Gotham-Book.woff2) format("woff2"), url(dist/fonts/Gotham-Book.woff) format("woff"), url(dist/fonts/Gotham-Book.ttf) format("truetype");
	font-weight: 400;
	font-style: normal;
	font-display: swap
}



/* Global Styles */
html {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	font-size: 16px
}

body {
	font-family: Gotham Book;
	font-weight: 400;
	font-style: normal;
    margin: 0;
}

h1, .e-heading-1,
h2, .e-heading-2 {
    font-family: MFred;
    font-weight: 400;
    font-style: normal;
    color: var(--dark);
    margin-bottom: 1em;
    line-height: 1.2;
    text-transform: uppercase;
}

h1, .e-heading-1{font-size: 4.6rem;}
h2, .e-heading-2{font-size: 3.8rem;}

h3, .e-heading-3,
h4, .e-heading-4,
h5, .e-heading-5,
h6, .e-heading-6 {
    font-family: Gotham;
    font-weight: 500;
    font-style: normal;
    color: var(--dark);
    margin-bottom: 1em;
    line-height: 1.2;
    font-size: 2rem;
}

p{
    margin-bottom: 1em;
    color: var(--dark);
}

.e-btn, .btn, .button {
	display: inline-block;
	padding: 1em 1.4em;
	text-decoration: none;
	text-align: center;
	font-size: 1rem;
	line-height: 1;
	color: var(--white);
	background-color: var(--acc);
	transition: color .4s ease-in-out, background-color .4s ease-in-out, border-color .4s ease-in-out;
	border-radius: var(--br-sml);
	outline: none;
	border: none;
	min-width: 150px;
}

.e-btn:hover, .btn:hover, .button:hover {
    background: var(--dark);
}

}

/* Header */


.page-template-page-services-2026 header{
	position: fixed;
}


header .phone-numbers{
    background: #465C69;
    padding: 10px 0;
    transition: ease-in-out 0.4s;
}

header .phone-numbers .numbers{
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;

    max-width: 1400px;
    margin: 0 auto;
    width: calc(100% - 20px);
}

header .phone-numbers .numbers li a{
	color: #fff;
	font-size: 14px;
	transition: ease-in-out 0.4s;
}

header .phone-numbers .numbers li a span.number{
	color: inherit;
}

header .phone-numbers .numbers li a span.number > span{
	font-weight: 700;
}

.page-template-page-services-2026 header#masthead.active-header .phone-numbers{
	max-height: 0;
	padding: 0;
}
.page-template-page-services-2026 header#masthead.active-header .phone-numbers li a{
	opacity: 0;
	line-height: 0;
	pointer-events: none;
}


.page-template-page-services-2026 header .header .b-main-header__inner{
	max-width: 1400px;
    margin: 0 auto;
    width: calc(100% - 20px);
    padding: 24px 0;
    transition: ease-in-out 0.4s;
}

.page-template-page-services-2026 header#masthead.active-header .header .b-main-header__inner{
	padding: 10px 0;
}

.page-template-page-services-2026 header .nav-wrap{
	background: #f7f7f7;
}

.page-template-page-services-2026 header .nav-wrap #site-navigation{
	text-align: left;
	margin: 0;
}
.page-template-page-services-2026 header .nav-wrap #site-navigation li a{
	color: var(--dark);
	text-transform: none;
	font-size: 14px !important;
	transition: ease-in-out 0.4s;
}
.page-template-page-services-2026 header .nav-wrap #site-navigation li a:after{
	filter: invert(1);
}

.page-template-page-services-2026 header .nav-wrap nav#site-navigation li:hover ul li {
	background: #fff;
}

.page-template-page-services-2026 header#masthead.active-header .nav-wrap #site-navigation li a{
    padding-top: 12px;
    padding-bottom: 12px;
    font-weight: 300;
}


.page-template-page-services-2026 main{
	padding-top: 180px;
}