/* =====================================
   TARNEIT CAMPAIGN STYLE
   Aijaz Moinuddin
   Independent Candidate for Tarneit
===================================== */


/* GLOBAL */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}


body{

    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
    color:#222;
    line-height:1.7;

}


.container{

    max-width:1280px;
    width:100%;
    margin:auto;
    padding:0 40px;

}



/* =====================================
 NAVIGATION
===================================== */


.campaign-nav{

    background:#071426;
    padding:15px 0;
    transition:.3s;

}


.campaign-nav img{

    width:170px;
    height:auto;

}


.campaign-nav .nav-link{

    color:white!important;
    font-weight:600;
    margin-left:20px;

}


.campaign-nav .nav-link:hover{

    color:#8BE35A!important;

}



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


.campaign-hero{

    min-height:850px;
    background:
    linear-gradient(135deg,#071426,#0b243f);

    display:flex;
    align-items:center;

    padding-top:100px;

    overflow:hidden;

}



.hero-grid{

    display:grid;
    grid-template-columns:55% 45%;
    align-items:center;
    gap:30px;

}



.hero-label{

    color:#8BE35A;
    font-size:18px;
    font-weight:700;
    letter-spacing:3px;
    margin-bottom:25px;

}



.hero-content h1{

    font-size:80px;
    line-height:.95;
    font-weight:900;
    color:white;
    margin-bottom:25px;

}



.hero-content h2{

    color:#8BE35A;
    font-size:36px;
    font-weight:800;
    margin-bottom:25px;

}



.hero-content p{

    color:#e8edf5;
    font-size:20px;
    max-width:650px;
    margin-bottom:40px;

}




.hero-buttons{

    display:flex;
    gap:20px;
    flex-wrap:wrap;

}



.btn{

    padding:15px 35px;
    border-radius:10px;
    font-weight:700;
    text-decoration:none;
    display:inline-block;

}



.btn-primary{

    background:#8BE35A;
    color:#071426;

}



.btn-outline{

    border:2px solid white;
    color:white;

}


.btn-outline:hover{

    background:white;
    color:#071426;

}



/* HERO IMAGE FIX */

.hero-image-box{

    display:flex;
    justify-content:center;
    align-items:center;

}


.hero-image{


    width:100%;
    max-width:460px;

    height:auto;

    object-fit:contain;

    position:relative;

    z-index:2;

}




/* =====================================
 SECTIONS
===================================== */


.section{

    padding:100px 0;

}



.grey-section{

    background:#eef3f8;

}




.section-heading{

    margin-bottom:60px;

}


.section-heading span{

    color:#5fae2d;
    font-size:16px;
    font-weight:700;
    letter-spacing:3px;

}



.section-heading h2{

    font-size:45px;
    font-weight:800;
    color:#071426;

}



.section-heading p{

    font-size:20px;

}



.center{

    text-align:center;

}



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


.about-grid{

    display:grid;
    grid-template-columns:1fr 500px;
    gap:70px;
    align-items:center;

}



.about-content p{

    font-size:19px;
    margin-bottom:25px;

}



.about-video-box{

    width:100%;
    max-width:500px;

}



/*.about-video{

    width:100%;
    height:auto;

    border-radius:20px;

    box-shadow:
    0 15px 40px rgba(0,0,0,.15);

}*/


.about-video {
    width: 100%;
    height: auto;
    display: block;
    background: #f4f5f7;
    border-radius: 12px;
}


.about-video-box {
    background: #f4f5f7;
    border-radius: 14px;
    padding: 8px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}


/*.about-video-box {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 14px;
    background: #f4f5f7;
}*/

/*about-video {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: 14px;
}*/

.about-video-box video {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}



/* =====================================
 EXPERIENCE TIMELINE
===================================== */


.timeline{

    position:relative;
    max-width:900px;
    margin:auto;

}



.timeline:before{

    content:"";
    position:absolute;

    left:50%;
    top:0;
    bottom:0;

    width:3px;

    background:#8BE35A;

}



.timeline-item{

    display:flex;
    justify-content:space-between;
    margin-bottom:40px;

}



.timeline-year{

    background:#071426;
    color:white;

    width:90px;
    height:90px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-weight:800;

}



.timeline-card{

    background:white;

    width:70%;

    padding:30px;

    border-radius:15px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.timeline-card h3{

    color:#071426;

}



/* =====================================
 PRIORITIES
===================================== */


.priority-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.priority-card{

    /*background:white;*/

    padding:40px 30px;

    text-align:center;

    border-radius:18px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

    transition:.3s;

    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;

}

.priority-card img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}


.priority-card:hover{

    transform:translateY(-8px);

}



.priority-card i{

    font-size:45px;

    color:#8BE35A;

    margin-bottom:20px;

}



.priority-card h3{

    color:#071426;

}



/* =====================================
 PETITIONS
===================================== */


.petition-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



.petition-card{

    background:white;

    padding:35px;

    border-radius:18px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.petition-icon{

    font-size:45px;

}



.petition-card h3{

    color:#071426;

}



.badge{

    display:inline-block;

    background:#8BE35A;

    color:#071426;

    padding:5px 15px;

    border-radius:20px;

    font-size:12px;

    font-weight:700;

}




/* =====================================
 COMMUNITY ADVOCACY
===================================== */


.advocacy-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}



.advocacy-card{

    background:white;

    padding:35px;

    text-align:center;

    border-radius:15px;

    box-shadow:
    0 5px 20px rgba(0,0,0,.08);

}



.advocacy-card span{

    font-size:40px;

}



/* =====================================
 GALLERY
===================================== */


.gallery-grid{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}



.gallery-grid img{

    width:100%;

    height:280px;

    object-fit:cover;

    border-radius:18px;

    transition:.3s;

}



.gallery-grid img:hover{

    transform:scale(1.03);

}



/* =====================================
 CTA
===================================== */


.campaign-cta{

    background:
    linear-gradient(135deg,#071426,#0b243f);

    color:white;

    text-align:center;

    padding:100px 0;

}



.campaign-cta h2{

    font-size:55px;

    font-weight:900;

}



.campaign-cta p{

    font-size:22px;

    margin:25px 0 40px;

}




.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

}





/* =====================================
 FOOTER
===================================== */


.campaign-footer{

    background:#050d18;

    color:white;

    text-align:center;

    padding:50px 0;

}



.campaign-footer h3{

    font-size:35px;

}



.campaign-footer h4{

    color:#8BE35A;

}



.social-links a{

    color:white;

    font-size:25px;

    margin:10px;

}





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


@media(max-width:980px){



.container{

    padding:0 20px;

}



.campaign-hero{

    padding-top:120px;
    min-height:auto;
    padding-bottom:80px;

}



.hero-grid{

    grid-template-columns:1fr;

    text-align:center;

}



.hero-content h1{

    font-size:55px;

}



.hero-content h2{

    font-size:28px;

}



.hero-content p{

    font-size:18px;

}



.hero-buttons{

    justify-content:center;

}



.hero-image{

    max-width:320px;

}



.about-grid{

    grid-template-columns:1fr;

}



.about-video-box{

    margin:auto;

}



.timeline:before{

    left:25px;

}



.timeline-item{

    flex-direction:column;

    gap:20px;

}



.timeline-card{

    width:100%;

}



.timeline-year{

    width:70px;
    height:70px;

}



.section-heading h2{

    font-size:35px;

}



.campaign-cta h2{

    font-size:40px;

}



}

/* =====================================
LATEST CAMPAIGN IMAGE FINAL CONTROL
===================================== */

.grey-section .updates-grid {

    display:flex;
    justify-content:flex-start;
    gap:30px;

}


.grey-section .update-card {

    width:350px;
    overflow:hidden;

}


.grey-section img.campaign-update-image {

    width:350px !important;
    height:230px !important;

    max-width:350px !important;
    max-height:230px !important;

    object-fit:cover !important;

    display:block !important;

}


@media(max-width:980px){

    .grey-section .updates-grid {

        flex-direction:column;

    }


    .grey-section .update-card {

        width:350px;

    }


    .grey-section img.campaign-update-image {

        width:350px !important;
        height:230px !important;

    }

}

/* =====================================
CAMPAIGN UPDATE CARDS
===================================== */


.campaign-update-grid{

    display:flex;
    gap:30px;
    justify-content:flex-start;

}


.campaign-update-card{

    width:350px;
    background:white;
    border-radius:18px;
    overflow:hidden;

    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.campaign-update-card img{

    width:350px;
    height:230px;

    object-fit:cover;

    display:block;

}



.campaign-card-content{

    padding:25px;

}


.campaign-card-content span{

    color:#5fae2d;
    font-weight:700;

}


.campaign-card-content h3{

    color:#071426;
    margin:10px 0;

}


@media(max-width:980px){

    .campaign-update-grid{

        flex-direction:column;

    }


    .campaign-update-card{

        width:350px;

    }

}


/* =====================================
PRIORITY CARD - HIDE IMAGE
UNTIL LEARN MORE
===================================== */

.priority-image {

    display:none;

    margin-top:20px;

}


.priority-image.show {

    display:block;

}


.priority-image img {

    width:100%;
    height:auto;

    max-width:100%;

    border-radius:12px;

    display:block;

}


/* =====================================
   TARNEIT POLICY DETAILS
===================================== */

.priority-card .policy-details {
    margin-top: 15px;
    text-align: left;
}

.priority-card .policy-details summary {
    display: inline-block;
    padding: 10px 18px;
    background: #071426;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}

.priority-card .policy-details summary::-webkit-details-marker {
    display: none;
}

.priority-card .policy-details summary:hover {
    background: #8BE35A;
    color: #071426;
}

.priority-card .policy-text {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 2px solid #eef3f8;
    text-align: left;
}

.priority-card .policy-text h4 {
    color: #071426;
    font-size: 20px;
    margin-bottom: 15px;
}

.priority-card .policy-text ul {
    padding-left: 20px;
    margin-bottom: 15px;
}

.priority-card .policy-text li {
    margin-bottom: 10px;
    font-size: 15px;
}

.priority-card .policy-text strong {
    display: block;
    margin-top: 15px;
    color: #071426;
}

.priority-card .policy-details summary {
    display: inline-block;
    padding: 10px 18px;
    background: #071426;
    color: #ffffff;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    list-style: none;
    transition: all 0.25s ease;
}

.priority-card .policy-details summary:hover {
    background: #8BE35A;
    color: #071426;
}




/* =====================================
   TARNEIT POLICY SHOW MORE / SHOW LESS
===================================== */

/* Remove browser triangle */
.priority-card .policy-details summary::-webkit-details-marker {
    display: none;
}

/* SHOW MORE */
.priority-card .policy-details summary.policy-read-more {
    color: #007bef !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 15px 0 0 0 !important;

    font-weight: 700 !important;
    font-size: 16px !important;

    cursor: pointer;
    text-decoration: none !important;
    list-style: none;

    box-shadow: none !important;
}

/* SHOW MORE hover */
.priority-card .policy-details summary.policy-read-more:hover {
    color: #005bb5 !important;
    background: transparent !important;
    border: none !important;
}

/* =====================================
   SHOW LESS WHEN OPEN
===================================== */

.priority-card .policy-details[open] summary.policy-read-more {
    font-size: 0 !important;
}

/* SHOW LESS */
.priority-card .policy-details[open] summary.policy-read-more::after {
    content: "Show Less ^";

    color: #007bef !important;
    background: transparent !important;
    border: none !important;

    font-size: 16px !important;
    font-weight: 700 !important;

    cursor: pointer;
}

/* SHOW LESS hover */
.priority-card .policy-details[open] summary.policy-read-more:hover::after {
    color: #005bb5 !important;
}



/* PARKING */

.parking-section {
  padding: 90px 0;
  background: #eeeeee;
}

.parking-content {
  max-width: 1000px;
}

.large-text {
  font-size: 26px;
  font-weight: 700;
}

.demand-box {
  background: white;
  padding: 30px;
  margin: 30px 0;
  border-left: 5px solid #111;
}




@media (max-width: 980px) {

    .projects-section .row {
        display: flex;
        flex-direction: column;
    }

    .projects-section .row > [class*="col-"] {
        width: 100%;
        max-width: 100%;
    }

    /* Image always first */
    .projects-section .row > .col-xl-8 {
        order: 1;
    }

    /* Text always underneath */
    .projects-section .row > .col-xl-4 {
        order: 2;
    }

}


/* =====================================
   CAMPAIGN VIDEOS
   SAME LAYOUT AS ABOUT ME SECTIONS
===================================== */

.about-video-box {
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    /*background: #071426;*/
    background: transparent;
}

.campaign-video {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    /*background: #071426;*/
    border-radius: 10px;
    background: transparent;
}


/* =====================================
   DESKTOP
   Video = 50% of page
===================================== */

@media (min-width: 992px) {

    .about-video-box {
        width: 100%;
    }

    .campaign-video {
        width: 100%;
        height: auto;
        max-height: 420px;
        object-fit: contain;
    }

}


/* =====================================
   TABLET
   Video = full column width
===================================== */

@media (min-width: 768px) and (max-width: 991px) {

    .about-video-box {
        width: 100%;
        margin-bottom: 30px;
    }

    .campaign-video {
        width: 100%;
        height: auto;
        max-height: 500px;
        object-fit: contain;
    }

}


/* =====================================
   MOBILE
   Video = full width
===================================== */

@media (max-width: 767px) {

    .about-video-box {
        width: 100%;
        margin-bottom: 25px;
        background: transparent;
    }

    .campaign-video {
        width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        border-radius: 8px;
        background: transparent;
    }

}

/* Mobile */

@media (max-width: 991px) {

    .about-video-box {
        margin-bottom: 30px;
        background: transparent;
    }

    .campaign-video {
        width: 100%;
        height: auto;
        max-height: none;
        background: transparent;
    }

}


/* =====================================
   MOBILE HERO — IMAGE FIRST
===================================== */

@media (max-width: 767px){

    .campaign-hero{
        padding-top: 80px;
        padding-bottom: 50px;
        min-height: auto;
    }

    .hero-grid{
        display:flex;
        flex-direction:column;
        text-align:center;
    }

    /* HERO IMAGE FIRST */
    .hero-image-box{
        order:1;
        width:100%;
        margin-bottom:30px;
    }

    .hero-image{
        width:100%;
        max-width:320px;
        height:auto;
        object-fit:contain;
    }

    /* TEXT AFTER IMAGE */
    .hero-content{
        order:2;
    }

    .hero-content h1{
        font-size:48px;
        line-height:1;
    }

    .hero-content h2{
        font-size:26px;
    }

    .hero-content p{
        font-size:17px;
    }

    .hero-buttons{
        justify-content:center;
    }
}