/*
Theme Name: BlankSlate Child
Theme URI: https://adrianbeal.com
Description: Child theme for the Archers Fans website.
Author: Adrian Beal
Template: blankslate
Version: 1.0
Text Domain: blankslate-child
*/

/* Put your own CSS below this line */





/*
IMPORTANT — WORDPRESS / THEME-GENERATED CLASS NAMES

Selectors marked "WORDPRESS CLASS — DO NOT RENAME" are generated by
WordPress or the BlankSlate theme. Their spelling must remain exactly
as WordPress outputs it.

All classes created specifically for this website use PascalCase:
.PageContainer, .ServiceBox, .CustomerQuote, etc.
*/

/* ---------------------------------------------------------
   HOME PAGE
--------------------------------------------------------- */


/* FONTS */

@font-face {
    font-family: "LondrinaShadow";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Londrina_Shadow/LondrinaShadow-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic1";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/ChalktasticItalic-pEwZ.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic2";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/Chalktastic-x1nR.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic3";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/Chalktastic-r78L.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Chalktastic4";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Chalktastic/ChalktasticItalic-YYA4.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "PatrickHand";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Patrick_Hand/PatrickHand-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "EraserRegular";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Eraser/EraserRegular-DO1D.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "EraserDust";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Eraser/EraserDust-p70d.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "ArchitectsDaughter";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Architects_Daughter/ArchitectsDaughter-Regular.ttf")
         format("truetype");
    font-display: swap;
}

@font-face {
    font-family: "Sriracha";
    src: url("/wp-content/themes/blankslate-child/assets/fonts/Sriracha/Sriracha-Regular.ttf")
         format("truetype");
    font-display: swap;
}


/* FONT CLASSES */

.FontLondrinaShadow {
    font-family: "LondrinaShadow", sans-serif;
}

.FontChalktastic1 {
    font-family: "Chalktastic1", sans-serif;
}

.FontChalktastic2 {
    font-family: "Chalktastic2", sans-serif;
}

.FontChalktastic3 {
    font-family: "Chalktastic3", sans-serif;
}

.FontChalktastic4 {
    font-family: "Chalktastic4", sans-serif;
}

.FontPatrickHand {
    font-family: "PatrickHand", sans-serif;
}

.FontEraserRegular {
    font-family: "EraserRegular", sans-serif;
}

.FontEraserDust {
    font-family: "EraserDust", sans-serif;
}

.FontArchitectsDaughter {
    font-family: "ArchitectsDaughter", sans-serif;
}

.FontSriracha {
    font-family: "Sriracha", sans-serif;
}



/* GENERAL PAGE STRUCTURE */

body {
    margin: 0;
    padding: 30px;
	background-image:url("assets/images/BgBlackLeather.jpg");
	font-family: Arial, Helvetica, sans-serif;
}

.PageWrapper {
    width: 100%;
	background-image:url("assets/images/BgGrayLeather.jpg");
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;
    line-height: 1.5em;
    box-sizing: border-box;  
	font-family: Arial, Helvetica, sans-serif;
}

.PageContainer {
	background-image:url("assets/images/BgCreamLeather.jpg");
    width: 100%;
    max-width: 1200px;
    margin: 0 0 0 0;
    padding: 1em;
    box-sizing: border-box;
}

.PageContainer p {
    margin: 0 0 1em 0;
}




/* CONTAINER FORMATTING */

.ContainerPosition {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.ContainerStory {
    flex: 1 1 0;
    min-width: 0;
    padding: 10px;
    box-sizing: border-box;
    text-align: center;
    border: 3px inset #000;
    background: linear-gradient(to bottom, #bddbfa 5%, #80b5ea 100%);
}




/* TEXT FORMATTING */

.PageHeading {
	text-align: center;
	font-weight: bold;
	line-height:2em;
	font-size: 1.2em;
}


.BoldText {
	font-weight: bold;
}

.CenterText {
	text-align: center;
}

.JustifyText {
	text-align: justify;
}

.RightText {
	text-align: right;
}


.SectionText {
    text-align: justify;
    font-size: 1rem;
    margin-top: 2em;
}

.SectionHeading {
	font-weight: bold;
    font-size: 1.3em;
}

.PlumberLinks {
    display: flex;
    gap: 1em;
    width: 100%;
}

.PlumberLink {
    flex: 1;
    text-align: center;
}





/* HOME HEADER */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-header {
    width: 100%;
    background: #ffffff;
    border-bottom: 2px solid #333333;
}
/* WORDPRESS CLASS — DO NOT RENAME */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-header-branding {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;

    display: flex;
    align-items: center;
    gap: 1em;

    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-header-branding > a {
    display: block;
    flex: 0 0 auto;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-logo {
    display: block;
	height: auto;
}


.site-logo img {
	width: clamp(2.5em, 8vw, 7em);
	height: auto;
}


/* HOME FOOTER */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer {
    width: 100%;
    background: #ffffff;
    margin-top: 0;
    padding: 1em;
    border-top: 1px solid #666666;
    text-align: center;
    box-sizing: border-box; 
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer .site-footer {
    margin: 0;
    color: #666666;
    font-size: 0.9em;
}
/* WORDPRESS CLASS — DO NOT RENAME */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer-branding {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1em;

    display: flex;
    align-items: center;
    gap: 1em;

    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-footer-branding > a {
    display: block;
    flex: 0 0 auto;
}





/* HOME SITE TITLE */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-title {
    display: flex;
    flex-direction: column;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-title h1 {
    margin: 0;
    color: #222222;
	font-size: clamp(2.1rem, 5vw, 3rem);
    line-height: 1.1;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-tagline {
    margin: 0.3em 0 0;
    color: #666666;
    font-size: 0.9em;
}



/* HOME NAVIGATION */
/* WORDPRESS CLASS — DO NOT RENAME */

.site-navigation {
    width: 100%;
    border-top: 1px solid #dddddd;
}

/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.5em 1em;
    background: linear-gradient(to bottom, #7da64b 0%, #5d8133 100%);
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;

    list-style: none;
    box-sizing: border-box;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu li {
    margin: 0;
    padding: 0;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu a {
    display: block;
    padding: 0.6em 0.9em;

    color: #222222;
    text-decoration: none;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu a:hover,
/* WORDPRESS CLASS — DO NOT RENAME */
.site-menu a:focus {
    text-decoration: underline;
}
/* WORDPRESS CLASS — DO NOT RENAME */

.site-menu .current-menu-item > a,
/* WORDPRESS CLASS — DO NOT RENAME */
.site-menu .current_page_item > a {
    font-weight: bold;
    text-decoration: underline;
}


/* IMAGES */

img {
    max-width: 100%;
    height: auto;
}





/* MOBILE HOME HEADER */

@media screen and (max-width: 750px) {
/* WORDPRESS CLASS — DO NOT RENAME */
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-header-branding {
        display: block;
        text-align: center;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-logo {
        margin: 0 auto;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-title {
        margin-top: 1em;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-navigation {
        margin-top: 0;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-menu {
        display: block;
        text-align: center;
    }
/* WORDPRESS CLASS — DO NOT RENAME */

    .site-menu a {
        padding: 0.7em;
    }
}





/* =========================================================
   =========================================================

   HANDYMAN HOME PAGE
   Clean rebuild

   =========================================================
   ========================================================= */


/* =========================================================
   GENERAL
   ========================================================= */

.HandymanHome {
    width:100%;
    max-width:100%;
    margin:0;
    color:#17213a;
    box-sizing:border-box;
}

.HandymanHome *,
.HandymanHome *::before,
.HandymanHome *::after {
    box-sizing:border-box;
}

.HandymanHome img {
    display:block;
    max-width:100%;
}

.HandymanHome p {
    margin:0 0 1em;
}

.HandymanHome h1,
.HandymanHome h2,
.HandymanHome h3 {
    margin-top:0;
}

.HandymanHomeKicker {
    margin:0 0 0.7em;
    color:#467606;
    font-size:clamp(0.7rem, 1.2vw, 0.9rem);
    font-weight:800;
    line-height:1.3;
    letter-spacing:0.16em;
    text-transform:uppercase;
}

.HandymanHomeSectionHeading {
    max-width:52em;
    margin:0 auto 2.5em;
    text-align:center;
}

.HandymanHomeSectionHeading h2 {
    margin-bottom:0.45em;
    color:#0625BB;
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.1;
}

.HandymanHomeSectionHeading > p:last-child {
    max-width:44em;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:0;
    line-height:1.65;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.HandymanHomeButton {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0.8em 1.3em;
    border:2px solid #0625BB;
    border-radius:0.4em;
    font-weight:800;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
}

.HandymanHomeButtonBlue {
    background:#0625BB;
    color:#ffffff;
}

.HandymanHomeButtonWhite {
    background:#ffffff;
    color:#0625BB;
}

.HandymanHomeButtonYellow {
    background:#FFD700;
    border-color:#FFD700;
    color:#0625BB;
}


/* =========================================================
   HERO
   ========================================================= */

.HandymanHomeHero {
    margin-bottom:5em;
}

.HandymanHomeHeroImage {
    position:relative;
    z-index:1;
    width:100%;
    overflow:hidden;
    border-radius:0.65em;
}


.HandymanHomeHeroImage img {
    width:100%;
    height:auto;
}

.HandymanHomeHeroText {
    position:relative;
    z-index:10;

    width:86%;
    max-width:58em;

    margin:-4em auto 0;

    padding:clamp(1.8em, 4vw, 3.2em);

    background:#fffdf5;

    border-top:0.4em solid #0625BB;
    border-radius:0.5em;

    box-shadow:0 0.8em 2em rgba(23, 33, 58, 0.16);

    text-align:center;
}


.HandymanHomeHeroText h2 {
    margin-bottom:0.55em;
    color:#17213a;
    font-size:clamp(2rem, 5vw, 4.1rem);
    line-height:1.05;
}

.HandymanHomeHeroText h2 span {
    color:#0625BB;
}

.HandymanHomeHeroLead {
    max-width:43em;
    margin:0 auto 1.5em;
    font-size:clamp(1rem, 1.7vw, 1.25rem);
    line-height:1.65;
}

.HandymanHomeHeroButtons {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.8em;
}


/* =========================================================
   SERVICES
   ========================================================= */

/* =========================================================
   SERVICES
   Two cards per row
   Each card contains its own image and text
   ========================================================= */

.HandymanHomeServices {
    margin-bottom:5em;
}

.HandymanHomeServicesGrid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25em;
    width:100%;
}

.HandymanHomeServiceCard {
	display:flex !important;
    flex-direction:column !important;
    overflow:hidden;
    min-width:0;
    background:#ffffff;
    border:1px solid rgba(6, 37, 187, 0.13);
    border-radius:0.55em;
    box-shadow:0 0.4em 1.1em rgba(23, 33, 58, 0.10);
    color:#17213a;
    text-decoration:none;
}

.HandymanHomeServiceCard > img {
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto;
    aspect-ratio:4 / 3;
    object-fit:cover;
    margin:0 !important;
}


.HandymanHomeServiceCard > div {
    display:flex;
    flex:1;
    flex-direction:column;

    padding:1.25em;

    text-align:left;
}

.HandymanHomeServiceNumber {
    margin-bottom:0.45em;

    color:#467606;

    font-size:0.8em;
    font-weight:800;
}

.HandymanHomeServiceCard h3 {
    margin-bottom:0.55em;

    color:#0625BB;

    font-size:1.25em;
    line-height:1.22;
}

.HandymanHomeServiceCard p {
    line-height:1.55;
}

.HandymanHomeServiceCardText > a {
    margin-top:auto;
    color:#467606;
    font-weight:800;
    text-decoration:none !important;
}

.HandymanHomeServiceCardGeneral {
    background:
        linear-gradient(
            135deg,
            rgba(6, 37, 187, 0.055),
            rgba(255, 215, 0, 0.10)
        ),
        #ffffff;
}

/* =========================================================
   WHY DMYTRO
   ========================================================= */

.HandymanHomeWhy {
    display:flex;
    gap:3em;
    margin-bottom:5em;
    padding:clamp(2.5em, 5vw, 4em);
    background:#17213a;
    border-radius:0.65em;
    color:#ffffff;
}

.HandymanHomeWhyIntro {
    flex:0 0 34%;
}

.HandymanHomeWhy .HandymanHomeKicker {
    color:#FFD700;
}

.HandymanHomeWhyIntro h2 {
    margin-bottom:0.65em;
    color:#ffffff;
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.08;
}

.HandymanHomeWhyIntro p:last-child {
    margin-bottom:0;
    line-height:1.65;
}

.HandymanHomeWhySteps {
    flex:1;
    display:flex;
    flex-wrap:wrap;
    gap:1em;
}

.HandymanHomeWhySteps > div {
    width:calc(50% - 0.5em);
    padding:1.3em;
    background:rgba(255, 255, 255, 0.07);
    border:1px solid rgba(255, 255, 255, 0.14);
    border-radius:0.4em;
    text-align:left;
}

.HandymanHomeWhySteps span {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:2.5em;
    height:2.5em;
    margin-bottom:0.8em;
    background:#FFD700;
    border-radius:50%;
    color:#0625BB;
    font-weight:800;
    line-height:1;
}

.HandymanHomeWhySteps h3 {
    margin-bottom:0.4em;
    color:#FFD700;
    font-size:1.25em;
}

.HandymanHomeWhySteps p {
    margin-bottom:0;
    line-height:1.55;
}


/* =========================================================
   FEATURED WORK
   ========================================================= */

.HandymanHomeWork {
    margin-bottom:5em;
}

.HandymanHomeWorkGrid {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:1.25em;
    width:100%;
}

.HandymanHomeWorkCard {
    display:flex;
    flex-direction:column;
    overflow:hidden;

    background:#ffffff;

    border:1px solid rgba(6, 37, 187, 0.12);
    border-radius:0.55em;

    box-shadow:0 0.4em 1.1em rgba(23, 33, 58, 0.11);
}

.HandymanHomeWorkCard > img {
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
}

.HandymanHomeWorkCardText {
    display:flex;
    flex:1;
    flex-direction:column;

    padding:1.1em 1.2em 1.25em;

    text-align:left;
}

.HandymanHomeWorkCardText small {
    display:block;

    margin-bottom:0.4em;

    color:#467606;

    font-weight:800;
    letter-spacing:0.12em;
}

.HandymanHomeWorkCardText h3 {
    margin-bottom:0.4em;

    color:#0625BB;

    font-size:1.3em;
}

.HandymanHomeWorkCardText > a {
    margin-top:auto;

    color:#467606;

    font-weight:800;

    text-decoration:none !important;
}

/* =========================================================
   ABOUT
   ========================================================= */

.HandymanHomeAbout {
    display:flex;
    margin-bottom:5em;
    overflow:hidden;
    background:#f7f1df;
    border-radius:0.65em;
}

.HandymanHomeAboutImage {
    flex:0 0 50%;
}

.HandymanHomeAboutImage img {
    width:100%;
    height:100%;
    object-fit:cover;
}

.HandymanHomeAboutText {
    flex:1;
    padding:clamp(2em, 5vw, 4em);
    text-align:left;
}

.HandymanHomeAboutText h2 {
    margin-bottom:0.65em;
    color:#0625BB;
    font-size:clamp(1.8rem, 3vw, 2.8rem);
    line-height:1.15;
}

.HandymanHomeAboutText p {
    line-height:1.65;
}

.HandymanHomeTextLink {
    color:#0625BB;
    font-weight:800;
    text-decoration:underline;
    text-underline-offset:0.2em;
}


/* =========================================================
   CONTACT
   ========================================================= */

.HandymanHomeContact {
    margin-bottom:3em;
    padding:clamp(2.5em, 6vw, 5em);
    background:#0625BB;
    border-radius:0.65em;
    color:#ffffff;
    text-align:center;
}

.HandymanHomeContact .HandymanHomeKicker {
    color:#FFD700;
}

.HandymanHomeContact h2 {
    max-width:20em;
    margin:0 auto 0.65em;
    color:#ffffff;
    font-size:clamp(2rem, 4vw, 3.2rem);
    line-height:1.12;
}

.HandymanHomeContact > p:not(.HandymanHomeKicker) {
    max-width:42em;
    margin:0 auto 1.5em;
    line-height:1.65;
}


/* =========================================================
   TABLET
   ========================================================= */

@media screen and (max-width:900px) {

    .HandymanHomeServicesGrid {
        grid-template-columns:repeat(2, 1fr);
    }

    .HandymanHomeWhy {
        flex-direction:column;
    }

    .HandymanHomeWhyIntro {
        flex:0 0 auto;
    }

    .HandymanHomeHeroText {
        width:92%;
        margin:-3em auto 0;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width:600px) {

    .HandymanHomeHeroText {
        width:94%;
        margin:-2em auto 0;
        padding:1.4em;
    }

    .HandymanHomeHeroButtons {
        display:grid;
        grid-template-columns:1fr;
    }

    .HandymanHomeServicesGrid {
        grid-template-columns:1fr;
    }

    .HandymanHomeWorkGrid {
        grid-template-columns:1fr;
    }

    .HandymanHomeWhySteps > div {
        width:100%;
    }

    .HandymanHomeAbout {
        flex-direction:column;
    }

    .HandymanHomeAboutImage {
        flex:0 0 auto;
    }

    .HandymanHomeAboutImage img {
        height:auto;
    }

}