/*
Theme Name: Bespoke Syrup Theme
Theme URI: https://example.com/
Author: Generated by ChatGPT
Author URI: https://example.com/
Description: Custom theme for Bespoke Syrup with a lightweight custom CMS (no plugins). Responsive using Bootstrap. Slider for Our Syrups.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: bespoke-syrup
*/
@import url("https://use.typekit.net/nst5wvu.css");

/* Header background ONLY on inner pages */
body:not(.home) .site-header {
    background-color: #ebece7 !important;
    position: relative !important;
}
a{color: #0b2b26; text-decoration: none;}
.btn { background:#024e47; color:#fff; padding:12px 26px; border-radius:30px; display:inline-block; text-decoration:none; }
.bg-light{ background-color:#ebece7 !important;}
body { font-family: 'Poppins', sans-serif; color:#222; }
h1,h2,h3,h4 { font-family: 'Amandine', serif; letter-spacing:1px; text-transform:uppercase;}
p{font-family: 'Poppins', sans-serif; color:#222; line-height: 30px;  font-size: 16px; letter-spacing: 1px; font-weight: 300;}
.container { max-width:1200px; margin:0 auto; padding:0 15px; }
.hero {
    background-size: cover;
    background-position: center;
    padding: 250px 0;
    color: #0b2b26;
    min-height: 800px;
}
.hero h1{font-size: 72px; text-transform: uppercase;}
.hero .cta { background:#024e47; color:#fff; padding:12px 26px; border-radius:30px; display:inline-block; text-decoration:none; }
.section { padding:60px 0; }
/*.syrup-card { background:#fff; padding:18px; border:1px solid #eee; }*/
.syrup-title { text-transform:uppercase; letter-spacing:2px; font-size:14px; text-align:center; margin-top:12px; }
.features .col { text-align:center; padding:20px; }
.features-section img{ height: 80px; margin: 50px 0px;}
.contact-form input, .contact-form textarea { width:100%; padding:12px; margin-bottom:10px; border:1px solid #ddd; }
.swiper-wrapper{margin: 50px 0px;}
.footer { padding:10px 0; text-align:center; background:#f5f6f4; }
.contact-bg{    background-image: url(./assets/footer-bg.png);
    background-repeat: no-repeat;
    background-position: top left; padding: 150px 0px;}
.nav-link{color: #000;
        text-transform: uppercase;
        font-size: 16px;
        letter-spacing: 2px; margin: 20px;}
.site-header{    position: absolute; width: 100%;}

/* SECTION WRAPPER */
.who-section {
    position: relative;
    padding: 150px 0;
    min-height: 600px;
}

/* FULL-WIDTH RIGHT SIDE IMAGE */
.who-section .who-right {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;          /* right half of screen */
    height: 100%;
    background-image: url('https://thebespokesyrupco.com.au/wp-content/uploads/2025/12/who-we-are-1.png');
    background-size: contain;
    background-position: center right;
    background-repeat: no-repeat;
    z-index: 1;
}

/* LEFT CONTENT ABOVE WHITE BACKGROUND */
.who-section .who-left {
    position: relative;
    z-index: 5;
    background: transparent;
}
.fa-instagram{font-size: 24px !important;}
.contact-form label {
    display: block;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 400;
    color: #555;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.contact-form .form-control {
    background: #fff;
    border: none;
    border-radius: 0;
    padding: 25px 20px;
    box-shadow: none;
    font-size: 14px;
    color: #333;
}

.contact-form .form-control:focus {
    outline: none;
    box-shadow: none;
    border-bottom: 2px solid #0d4a45;
}

.btn-submit {
    background: #003f3b;
    color: #fff;
    padding: 15px 40px;
    border-radius: 40px;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: none;
    transition: 0.3s;
}

.btn-submit:hover {
    background: #002f2c;
}
.contact-section  .contact-form .form-control
{
    border: 1px solid #ddd;
}
.syrup-image-wrapper img
{
	height:450px;
}
.syrup-image-wrapper {
	border: 3px solid #fff;
    display: inline-block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.syrup-image-wrapper:hover {
    transform: scale(1.08); /* pop effect */
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* Remove default blue arrows */
.swiper-button-next,
.swiper-button-prev {
    color: #003f3b !important;   /* Match your theme color */
    width: 45px;
    height: 45px;
}

/* Arrow icon styling */
.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 22px !important;  /* Reduce size */
    font-weight: 600;
}

/* Custom background circle */
.swiper-button-next,
.swiper-button-prev {
    background: rgba(0, 63, 59, 0.1);  /* Light theme tint */
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease;
        margin-top: -100px;
}

/* Hover effect */
.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #003f3b;        /* Dark theme color */
    color: #fff !important;
}
/* -------------------------------
   MOBILE OVERLAY MENU
---------------------------------- */

/* Hide Bootstrap default background + border */
.navbar-toggler {
    border: none;
    box-shadow: none !important;
}

/* Custom hamburger icon */
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' fill='%23003f3b' viewBox='0 0 16 16'%3E%3Cpath stroke='%23003f3b' stroke-width='2' d='M2 4h12M2 8h12M2 12h12'/%3E%3C/svg%3E");
}

/* Mobile menu background overlay */
@media (max-width: 991px) {
    #mainMenu {
        position: fixed;
        top: 0;
        left: -100%; /* hidden */
        width: 100%;
        height: 100vh;
        background: #003f3b; /* theme dark green */
        padding-top: 120px;
        transition: 0.4s ease;
        z-index: 9999;
        display: block !important;
    }

    /* Slide in when open */
    #mainMenu.show {
        left: 0;
    }

    /* Align links vertically in center */
    #mainMenu .navbar-nav {
        flex-direction: column;
        text-align: center;
        width: 100%;
        gap: 20px;
    }

    #mainMenu .nav-link {
        color: #ffffff !important;
        font-size: 22px;
        font-weight: 500;
        letter-spacing: 2px;
        text-transform: uppercase;
        padding: 10px 0;
    }

    #mainMenu .nav-link:hover {
        color: #d6eae8 !important;
    }
}

/*contact form*/
.cf7-form {
  max-width: 700px;
  margin: 0 auto;
}

.cf7-row {
  display: flex;
  gap: 20px;
  margin-bottom: 18px;
}

.cf7-col {
  width: 50%;
}

.cf7-col-full {
  width: 100%;
}

.cf7-form input,
.cf7-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
}

.cf7-form textarea {
  min-height: 120px;
  resize: vertical;
}

.cf7-form input[type="submit"] {
  background-color: #000;
  color: #fff;
  padding: 12px 30px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.cf7-form input[type="submit"]:hover {
  opacity: 0.85;
}
.cf7-col-full
{
	width:100%;
}
/* Mobile responsive */
@media (max-width: 768px) {
  .cf7-row {
    flex-direction: column;
  }

  .cf7-col {
    width: 100%;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .cf7-row {
    flex-direction: column;
  }
}
/* Prevent layout shift on desktop */
@media (min-width: 992px) {
    #mainMenu {
        position: relative;
        height: auto;
        padding-top: 0;
        background: transparent;
    }
}

@media (max-width:767px){
  .hero { padding:60px 0; text-align:center; background-size: contain; background-color:#ebece7; background-position: bottom; background-repeat: no-repeat; min-height: 600px;}
  .hero .align-items-center{height: 500px;}
  .hero h1 { font-size:32px; }
 .who-section .who-right {
      position: relative;
      width: 100%;
      height: 300px;
  }
  .contact-bg
  {
    padding: 20px 0px;
  }
}