/*
Theme Name: Brixa
Theme URI: https://brixa.com.au
Author: Brixa
Description: Custom theme for Brixa — construction & property solutions. Built from the Brixa brand catalog with a live customizer for colors, contact details and key page text.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: brixa
*/

:root{
  --navy:#0A1B2E;
  --navy2:#0F2740;
  --green:#1E8A3C;
  --green-dark:#146429;
  --green-light:#E8F5EC;
  --cream:#F7F5F0;
  --ink:#16202B;
  --gray:#5B6672;
  --line:#E4E1D8;
  --white:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  color:var(--ink);
  margin:0;
  background:#fff;
}
h1,h2,h3,h4{font-family:'Archivo',sans-serif; letter-spacing:-0.01em; margin:0;}
a{text-decoration:none; color:inherit;}
img{max-width:100%; display:block;}
ul{list-style:none; margin:0; padding:0;}
.container{max-width:1200px; margin:0 auto; padding:0 32px;}

/* Buttons */
.btn{
  display:inline-block; font-family:'Inter'; font-size:13px; font-weight:600;
  padding:12px 22px; border-radius:4px; cursor:pointer; letter-spacing:.01em; border:1px solid transparent;
}
.btn-green{background:var(--green); color:#fff; border-color:var(--green);}
.btn-green:hover{background:var(--green-dark);}
.btn-ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.4);}
.btn-ghost:hover{border-color:#fff;}
.btn-outline-navy{background:transparent; color:var(--navy); border-color:var(--navy);}

/* Eyebrow label */
.eyebrow{
  display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;
  color:var(--green); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px;
}
.eyebrow::before{content:''; width:18px; height:2px; background:var(--green); display:block;}

/* Header */
.site-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:18px 32px; background:var(--navy); position:relative; z-index:10;
}
.site-branding img{height:108px !important; width:auto; max-width:none; display:block; align-self:flex-start; padding-top:10px;}.site-branding{font-family:'Archivo'; font-weight:800; color:#fff; font-size:20px; letter-spacing:.02em; align-self:flex-start; padding-top:10px;}
.main-nav ul{display:flex; gap:30px;}
.main-nav a{font-size:18px; font-weight:500; color:#C9D2DB;}
.main-nav a:hover, .main-nav .current-menu-item a{color:#fff;}
.header-cta{display:flex; align-items:center; gap:20px;}
.menu-toggle{display:none; background:none; border:0; color:#fff; font-size:22px; cursor:pointer;}

@media(max-width:880px){
  .main-nav{display:none; position:absolute; top:100%; left:0; right:0; background:var(--navy); padding:10px 32px 20px;}
  .main-nav.is-open{display:block;}
  .main-nav ul{flex-direction:column; gap:14px;}
  .menu-toggle{display:block;}
  .header-cta .btn{display:none;}
}

/* Hero */
.hero{background:var(--navy); display:flex; align-items:center; gap:40px; padding:64px 32px; flex-wrap:wrap;}
.hero-text{flex:1 1 380px; color:#fff;}
.hero-text h1{font-size:38px; line-height:1.18; font-weight:800; margin-bottom:16px;}
.hero-text h1 .accent{color:var(--green);}
.hero-text p{font-size:15px; color:#AEB9C4; max-width:420px; line-height:1.7; margin-bottom:26px;}
.hero-actions{display:flex; gap:12px; margin-bottom:30px; flex-wrap:wrap;}
.hero-badges{display:flex; gap:24px; border-top:1px solid rgba(255,255,255,.12); padding-top:18px; flex-wrap:wrap;}
.hero-badges span{font-size:11px; color:#9BA8B5; font-weight:600;}
.hero-media{flex:0 0 auto; display:flex; justify-content:center;}
.hero-media .frame{position:relative; width:600px; height:390px; flex-shrink:0; border-radius:6px; overflow:hidden; border:1px solid rgba(255,255,255,.15); box-shadow:0 24px 48px rgba(0,0,0,.35);}
@media(max-width:768px){
	.hero-media{flex:1 1 100% !important; width:100%;}
	.hero-media .frame{width:100% !important; max-width:100%; height:280px;}
}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:right;}
.hero-media .fade{position:absolute; inset:0; background:linear-gradient(to right, var(--navy) 0%, rgba(10,27,46,0) 12%); pointer-events:none;}

/* Sections */
.section{padding:64px 32px;}
.section-cream{background:var(--cream);}
.section-title{font-size:26px; font-weight:800; color:var(--navy); margin-bottom:10px;}
.section-lead{font-size:14px; color:var(--gray); max-width:560px; line-height:1.7; margin-bottom:32px;}

/* Cards grid */
.card-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
@media(max-width:880px){.card-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:520px){.card-grid{grid-template-columns:1fr;}}
.service-card{border:1px solid var(--line); border-radius:8px; padding:26px 22px; background:#fff;}
.service-card .icon{width:120px; height:120px; border-radius:8px; background:var(--green-light); color:var(--green-dark); display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:14px; overflow:hidden;}
.service-card h4{font-size:14px; font-weight:600; margin-bottom:6px;}
.service-card p{font-size:12px; color:var(--gray); line-height:1.6; margin:0;}

.tile-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px;}
@media(max-width:880px){.tile-grid{grid-template-columns:1fr 1fr;}}
.tile{border-radius:8px; padding:18px; color:#fff;}
.tile.navy{background:var(--navy);}
.tile.green{background:var(--green-dark);}
.tile .tile-icon{width:34px; height:34px; border-radius:8px; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; margin-bottom:12px;}
.tile .tile-icon svg{width:19px; height:19px;}
.tile b{display:block; font-size:12.5px; font-weight:700; margin-bottom:4px;}
.tile span{font-size:11px; opacity:.7;}

.service-card .icon svg{width:20px; height:20px;}
.service-card .icon img{width:110px; height:110px; object-fit:contain; display:block;}

/* Why choose strip */
.why-strip{background:var(--cream); padding:28px 32px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;}
.why-strip div{font-size:13px; font-weight:600; color:var(--navy);}

/* About */
.about-wrap{display:flex; gap:44px; padding:64px 32px; flex-wrap:wrap; align-items:center;}
.about-text{flex:1 1 380px;}
.about-text h2{font-size:28px; font-weight:800; color:var(--navy); margin-bottom:16px;}
.about-text p{font-size:14px; color:var(--gray); line-height:1.8; margin-bottom:14px;}
.about-media{width:700px; flex-shrink:0; height:360px; border-radius:6px; overflow:hidden; border:1px solid var(--line);}
.about-media img{width:100%; height:100%; object-fit:cover;}
.mv-cards{display:flex; gap:14px; margin-top:20px; flex-wrap:wrap;}
.mv-card{border:1px solid var(--line); border-radius:8px; padding:16px; flex:1 1 160px;}
.mv-card b{display:block; font-size:12px; color:var(--green-dark); margin-bottom:6px;}
.mv-card p{font-size:12px; color:var(--gray); margin:0; line-height:1.6;}

/* Process */
.process{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; position:relative;}
.process-step{text-align:center; flex:1 1 100px;}
.process-step .num{width:34px; height:34px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; margin:0 auto 10px;}
.process-step.done .num{background:var(--green);}
.process-step div.label{font-size:12px; font-weight:600; color:var(--navy);}

/* Quote banner */
.quote-banner{background:var(--navy); padding:34px 32px; text-align:center;}
.quote-banner p{color:#fff; font-size:16px; font-style:italic; font-family:'Archivo'; margin:0;}

/* Contact */
.contact-wrap{display:flex; gap:40px; padding:64px 32px; flex-wrap:wrap;}
.contact-form{flex:1.2 1 340px;}
.contact-form .row{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:14px;}
.contact-form input, .contact-form textarea, .contact-form select{
  width:100%; border:1px solid var(--line); border-radius:6px; padding:12px 14px; font-size:13px; font-family:'Inter'; margin-bottom:14px;
}
.contact-form textarea{min-height:110px; resize:vertical;}
.contact-info{flex:0.8 1 260px; background:var(--navy); border-radius:10px; padding:30px; color:#fff; height:fit-content;}
.contact-info h3{font-size:16px; font-weight:700; margin-bottom:20px;}
.contact-info .item{margin-bottom:16px;}
.contact-info .item .label{font-size:11.5px; color:#AEB9C4; margin-bottom:3px;}
.contact-info .item .value{font-size:13.5px; color:#fff;}
.form-notice{padding:12px 16px; border-radius:6px; font-size:13px; margin-bottom:18px;}
.form-notice.success{background:var(--green-light); color:var(--green-dark);}
.form-notice.error{background:#FBEAEA; color:#A23B3B;}

/* Footer */
.site-footer{background:var(--navy); color:#B9C2CC; padding:44px 32px 22px;}
.footer-grid{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:26px;}
.footer-col{max-width:260px;}
.footer-col img{height:56px !important; width:auto !important; margin-bottom:12px;}
.footer-col h4{color:#fff; font-size:13px; margin-bottom:12px; font-weight:600;}
.footer-col p{font-size:12px; color:#9AA6B2; line-height:1.9;}
.footer-col li{font-size:12px; color:#9AA6B2; line-height:2.1;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1); padding-top:16px; font-size:11px; color:#7A8694; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px;}

/* Page banner (for About/Services/Contact top) */
.page-banner{background:var(--navy); color:#fff; padding:50px 32px; text-align:center;}
.page-banner h1{font-size:30px; font-weight:800;}
/* quick global bump */
h1, h2, h3, h4 { font-size: calc(1em + 4px) !important; }
p { font-size: calc(1em + 8px) !important; }

/* ===== About page redesign additions ===== */

.process-graphic{display:flex; align-items:flex-start; position:relative; max-width:1000px; margin-top:20px;}
.process-line{position:absolute; top:28px; left:56px; right:56px; height:2px; background:repeating-linear-gradient(to right, var(--navy) 0, var(--navy) 6px, transparent 6px, transparent 12px);}
.process-node{flex:1; text-align:center; position:relative; z-index:1; padding:0 8px;}
.process-circle{width:56px; height:56px; border-radius:50%; background:var(--navy); color:#fff; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; border:4px solid var(--cream); box-shadow:0 2px 6px rgba(10,27,46,.15);}
.process-circle svg{width:24px; height:24px;}
.process-node.done .process-circle{background:var(--green);}
.process-label{font-size:12.5px; font-weight:700; color:var(--navy); margin-bottom:4px;}
.process-sub{font-size:11px; color:var(--gray); line-height:1.6;}
@media(max-width:880px){
	.process-graphic{flex-direction:column; gap:24px;}
	.process-line{display:none;}
}

.why-grid{display:grid; grid-template-columns:1fr 1fr; gap:26px 44px; margin-top:22px;}
@media(max-width:700px){.why-grid{grid-template-columns:1fr;}}
.why-item{display:flex; gap:14px;}
.why-item .n{font-size:11px; font-weight:700; color:var(--green-dark); flex-shrink:0; width:24px; padding-top:2px;}
.why-item b{display:block; font-size:13.5px; margin-bottom:4px; color:var(--navy);}
.why-item p{font-size:12px; color:var(--gray); margin:0; line-height:1.65;}

.mvv-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:0;}
@media(max-width:880px){.mvv-grid{grid-template-columns:1fr;}}
.mvv-card{padding:40px 32px; min-height:220px; display:flex; flex-direction:column; justify-content:center;}
.mvv-card h3{font-size:19px; font-weight:700; line-height:1.35; margin:10px 0 0;}
.mvv-card p{font-size:12.5px; margin-top:10px; line-height:1.6;}
.mvv-card.navy{background:var(--navy); color:#fff;}
.mvv-card.photo{background:var(--green-dark); color:#fff;}
.mvv-card.cream{background:var(--cream); color:var(--ink);}

.closing-cta{background:var(--navy); padding:56px 32px; text-align:center; color:#fff;}
.closing-cta h2{font-size:28px; font-weight:800; margin:0;}
.closing-cta .btns{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}

@media (max-width: 767px) {

    .hero {
        display: flex;
        flex-direction: column;
        gap: 35px;
        padding: 50px 20px;
        box-sizing: border-box;
    }

    .hero-text {
        width: 100%;
        max-width: 100%;
        text-align: center;
    }

    .hero-text h1 {
        font-size: clamp(34px, 9vw, 52px);
        line-height: 1.1;
        margin: 15px 0;
    }

    .hero-text p {
        font-size: 15px;
        line-height: 1.7;
    }

    .hero-actions {
        display: flex;
        flex-direction: column;
        width: 100%;
        gap: 12px;
    }

    .hero-actions .btn {
        width: 100%;
        box-sizing: border-box;
        text-align: center;
    }

    .hero-badges {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
        font-size: 11px;
    }

    .hero-media {
        width: 100%;
    }

    .hero-media .frame {
        width: 100%;
    }

    .hero-media img {
        width: 100%;
        height: auto;
        display: block;
    }

}
/* ================================
   MOBILE OVERFLOW FIX
   ================================ */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

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

img,
video,
iframe,
svg {
    max-width: 100%;
}

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

.approach-wrap,
.approach-image,
.approach-image img {
    max-width: 100%;
    min-width: 0;
}

@media (max-width: 900px) {

    .approach-wrap {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .approach-image {
        position: static !important;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .approach-image img {
        display: block;
        width: 100%;
        max-width: 100%;
        height: auto;
    }

    .about-media {
        width: 100%;
        max-width: 100%;
    }

    .hero-media .frame {
        width: 100%;
        max-width: 100%;
    }

    .contact-wrap,
    .about-wrap,
    .hero,
    .section {
        max-width: 100%;
    }
.hero-media img{height:100% !important; object-fit:cover !important;}
}