/*
Theme Name: GeneratePress Child
Theme URI: https://thevinebarandco.com.au/
Description: A custom child theme for GeneratePress.
Author: Vibin'Me Community
Author URI: https://thevinebarandco.com.au/
Template: generatepress
Version: 1.0.0
Text Domain: generatepress_child
*/

.page-id-10 .inside-article {
margin-top: -30px;
}

.inside-article {
margin-top: 40px;
}
.development {
margin-top: 40px;
margin-bottom: 40px;
}

.gb-container-b13cbe70 {
margin-top: -40px;
}

/* * {
    outline: 1px solid red !important;
} */

/* FONTS USED */
/* font-family: var(--gp-font--cormorant-garamond);
font-weight: 600;
font-size: 2.25rem;
and
font-family: var(--gp-font--inter); 
font-weight: 600;
text-transform: uppercase; 
AND
font-family: var(--gp-font--bebas-neue); 
font-size: 1.75rem;
letter-spacing: 0.12rem;
*/

/* MISC */
.p-zero p {
padding-bottom: 0px !important;
margin-bottom: 0px !important;
}

.m-zero {
margin-bottom: 0px !important;
}

/* color */
.white {
color: #fff;
}

/* CONTENT PAGES MARGIN */
.pages-top-margin {
margin-top: 40px;
}

/* HEADER */

/* SPACING FOR MENU LIST */
  .gb-navigation .gb-menu-item .gb-menu-link {
   padding: 8px 10px;
}


/* BODY */
/*body {
background: #29342A;
} */

/* SOCIAL ICONS */
.insta-icon,
.fb-icon, 
.email-icon {
width: 40px;
height: auto;
background-color: transparent;
color: #fff;
margin-left: 2px;
}
/* On Contact Us Page */
.insta-icon-2,
.fb-icon-2, 
.email-icon-2 {
width: 60px;
height: auto;
background-color: transparent;
color: #fff !important;
}


/* NAVIGATION  */

.main-nav {
font-family: var(--gp-font--bebas-neue) !important; 
font-size: 1.75rem !important;
letter-spacing: 0.12rem !important;
}

.main-nav-ph {
font-family: var(--gp-font--cormorant-garamond);
font-weight: 600;
font-size: 2.25rem;
/*line-height: 1.5; */
}

/* MENU DROPDOWN ICON */
/*.gb-menu-item-mi0961e0 .gb-menu-link {
justify-content: inherit;
} */


/* SUB MENU */
.gb-sub-menu .gb-menu-link {
  border: 4px solid #F5F5F0; 
  padding: 1.5em 1em !important;
  margin: 0.25em 0;
  display: block;
  border-radius: 4px; 
line-height: 1;
letter-spacing: 0px;
background-color: rgba(0, 0, 0, 0.2);
}


/* --- MENU ALIGNMENT ON DESKTOP & TABLET (min-width: 768px) --- */
@media (min-width: 768px) {

    /* --- GLOBAL HEADER GRID ALIGNMENT (from your previous code) --- */
    /* This ensures the nav-left container itself is positioned correctly in the overall header grid */
    .nav-left {
        grid-area: nav-left;
        justify-self: end; /* Aligns the nav-left container to the right within its grid column */
        display: flex; /* Makes nav-left a flex container */
        align-items: center; /* Vertically centers content within nav-left */
        /* This also ensures the main menu (gb-menu) inside nav-left aligns to the right */
        justify-content: flex-end;
    }

    /* --- NAV-LEFT MENU STYLING --- */

    /* 1. NAV-LEFT: Main menu UL (vertical stack) */
    .nav-left.gb-navigation .gb-menu {
        flex-direction: column !important; /* Force vertical stacking of top-level LI items */
        align-items: center; /* Center menu items horizontally within their column */
        gap: 5px; /* Adjust vertical spacing between menu items */
    }

    /* 2. NAV-LEFT: Top-level menu links (text + toggle) - Align unit to RIGHT, Toggle to LEFT */
    .nav-left.gb-navigation .gb-menu > .gb-menu-item > .gb-menu-link {
        display: flex !important; /* Make the link itself a flex container */
        align-items: center; /* Vertically align text and toggle */
        white-space: nowrap; /* Prevent text from wrapping */
        justify-content: flex-end; /* Align the entire unit (text+toggle) to the RIGHT */
        padding: 8px 0; /* Example padding, adjust as needed */
    }

    /* 3. NAV-LEFT: Toggle icon positioning (on the left of text) */
    .nav-left.gb-navigation .gb-menu > .gb-menu-item > .gb-menu-link > .gb-submenu-toggle {
        order: -1 !important; /* Force toggle to be the first item in the flex order */
        margin-right: 5px; /* Space between toggle and text */
        margin-left: 0; /* Ensure no conflicting left margin */
    }

    /* 4. NAV-LEFT: Sub-menu container positioning (Align sub-menu to the RIGHT of parent) */
    .nav-left.gb-navigation .gb-menu .gb-sub-menu {
        position: absolute; /* Essential for dropdowns to float */
        /* To align the sub-menu to the RIGHT of its parent top-level item */
        right: 0;
        left: auto; /* Ensure left is not set */
        /* Basic display control for desktop hover */
        display: none; /* Hide by default */
        /* Add other styling for sub-menu container like background, border, etc. */
    }

    /* 5. NAV-LEFT: Show sub-menu on hover */
    .nav-left.gb-navigation .gb-menu .gb-menu-item:hover > .gb-sub-menu {
        display: block; /* Or 'flex' if sub-menu items are flexed internally */
    }

    /* 6. NAV-LEFT: Individual sub-menu links - Align content to RIGHT */
    .nav-left.gb-navigation .gb-sub-menu .gb-menu-item .gb-menu-link {
        display: block; /* Ensures links stack vertically */
        white-space: normal; /* Allows text to wrap naturally */
        justify-content: flex-end; /* Align content (text) to the RIGHT within the link */
        text-align: right; /* Fallback for text alignment */
        order: initial; /* Reset order */
        margin: 0; /* Reset margins */
        padding: 8px 12px; /* Standard padding for sub-menu links */
    }

    /* 7. NAV-LEFT: Hide toggle within sub-menus (if they appear there) */
    .nav-left.gb-navigation .gb-sub-menu .gb-menu-item .gb-menu-link .gb-submenu-toggle {
        display: none; /* Hide the toggle icon in sub-menus */
        order: initial;
        margin: 0;
    }


    /* --- NAV-RIGHT MENU STYLING --- */

    /* 1. NAV-RIGHT: Sub-menu container positioning (Align sub-menu to the LEFT of parent) */
    .nav-right.gb-navigation .gb-menu .gb-sub-menu {
        position: absolute; /* Essential for dropdowns to float */
        left: 0; /* Align the sub-menu to the LEFT edge of its parent */
        right: auto; /* Ensure right is not set */
        /* Basic display control for desktop hover */
        display: none; /* Hide by default */
        /* Add other styling for sub-menu container like background, border, etc. */
    }

    /* 2. NAV-RIGHT: Show sub-menu on hover */
    .nav-right.gb-navigation .gb-menu .gb-menu-item:hover > .gb-sub-menu {
        display: block; /* Or 'flex' */
    }

    /* 3. NAV-RIGHT: Individual sub-menu links - Align content to LEFT */
    .nav-right.gb-navigation .gb-sub-menu .gb-menu-item .gb-menu-link {
        display: block; /* Ensures links stack vertically */
        white-space: normal; /* Allows text to wrap naturally */
        justify-content: flex-start; /* Align content (text) to the LEFT within the link */
        text-align: left; /* Fallback for text alignment */
        order: initial; /* Reset order */
        margin: 0; /* Reset margins */
        padding: 8px 12px; /* Standard padding for sub-menu links */
    }

    /* 4. NAV-RIGHT: Hide toggle within sub-menus (if they appear there) */
    .nav-right.gb-navigation .gb-sub-menu .gb-menu-item .gb-menu-link .gb-submenu-toggle {
        display: none; /* Hide the toggle icon in sub-menus */
        order: initial;
        margin: 0;
    }
	}
  


/* TOP BAR CTA */
/* All but phones */
.topbar-cta-text {
	font-size: 1.2rem !important;
font-weight: 100 !important;
  line-height: 1;
/*  width: 100%;
  margin-top: 10px;*/
}
/* phones */
.topbar-cta-text-ph {
font-size: 90%;
}

/* PAGES LAYOUT */

.gbp-section.gb-element-ff77e2e3.grid-full-cont,
.gb-element-6f3f2a1c {
margin-top: 0px;
padding-top: 0px;
}


/* Back to Top Button */
.generate-back-to-top {
    border-radius: 25px;
}

/* PAGES */

/* GOOD VIBES TEXT */

.hero-tagline {
font-family: var(--gp-font--sacramento);
  font-size: 2.5rem;      
  font-weight: 400;
 /* font-style: italic; */
 line-height: 0.6;
  text-align: left;
  color: #f8e9c6; /* champagne gold  */
  /* Strong outline effect */
  text-shadow:
    -2px -2px 0 black,
     2px -2px 0 black,
    -2px  2px 0 black,
     2px  2px 0 black;
}


/* PAGES H1 */

/* HOME PAGE H1 TITLE BLOCK */
/* 1st span */
.home-title-main {
    display: block;
/*    font-size: 3.875rem;
	letter-spacing: -.04em;
	font-weight: bold; */
line-height: .8;
}
/* 2nd span */
.home-title-subhead-1 {
    display: block; /* req for block spacing */
font-family: var(--gp-font--inter);
	font-optical-sizing: auto;
  font-size: 1.9rem !important;
  font-weight: 400;
	line-height: 1;
	margin-top: 20px;
  letter-spacing: -1px;
}
/* 3rd span */
.home-title-subhead-2 {
	display: block; /* essential for spacing */
    font-size: 2.8rem; 
	font-weight: 400 !important;
	letter-spacing: -.02em;
	line-height: 1;
}

/* PAGES H1 TITLE BLOCK */
h1.pages-title { 
	margin: 140px auto !important;
}
/* main span */
.pages-title-main,
.pages-title-subhead-sml {
	display: block; /* req for block spacing */
/*    font-size: 3.875rem !important;
	letter-spacing: 1px;
    font-weight: bold; */
}
/* subhead span */
.pages-title-subhead {
    display: block; /* req for block spacing */
    font-size: 3.4rem !important;
	font-weight: 400;
	line-height: 1;
    margin: 10px auto;
}
/* subhead-2 span */
.pages-title-subhead-2 {
    display: block; /* req for block spacing */
    font-size: 3rem !important;
	font-weight: 400;
}

/* PHONES */
@media (max-width: 500px) {
/* HOME PAGE H1 TITLE */
/* 1st span */
.home-title-main {
    font-size: 110%; /*2.4rem;*/
	letter-spacing: -.03em;
}
/* 2nd span */
.home-title-subhead-1 {
    font-size: 70%; /*1.4rem;*/
	margin: 10px 0px;
}
/* 3rd span */
.home-title-subhead-2 {
    font-size: 70%; /*1.4rem !important;*/
	letter-spacing: -.03em;
}
/* PAGES H1 TITLE */
/* 1st span */
.pages-title-main {
    font-size: 90% !important; /*2rem;*/
	letter-spacing: -.05em;
}
/* 2nd span */
.pages-title-subhead {
    font-size: 70% !important; /*1.4rem;*/
	letter-spacing: -.03em;
}
/* 3rd span */
.pages-title-subhead-2 {
    font-size: 60% !important; /*1rem;*/
	letter-spacing: -.03em;
}
/* 3rd span */
.pages-title-subhead-sml {
    font-size: 50% !important; /*1rem;*/
	letter-spacing: -.03em;
}
}
/* IPAD */
@media only screen and (min-device-width : 501px) and (max-device-width : 1000px) and (orientation : portrait) {

/* PAGES H1 TITLE BLOCK */
h1.pages-title { 
	font-family: "Noto Sans", sans-serif;
	font-optical-sizing: auto;
	margin 140px auto !important;
}
/* main span */
.pages-title-main,
.pages-title-subhead-sml {
	display: block; /* req for block spacing */
    font-size: 3.875rem !important;
	letter-spacing: 1px;
    font-weight: bold; 
}
/* subhead span */
.pages-title-subhead {
    display: block; /* req for block spacing */
    font-size: 3.4rem !important;
}
/* subhead-2 span */
.pages-title-subhead-2 {
    display: block; /* req for block spacing */
    font-size: 2.4rem !important;
}
}

/* MOBILE MENU */

/*.gb-menu-container-6bf0b861.gb-menu-container--mobile {
background: #29342a;
color: #fff;
} */


/* NOTICES PAGE */

/* from ChatGPT */
.topical-page {
/*  font-family: 'Quicksand', sans-serif; 
  color: #2d2d2d; */
  padding: 3em 1em;
  display: flex;
  justify-content: center;
}

.notices-wrapper {
  max-width: 700px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.notice-card {
  background: #fff8ef; 
  border-left: 2px solid #d0a166;
  padding: 1.5em 1.2em;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: transform 0.3s ease;
}

.notice-card:hover {
  transform: translateY(-2px);
}

.notice-date {
  font-family: 'Cormorant Garamond', serif;
  color: #bf9444;
  font-size: 1.1rem;
  font-weight: bold;
  margin-bottom: 0.5em;
}

.notice-message {
  font-size: 1.1rem;
  line-height: 1.5;
}

.drink-icon {
  font-size: 2rem;
  margin: 0.5em 0;
  display: inline-block;
  animation: jiggle 0.4s ease-in-out infinite alternate;
}

@keyframes jiggle {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(3deg); }
  50% { transform: rotate(-3deg); }
  75% { transform: rotate(2deg); }
  100% { transform: rotate(-2deg); }
}
.notice-signature {
  margin-top: 1em;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
/*  font-size: 1rem; */
  color: #5a4032;
margin-top: 0px;
padding-top: 0px;
}


/* CHEERS ON ABOUT PAGE */

.cheers-icon {
  display: inline-block;
  font-size: 2.2rem;
  position: relative;
}

.glass {
  display: inline-block;
  transform-origin: bottom center;
  animation: clink 1.4s ease-in-out infinite alternate;
}

.glass.left {
  animation-delay: 0s;
}

.glass.right {
  animation-delay: 0.2s;
}

.flipped {
  transform: scaleX(-1);
}

@keyframes clink {
  0% { transform: rotate(0deg) translateY(0); }
  25% { transform: rotate(-15deg) translateY(-2px); }
  50% { transform: rotate(0deg) translateY(0); }
  75% { transform: rotate(15deg) translateY(-2px); }
  100% { transform: rotate(0deg) translateY(0); }
}

.cheers-icon.left-tilt {
  font-size: 2.5rem;
  display: inline-block;
  transform: rotate(-25deg);
  transform-origin: bottom right;
}

/* BEER MUG CHEERS */
.beer-cheers-pair {
  display: inline-flex;
  align-items: flex-end;
  gap: 0.5em;
  font-size: 2.5rem;
}

.beer-cheers-icon {
  display: inline-block;
}

.beer-left-tilt {
  transform: rotate(-5deg) scaleX(-1); /* Tilt + flip handle to left */
  transform-origin: bottom right;
}

.beer-right-tilt-animate {
  transform-origin: bottom left;
  animation: beer-cheers-bop 1.6s ease-in-out infinite;
}

@keyframes beer-cheers-bop {
  0%, 100% {
    transform: rotate(25deg) translateY(0);
  }
  50% {
    transform: rotate(5deg) translateY(-4px);
  }
}

/* BOXES STYLING */

.box-text-cont {
  position: relative;
  text-align: center;
  height: 240px; 
  overflow: hidden;
border: 3px solid #fff;
border-radius: 25px;
}
.box-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.75rem;
	letter-spacing: -1px;
  font-weight: 600;
  line-height: 0.9 !important;
	border-radius: 25px;
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000;
  background: rgba(0, 0, 0, 0.3);
}
.box-text a {
  color: inherit;
  text-decoration: none;
  display: inline-block;
  transition: transform 0.3s ease, text-shadow 0.3s ease;
}
.box-text a:hover {
  transform: scale(1.05);
  text-shadow:
    -2px -2px 0 #000,
     2px -2px 0 #000,
    -2px  2px 0 #000,
     2px  2px 0 #000,
     0 0 12px rgba(255,255,255,0.4);
}

/* CONTACT FORM */

/* ADD THIS STYLING SOMEWHERE */

.floating-box {
  background: rgba(255, 255, 255, 0.05); /* faint panel background */
  border: 1px solid rgba(255, 255, 255, 0.3); /* subtle light border */
  border-radius: 8px; /* rounded corners (optional) */
  padding: 2rem;
  color: #fff; /* text stays bright */
  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.7),   /* dark shadow below */
    0 -2px 6px rgba(255, 255, 255, 0.1); /* faint light glow above */
}

.floating-box:hover {
  transform: translateY(-4px);
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.8),
    0 -3px 10px rgba(255, 255, 255, 0.15);
  transition: all 0.3s ease;
}