/*
Theme Name: Kanvas Kraft
Theme URI: https://kanvaskraft.com.au
Author: MOMO Media
Author URI: https://momomedia.com.au
Description: Lightweight custom theme for Kanvas Kraft in Perth.
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kanvas-kraft
*/

/* 
IMPORTANT:
This file should stay minimal.
All critical CSS goes into critical.cssAll non-critical CSS should be enqueued separately.
*/

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/Poppins-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal; /* optional, but recommended */
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('/assets/fonts/poppins-bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}


/* =========================
   Foundation – Global Styles
   ======================== */

body, h1, h2, h3, h4, h5, h6, p, a, li, button, blockquote, .elementor-button-text, div, span {font-family: 'Poppins', sans-serif;font-weight: 400;font-style: normal;}
h3 {font-weight: 400;}
h2 strong, h2 b {color: var(--e-global-color-primary);}
p, p a, p span, p strong, p bold, p i {font-size:17px;}




#mobile-menu .hfe-side {width:100%!important}



.popmake a {text-decoration:none!important; color:black!important}





.custom-lists ul {padding-left:0; list-style:none}
.custom-lists li{border: 1px dotted grey;padding: 10px 20px; float:left; margin:0 10px 10px 0;border-radius:30px}
.custom-lists li a {padding: 10px 0!important;}

@media screen and (min-width: 1280px) {
 h2 {font-size:35px!important;}
 h3 {font-size:25px!important;}
 main p, main li span, main li, main a {font-size:18px !important}	
}

@media screen and (min-width: 1800px) {
 h2 {font-size:38px!important;}
 h3 {font-size:27px!important;}
 main p, main li span, main li, main a {font-size:24px !important}	
}







#home-intro {margin: 0 auto;text-align: center; /* Centered for mobile */}

.intro-header h2 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 800;
}

.intro-header .subtitle {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 40px;
}

/* Text alignment for mobile */
.intro-copy {
    text-align: left;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* The Green Button */
.btn-primary {
    display: inline-block;
    background-color: #78be43; /* The lime green from your image */
    color: #000;
    padding: 15px 35px;
    border-radius: 50px; /* Rounded pill shape */
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.2s ease;
}

.btn-primary:hover {
    transform: scale(1.05);
}

.intro-media-side {
    margin-top: 40px;
}

.intro-media-side img {
    width: 100%;
    height: auto;
    border-radius: 4px; /* Matches the slight rounding on the black box */
}

/* DESKTOP VIEW */
@media (min-width: 992px) {
    .intro-grid-wrapper {
        display: flex;
        align-items: flex-start;
        gap: 60px;
        text-align: left;
    }

    .intro-text-side, 
    .intro-media-side {
        flex: 1;
        margin-top: 0;
    }

    .intro-copy {
        margin-bottom: 40px;
    }
}








/* ============================================================
   PRODUCT HERO — MOBILE FIRST
   ============================================================ */

/* BASE (MOBILE) */
#product-hero {
    display: grid;
    grid-template-columns: 1fr; /* Stack */
    gap: 30px;
    padding: 40px 20px;
}

/* LEFT (IMAGE) */
.product-hero-left {position: relative;min-height: 360px;background-size: cover;background-position: center;border-radius: 24px;overflow: hidden;display: flex;
align-items: flex-end; /* Push content to bottom */}

/* Overlay */
.product-hero-overlay {position: absolute;inset: 0;background: linear-gradient(to top,rgba(0,0,0,0.6),rgba(0,0,0,0.2),rgba(0,0,0,0));}

/* CONTENT */
.product-hero-content {position: relative;z-index: 2;padding: 30px;color: #fff;max-width: 100%;text-align: left;}

.hero-eyebrow {display: block;margin-bottom: 8px;color: #6cc04a;font-weight: 600;font-size: 0.85rem;letter-spacing: 0.5px;}
.product-hero-content h1 {font-size: 32px;line-height: 1.1;margin: 0; font-weight:600!important}
.btn-primary {display: inline-block;margin-top: 18px;background: #0085d0;color: #fff;padding: 14px 28px;border-radius: 30px;text-decoration: none;font-weight: 600;}

/* RIGHT (FORM) */
.product-hero-right {width: 100%;}
.quote-box {border: 1px solid #777;border-radius: 24px;padding: 30px;height: 100%;}
.quote-box h2 {margin:0}

@media (min-width: 768px) {

    #product-hero {grid-template-columns: 1.3fr 1fr; gap: 40px;padding: 60px 40px;align-items: stretch;}
    .product-hero-content {padding: 50px;}

}
@media (min-width: 1024px) {

}
@media (min-width: 1280px) {

}
@media (min-width: 1400px) {

}
@media (min-width: 1800px) {

}



.product-intro {text-align:center;}
.product-intro h2 {font-size: 28px;font-weight: 700;color: #0a78b8;margin-bottom: 16px;}
.product-intro .custom-lists p {font-size: 16px;line-height: 1.7;margin-bottom: 28px;color: #111;}
.product-intro .custom-lists ul {list-style: none;padding: 0;margin: 0;display: flex;flex-wrap: wrap;justify-content: center;gap: 12px;}
.product-intro .custom-lists li {padding: 12px 22px;font-size: 14px;font-weight: 600;color:white;border: 2px solid #0a78b8;border-radius: 999px;white-space: nowrap;background:var(--e-global-color-primary);}

@media (min-width: 768px) {
    .product-intro h2 {font-size: 42px;margin:0}
    .product-intro .custom-lists {max-width:1280px;margin: 0 auto;}
    .product-intro .custom-lists p {font-size:19px;}
    .product-intro .custom-lists li {padding:16px 30px;font-size:16px;}
}



/* ============================================================
   CONTENT BLOCK – MOBILE FIRST (CORRECT LOGIC)
   ============================================================ */

/* 1. Base Styles (Phones) */
.content-block {
    padding: 40px 0;
    overflow: hidden;
}

.cb-container {
    display: flex;
    flex-direction: column; /* Mobile stack */
    gap: 30px;
    margin: 0 auto;
    padding: 0 20px;
}

/* MOBILE ORDER: Image first, Text second */
.cb-image {
    order: 1;
}

.cb-text {
    order: 2;
}

/* Typography */
.cb-subtitle {color: #333;font-weight: 800;letter-spacing: 1px;display: block;margin-bottom: 8px;text-transform: uppercase;font-size: 13px;}
.cb-main-title {font-size: 1.8rem; line-height: 1.2; font-weight:bold;margin: 0 0 15px;color: #222;}

/* Pills */
.cb-application-pills {display: flex;flex-wrap: wrap;gap: 15px;margin: 20px 0;}
.cb-application-pills span {border: 1px solid #1a73e8;padding: 10px 15px;border-radius: 50px;font-size: 16px;color: #333;font-weight: 500;}

/* CTA */
button, .cta-btn, .quick-quote, button.forminator-button {    display: inline-block;
    background: #78be43;
    color: #fff;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 700;
    text-align: center;
    width: 100%;
    border: 0;
    font-size: 17px;
    padding: 15px 20px !important;
	height: 55px;}

/* Image */
.cb-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* ============================================================
   2. Tablet & Desktop (≥ 768px)
   ============================================================ */
@media (min-width: 768px) {

    .content-block {padding: 80px 0;}
    .cb-container {flex-direction: row;padding:0;align-items: center;gap: 50px;}
    .cb-text,.cb-image {flex: 1;}

    /* DESKTOP LAYOUT LOGIC (PARENT CONTROLS IT) */
    .content-block.cb-right .cb-text {order: 1;}
    .content-block.cb-right .cb-image {order: 2;}
    .content-block.cb-left .cb-image {order: 1;}
    .content-block.cb-left .cb-text {order: 2;}
    .cb-main-title {font-size: 2.5rem;}
    .cta-btn {width: auto;}
}

/* ============================================================
   3. Large Desktop (≥ 1024px)
   ============================================================ */
@media (min-width: 1024px) {
    .cb-container {gap: 80px;}
}

/* ============================================================
   4. XL Screens
   ============================================================ */
@media (min-width: 1280px) {
    .cb-container {max-width: 1200px;gap: 100px;}
    .cb-main-title {font-size: 2.8rem;}
    .cb-description {font-size: 1.05rem;line-height: 1.7;}
}

@media (min-width: 1400px) {
    .cb-container {max-width: 1320px;gap: 120px;}
    .cb-main-title {font-size: 3rem;}
    .cb-image img {border-radius: 16px;}
}

@media (min-width: 1800px) {
    .cb-container {max-width: 1600px;gap: 160px;}
    .cb-main-title {font-size: 3.4rem;}
    .cb-description {font-size: 1.15rem;line-height: 1.8;}
    .cta-btn {padding: 16px 40px;font-size: 1.05rem;}
}



/*Card Sliders*
 * /* Slider track */
.card-slider__track {display: flex;flex-wrap: nowrap;overflow-x: auto;scroll-behavior: smooth;gap: 24px;padding-bottom: 16px;}
/* Hide scrollbar */
.card-slider__track::-webkit-scrollbar {display: none;}

/* Cards */
.card-slider__card {flex: 0 0 auto;position: relative;border-radius: 16px;overflow: hidden;min-height: 320px;width: 80%;}

/* Image wrapper */
.card__image-wrapper {position: absolute;top: 0; left: 0; width: 100%; height: 100%;z-index: 0;}

.card__image-inner {width: 100%;height: 100%;object-fit: cover;}

/* Overlay */
.card__overlay {position: absolute;top: 0; left: 0; width: 100%; height: 100%;background: rgba(0,0,0,0.3);z-index: 1;}

/* Title */
.card__title {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
    padding: 1rem;
}

.card__title {
    position: absolute;
    bottom: 20px;       /* This creates the space from the bottom */
    left: 50%;          /* Move to middle */
    transform: translateX(-50%); /* Perfectly center horizontally */
    
    width: 90%;         /* Ensures long titles don't hit the edges */
    margin: 0;
    padding: 0;
    
    color: #ffffff;     /* Assuming white text looks best on overlays */
    font-size: 1.25rem;
    font-weight: 700;
    z-index: 10;        /* Keep it above the overlay */
    text-align: center;
    pointer-events: none; /* Allows clicks to pass through to the link if needed */
}

.slider-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 16px; /* space below slider */
  z-index: 1;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--e-global-color-secondary);
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Slider controls positioning */

/* Top right: heading row */
.card-slider__header {
    display: flex;
    justify-content: space-between; /* heading left, arrows right */
    align-items: center;
    margin-bottom: 16px;
}

.slider-controls.slider-controls--top-right {
    margin: 0;
}

/* Bottom middle: default */
.slider-controls.slider-controls--bottom-middle {
    justify-content: center;
    margin-top: 16px;
}

/* Bottom right */
.slider-controls.slider-controls--bottom-right {
    justify-content: flex-end;
    margin-top: 16px;
}

/* Ensure buttons stay same size and style */
.slider-controls .slider-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: var(--e-global-color-secondary);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s;
}

.slider-controls .slider-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


.card-slider--gallery .card-slider__card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills container, may crop edges */
}



/* Activate Grid Layout */
.card-slider__grid-display {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */
    gap: 24px;
    overflow: visible !important; /* Allow content to flow down */
}

/* Ensure individual cards fill the grid space */
.card-slider--is-grid .card-slider__card {
    width: 100% !important;
    margin-bottom: 0;
}

/* Responsive Grid */
@media (max-width: 992px) {
    .card-slider__grid-display {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .card-slider__grid-display {
        grid-template-columns: 1fr;
    }
}

/* Responsive widths for cards */
@media (min-width: 600px) {
    .card-slider__card { width: 45%; }
}

@media (min-width: 900px) {
    .card-slider__card { width: 30%; }
}

@media (min-width: 1200px) {
    .card-slider__card { width: 22%; }
}

/* Gallery-specific adjustments */
.card-slider--gallery .card-slider__card {
    flex: 0 0 85%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    background: #000;
}

.card-slider--gallery .card__image-wrapper,
.card-slider--gallery .card__image-inner {
    position: relative;
    height: 100%;
}

@media (min-width: 768px) {
    .card-slider--gallery .card-slider__card {
        flex: 0 0 45%;
        aspect-ratio: 1.5 / 1;
    }
}

@media (min-width: 1100px) {
    .card-slider--gallery .card-slider__card {
        flex: 0 0 calc(25% - 15px);
        aspect-ratio: 1.2 / 1;
    }
}






/* 2 Column Blocks*/
.two-col-block { display: flex;}
.two-col-block.reverse { flex-direction: column-reverse; }
.two-col-block.highlight { background-color: #f4f4f4; padding: 30px; }

/* --- Base Styles for Two Column Block --- */
.two-col-block {display: flex;flex-direction: column; /* mobile-first: stacked */
	gap: 20px;padding: 20px;align-items: flex-start;}

/* Left and Right columns */
.two-col-block .left,
.two-col-block .right {width: 100%;}

/* Headings and text */
.two-col-block .left h2 {font-size: 1.4rem;margin-bottom: 10px;}

.two-col-block .left div {
    font-size: 1rem;
    line-height: 1.5;
}

/* Images & videos */
.two-col-block .right img,
.two-col-block .right video {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Highlighted block background */
.two-col-block.highlight {
    background-color: #f4f4f4;
    padding: 25px 20px;
    border-radius: 10px;
}

/* Reverse layout for desktop */
@media (min-width: 768px) {
    .two-col-block {
        flex-direction: row; /* default left text, right media */
        align-items: center;
        gap: 40px;
    }

    /* Swap columns if reverse */
    .two-col-block.reverse {
        flex-direction: row-reverse;
    }

    .two-col-block .left,
    .two-col-block .right {
        width: 50%;
    }

    .two-col-block .left h2 {
        font-size: 2rem;
    }

    .two-col-block .left div {
        font-size: 1.1rem;
    }
}

/* Optional: adjust for large screens */
@media (min-width: 1200px) {
    .two-col-block {
        gap: 60px;
        padding: 40px 0;
    }
}





/* Product / Service Category Section */
/* Container */
.product-service-categories {
    width: 100%;
}

.product-grid-wrapper {
    display: flex;
    flex-direction: column; /* mobile first */
}

/* Left side: banner */
.product-media-side img.categories-gif {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 0; /* remove any rounding */
}

/* Right side: blue background */
.product-content-side {
    background-color: #1A89C6;
    padding: 30px 50px;
    display: flex;
    flex-direction: column;
}

/* Section header */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.section-title {padding:0; margin:0}
.section-title a {
    font-size:25px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}

.view-all-link {
    font-size: 1rem;
    color: #fff;
    text-decoration: underline;
}

/* Child pages / links */
.product-link-list {display: flex;flex-direction: column; /* mobile first */gap:0px;padding: 0;margin: 0;list-style: none;}
.product-link-list li {display: flex;justify-content: space-between; /* text left, arrow right */align-items: center;width: 100%;border-bottom: 1px solid rgba(255, 255, 255, 0.3);padding:5px 0;}
.product-link-list li a {color: #fff;padding:5px 0;text-decoration: none;flex-grow: 1; /* full width for text */}
.product-link-list li::after {
    content: "›"; /* arrow on the right */
    color: #fff;
    font-weight: bold;
    margin-left: 10px;
}

/* Desktop layout */
/* Desktop layout adjustments */
@media(min-width: 768px) {
    .product-grid-wrapper {flex-direction: row; /* Ensure children stretch to the height of the tallest child */align-items: stretch; display: flex;}
    .product-media-side {flex: 1;display: flex; /* Helps the image container fill the height */}
    .product-media-side img.categories-gif {width: 100%;/* Change height from auto to 100% to fill the flex container */height: 100%; object-fit: cover; display: block;}
    .product-content-side {flex: 1;/* Ensures content is distributed nicely even if the box is tall */display: flex;flex-direction: column;justify-content: center; }
}
/* Custom breakpoint for wider screens */
@media(min-width: 1200px) {
    .product-link-list {display: flex;flex-direction: row;flex-wrap: wrap;column-gap: 40px; }
    .product-link-list li {width: calc(50% - 20px); }
	.product-content-side .section-title a {
    font-size:35px;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
}


/* Container and Heading */
.faq-main-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #000;
    margin-top: 0 !important;
}

/* Individual Item */
.faq-item {
    border-bottom: 1px solid grey; /* Underline */
}

/* Hide native summary marker */
.faq-item summary {
    list-style: none;            /* Firefox */
    -webkit-appearance: none;    /* Chrome/Safari */
    appearance: none;            /* Standard */
    outline: none;               /* Remove focus outline */
    padding-left: 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* FAQ Question text */
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    padding: 1.5rem 0 !important;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    transition: color 0.3s ease;
}

.faq-question:hover {
    color: #000;
}

/* Answer Box */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: transparent;
}

.faq-answer.active {
    max-height: 500px; /* Adjust as needed */
}

.faq-answer-content {
    padding-bottom: 1.5rem;
    color: #666;
    line-height: 1.6;
}

/* Inline SVG Icon */
.faq-icon svg {
    width: 16px;
    height: 16px;
    display: inline-block;
    transition: transform 0.3s ease, color 0.3s ease;
    color: #000; /* Default icon color */
}

/* Rotate SVG on hover */
.faq-question:hover .faq-icon svg {
    transform: rotate(90deg);
    color: #1A89C6;
}

/* Rotate SVG when FAQ is open (details open or JS active) */
.faq-item[open] .faq-icon svg,
.faq-question.active .faq-icon svg {
    transform: rotate(180deg);
    color: #1A89C6;
}









#cta img {vertical-align:bottom!important}