/**
 * All of the CSS for your public-facing functionality should be
 * included in this file.
 */

/* Web Awesome colours

*/

*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}



/* 
* Hide the cart elements and message when empty
*/
#content div div div.wp-block-woocommerce-empty-cart-block{
 display: none !important;
}


html,
body {
  min-height: 100%;
  padding: 0;
  margin: 0;
}

/* global focus visible */
*:focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}

/* Color Variables*/
:root {
    --sl-color-primary-600: var(--hac-red);
    --sl-color-primary-700: #33b208;

    --hac-red:#b20838;
    --hac-black:#383A3A;
    --hac-yellow:#fbad26;
    --hac-white:#ffffff;
    --hac-lite:#f9f1e7;
    --hac-grey:#7d7f7f;
    --hac-dark-grey:#393b3b;
    --hac-dark:#323333;
}

wa-page [slot="footer"]{
    padding:0;
}


/*This is just a spacer where there is no image for the header banner on a page*/
.hacpartner-subheader-container-padding{
    padding-top: 0px;
}

.white-pannel{
    background-color:var(--hac-white);
    color:var(--hac-black);
}
.lite-pannel{
    background-color:var(--hac-lite);
    color:var(--hac-black);
}
.dark-pannel{
    background-color:var(--hac-dark-grey);
    color:var(--hac-grey);
}
.red-pannel{
    background-color:var(--hac-red);
    color:var(--hac-white);
}

.pannel-content{
   margin:40px 40px 20px 40px;
}
.pannel-content:empty{
    margin:0px;
    padding:0px;
    display:none;
}

h3 .bold-yellow{
    font-weight: bold;
    color:var(--hac-yellow);
    font-family: "Brandon-Grotesque", sans-serif;
}

#hacpartner-interior-sub-navigation {
    background: var(--hac-red);
    padding: 40px;
    margin-top: 100px
}

#hacpartner-interior-sub-navigation>div {
    text-align: center;
}

#hacpartner-interior-sub-navigation>div li {
    display: inline-block;
}

#hacpartner-interior-sub-navigation>div li a.active {
    color: var(--hac-white);
}
#hacpartner-interior-sub-navigation>div li a.active:before {
    opacity: 1;
    transform: translateY(30px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out;
}

#hacpartner-interior-sub-navigation>div li:not(:last-of-type) {
    margin-right: 50px
}

#hacpartner-interior-sub-navigation>div li:before {
    display: none
}

#hacpartner-interior-sub-navigation>div a {
    display: inline-block;
    font-family: 'Brandon-Grotesque', sans-serif;
    font-size: 16px;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none;
    position: relative
}

#hacpartner-interior-sub-navigation>div a:not(:last-of-type) {
    margin-right: 50px
}

#hacpartner-interior-sub-navigation>div a.current-menu-item,#interior-sub-navigation>div a:hover {
    color: var(--hac-white);
}

#hacpartner-interior-sub-navigation>div a.current-menu-item:before,#interior-sub-navigation>div a:hover:before {
    opacity: 1;
    transform: translateY(30px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

#hacpartner-interior-sub-navigation>div a:before {
    position: absolute;
    content: "";
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--hac-yellow);
    opacity: 0;
    transform: translateY(33px);
    -webkit-transition: all 300ms ease-in-out;
    -moz-transition: all 300ms ease-in-out;
    -ms-transition: all 300ms ease-in-out;
    -o-transition: all 300ms ease-in-out;
    transition: all 300ms ease-in-out
}

#content h2[class*="wp-block-woocommerce"],
#content h2[class*="wc-block-components"],
[class*="woocommerce"] h2 {
    font-size:30px !important;
 }

#content h3[class*="wp-block-woocommerce"],
#content h3[class*="wc-block-components"],
#content h3[class*="woocommerce"] {
    font-size:16px !important;
 }

#HAC-registration-id{
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    max-width:800px;
}

 /** the HAC Action and Navigation Buttons */

wa-button.HAC-action-btn::part(base),
wa-button.HAC-action-btn-inverted::part(base):hover,
.wc-block-components-button,
a .wc-block-components-button{
    font-size:large;
    color: var(--hac-red) !important;
    font-weight:bold;
    background-color:var(--hac-white);
    border: 2px solid var(--hac-red);
    border-radius: 25px;
    width: auto;
}

wa-button.HAC-action-btn-inverted::part(base):hover{
    font-size:large;
    color: var(--hac-red) !important;
    font-weight:bold;
    background-color:var(--hac-white);
    border: 2px solid var(--hac-white);
    border-radius: 25px;
    width: auto;
}

wa-button.button.subscription-plan-btn.HAC-action-btn span.price-plan .price {
    color: var(--hac-red) !important;
    font-size: 1.25em;
    width: auto;
}
/** 
Mark the action button as active or selected by adding the class= "active-plan"
The hover option then remains
*/
wa-button.HAC-action-btn.active-plan::part(base){
    font-size:large;
    cursor: pointer;
    color:var(--hac-white) !important;
    font-weight:bold;
    background-color:var(--hac-red);
    border: 2px solid var(--hac-red);
    border-radius: 25px;
    width: auto;
 }
/* Hover state: inverted colors */
wa-button.HAC-action-btn-inverted::part(base),
wa-button.HAC-action-btn::part(base):hover,
.wc-block-components-button:hover,
a .wc-block-components-button:hover{
    font-size:large;
    cursor: pointer;
    color:var(--hac-white) !important;
    font-weight:bold;
    background-color:var(--hac-red);
    border: 2px solid var(--hac-red);
    border-radius: 25px;
    width: auto;
}

wa-button.HAC-action-btn-inverted::part(base){
    font-size:large;
    cursor: pointer;
    color:var(--hac-white) !important;
    font-weight:bold;
    background-color:var(--hac-red);
    border: 2px solid var(--hac-white);
    border-radius: 25px;
    width: auto;
}

wa-button.HAC-nav-btn::part(base){
    font-size:large;
    color: var(--hac-grey);          /* Text color */
    background-color: var(--hac-dark-grey);    /* Background color */
    border-color: var(--hac-grey);  /* Border color */
    border-radius: 25px;
    width: auto;
}

    /* Hover state: inverted colors */
wa-button.HAC-nav-btn::part(base):hover {
    cursor: pointer;
    color: var(--hac-grey) !important;         /* Text turns white */
    background-color: var(--hac-dark-grey) !important;    /* Background turns red */
    border-color: var(--hac-dark-grey) !important;
    border-radius: 25px;
    width: auto;
}

/* The story carousel */

wa-carousel{
    margin-top: 100px;
    width:100%;
    height:100%;
    --scroll-hint: 0px;
    --slide-gap:0px
}

wa-carousel::part(base){
    gap: 0px;
}

/* Target the inner container or slot content acting as your card */
wa-carousel-item {
    position: relative;
    display: block;
    width :100%;
    height :100%;
    overflow:hidden;
}

wa-carousel-item img {
    
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center; /* Keeps the center of the image focused */
}

wa-carousel-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Change the color (RGB) and the wash intensity (0.4 alpha) here */
  background-color: rgba(74, 20, 140, 0.3); 
  /* Optional: Blend the color with the image pixels */
  mix-blend-mode: multiply; 
}

wa-carousel-item a { 
    color: var(--hac-yellow);
    font-family: "Outbound", sans-serif;
    font-style: normal;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 8rem;
    line-height: 0;
    letter-spacing: 3px;
}
wa-carousel-item a:hover{ 
    color: var(--hac-yellow);
    font-family: "Outbound", sans-serif;
    font-style: normal;
    text-transform: lowercase;
    font-weight: normal;
    font-size: 8rem;
    line-height: 0;
    letter-spacing: 3px;
}

.slide-caption {
    position: absolute;
    top: 0px;
    left: 0px; 
    bottom: 16.66%;  
    transform: translateY(50%);
    max-width:600px;
    z-index: 10;
    color: var(--hac-white);
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    align-items:left;     
    text-align: left; 
    font-size: 3rem;
    font-weight: normal;
    padding: 0 20px;
}

#login-and-registration-section{
    width:100%;
    display: flex;
    flex-direction: column; 
    justify-content: flex-end;
    text-align: left;
    align-items: flex-end;
    padding: 0px 20px;
     
}
/*
* Single story
*/
.single-story img{
    width:600px;
    height:auto;
}

/* The registration drawer*/
wa-drawer.HAC-form-drawer::part(header){
    background-color: var(--hac-lite);
}
wa-drawer.HAC-form-drawer::part(body){
    background-color: var(--hac-lite);
}
wa-drawer.HAC-form-drawer::part(footer){
    background-color: var(--hac-lite);
}

/** 
CSS for subscription table
*/
/* Restricts the scrolling bounds to this area specifically */
.scroll-container {
    max-height: 800px; /* Adjust based on your preferred design footprint */
    width:fit-content;
    overflow-y: auto;  /* Allows the grid contents to spill downwards */
    position: relative;
    background-color: var(--hac-dark-grey);
    border: 1px solid var(--hac-dark-grey); /* Optional visual border */
    }

/* Pins your heading row securely to the top of the container viewport */
.sticky-heading {
    position: sticky;
    top: 0;
    z-index: 10; /* Ensures content slides *underneath* rather than overlapping on top */
    background-color:var(--hac-dark-grey); /* Solid fill hides data behind it */
    padding: var(--wa-spacing-small);
    border-radius: 15px;
    }

.subscription-grid {
    display: grid;
    grid-template-columns:2fr repeat(3,1fr);
    gap: 6px;
    padding: 20px;
    max-width: 1000px;
    background: var(--hac-dark-grey);
    border-radius: 0px;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    }

/* Base cell styling */
.subscription-grid > div {
    padding: 5px;
    background: var(--hac-yellow);
    border: 1px solid var(--hac-dark-grey);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    border-radius:0.5rem;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    }

/* Column headers styling */
.subscription-grid .header-cell {
    height: 180px;
    overflow: visible;
    /*border-bottom: 2px solid var(--hac-lite);*/
    font-weight: bold;
    background-color: var(--hac-yellow);
    text-align: bottom;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    cursor: pointer;
    color:var(--hac-white);
    font-family: "Brandon-Grotesque", sans-serif;
    font-size: 20px;
    }

.subscription-grid  .header-cell-main{
    height: 180px;
    overflow: visible;
    /*border-bottom: 2px solid var(--hac-lite);*/
    font-weight: bold;
    background-color: var(--hac-red);
    text-align: bottom;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    cursor: pointer;
    color:var(--hac-white);
    font-family: "Brandon-Grotesque", sans-serif;
    font-size: 20px;
    }

/* Row names in the first column */
.subscription-grid .row-label {
    font-weight: bold;
    color:var(--hac-dark);
    height:auto;
    background-color: var(--hac-yellow);
    justify-content: flex-start;
    /* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
    cursor: pointer;
    }

/* Break as to who will do what */
.subscription-grid .row-break-responsibility{
    justify-content: center;
    text-align: center;
    height:auto;
    background-color: var(--hac-lite);
    /*box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
}

/* Checkmark cell styling */
.subscription-grid wa-icon[name="check"] {
    color:var(--hac-red);
    stroke: currentColor;
    stroke-width: 80px;
}

/* Checkmark cell styling */
.subscription-grid wa-icon[name="xmark"] {
    color:var(--hac-dark);
    stroke: currentColor;
    stroke-width: 80px;
}

.rotated-text {
    transform: rotate(0deg);  
}
.the_popover{
    font-size: 1.5rem;
}

.single-page-header-spacer {
    margin-top: 100px;
}

@media (max-width: 768px) {
    wa-carousel{
        margin-top: 0px;
    }
    .subscription-grid {
        grid-template-columns:200px 60px 60px 60px;
    }
    .rotated-text {
        transform: rotate(-90deg);  
    }
    .single-page-header-spacer {
        margin-top: 0px;
    }
}

@media (max-width: 1040px) {
    wa-carousel{
        margin-top: 0px;
    }
    .single-page-header-spacer {
        margin-top: 0px;
    }
}



/** 
CSS for products
*/

.container {
    max-width: 100%;
    margin: 0 auto;
}

header {
    margin-bottom:0px;
    text-align: center;
}

header h1 {
    color:var(--hac-black);
    margin: 0 0 10px 0;
    font-size: 2.5rem;
}

header p {
    color: var(--hac-grey);
    margin: 0;
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    justify-content: center;
    justify-items: center; 
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.product-card {
    background: var(--hac-white);
    border-radius: 0px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 220px;
}

.product-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-4px);
    cursor: pointer;
    border-color: var(--hac-red);
}


.product-image {
    width: 100%;
    height: auto;
    background-color: var(--hac-lite);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-content {
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hac-black);
    margin: 0px 0px 10px 0px;
}

.product-brief-desc {
    font-size: 0.95rem;
    color: var(--hac-black);
    margin: 4px 4px 4px 4px;
    line-height: 1.5;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--hac-black);
    margin-bottom: 15px;
}

wa-card::part(body) {
    display: flex;
    flex-direction: column;
    flex: 1; /* Pushes the footer down to the bottom */
    padding:4px;
}
wa-card::part(header) {
    margin: 0;
    padding:0;
}

/* Enforce the height of the footer slot */
wa-card [slot="footer"] {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px; /* Adjust to your fixed size */
    flex-shrink: 0;
    margin-top: auto;
}

.card-footer wa-button {
    flex: 1;
}
/** to stop the overflow of content outside of the visual area */
wa-drawer::part(body) {
    overflow-x: hidden;
    max-width: 100%;
    box-sizing: border-box;
    }

.drawer-content {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.drawer-product-info {
    flex-grow: 1;
}

.drawer-product-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hac-black);
    margin: 0px 0px 10px 0px;
}
.drawer-price-label{
    font-size: 1rem;
    font-weight: 500;
    color: var(--hac-black);
    margin-bottom: 20px;

}
.drawer-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--hac-black);
    margin-bottom: 20px;
}

.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
}

.quantity-selector label {
    font-weight: 600;
    color: var(--hac-black);
}

.quantity-selector wa-input {
    width: 60px;
}

.drawer-product-image img{
    width: 150px;
    height: auto;
    background-color: var(--hac-lite);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.product-description {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.description-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.description-section h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--hac-black);
    margin: 0,0,10,0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.description-section p {
    font-size: 1.6rem;
    color: var(--hac-dark-grey);
    line-height: 1.6;
    margin: 0;
}

.no-products {
    text-align: center;
    padding: 60px 20px;
    background:var(--hac-white);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.no-products h2 {
    color: var(--hac-black);
    margin-bottom: 10px;
}

.no-products p {
    color: var(--hac-dark-grey);
}

wa-drawer::part(overlay) {
    background-color: rgba(0, 0, 0, 0.5);
}

.nested-imageandaction {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 equal columns for the sub-grid */
    gap: 10px; /* Gap between nested items */
}

/* When the entire grid container is narrower than the combined minimums, the columns stack */
.drawer-product-grid{
    grid-template-columns: 600px minmax(600px, 1fr);
    align-items: top;
    justify-content: center;
}

@media (max-width: 768px) {
    .drawer-product-grid,
    .product-grid {
        grid-template-columns: 1fr;
    }

    header h1 {
        font-size: 1.75rem;
    }
}

/*
* Coming soon card
*/

    wa-card.coming-soon {
      max-width: 450px;
      text-align: center;
      text-justify: center;
      padding: var(--wa-spacing-x-large);
    }
    .coming-soon-form-group {
      display: flex;
      gap: var(--wa-spacing-small);
      margin-top: var(--wa-spacing-large);
    }

    /*
    * Coming soon badge
    */
    wa-badge.coming-soon{
        position: absolute; 
        --pulse-color: var(--hac-yellow);
        background-color: var(--hac-red); 
        color: var(--hac-yellow);
        --bar-color: var(--hac-red);
        font-size: var(--wa-font-size-xl);
    }


    /*
    * Menu
    */
.cart-counter{
    background-color:var(--hac-red);
}
#my-cart-menu-item{
    position:relative; /*use the shopping cart as the base*/
}
#my-cart-menu-item wa-badge{
  position:absolute; 
  transform:translateY(10px); /* move the badge 10 px down from the button position*/
}

wa-tooltip{
  font-size: 1.5rem;
}

/* Responsive adjustment for Mobile view  - was 767*/
@media (max-width: 1040px) {

  .subheader-container{
    position:sticky;
    top: 0px; /* Replace with your exact header height */
    z-index: 9999;
    height: fit-content;
    display: flex;
    align-items: center;
    width:100%;
     background: var(--hac-yellow);
    }
}

/* Only apply sticky behavior on viewports wider than mobile (e.g., 768px) */
 @media (min-width: 1041px) {
    .subheader-container{
        position: sticky;
        top: 100px; /* exact header height */
        z-index: 9999; /* Just below the 10000 header, but above page content */
        height: fit-content;
        display: flex;
        align-items: center;
        width:100%;
        background: var(--hac-yellow);
    }

    /* Reduce the gap between menu items*/
    .wa-gap-xl {
      gap: var(--wa-space-s); /* Swap to a smaller gap size */
    }  
}

/** Style icons in the menu */
  .menu-icon-button::part(base) {
    height: auto;
    background: transparent;
    border: none;
    box-shadow: none;
    cursor: pointer;
    font-size: 2rem;
  }

  /* Style for standard state */
  .menu-icon-button wa-icon {
    color: var(--hac-dark-grey);
    transition: transform 0.2s ease, filter 0.2s ease, color 0.2s ease;
  }

  .menu-icon-button .small-text {
    font-size: 0.75rem;
    color: var(--hac-dark-grey);
    transition: color 0.2s ease;
  }

  /* Hover effect styles */
  .menu-icon-button:hover::part(base) {
    background: transparent;
  }

  /* Only the icon lifts and gains a drop shadow */
  .menu-icon-button:hover wa-icon {
    color: var(--hac-red);
    transform: translateY(-4px);
    filter: drop-shadow(0 4px 6px rgba(37, 99, 235, 0.3));
  }

  .menu-icon-button:hover .small-text {
    color: var(--hac-red);
  }

  /* Press down effect when clicked (active state) */
  .icon-button:active wa-icon {
    transform: translateY(1px);
    filter: drop-shadow(0 1px 2px rgba(37, 99, 235, 0.1));
    transition: transform 0.05s ease, filter 0.05s ease;
  }

  .stack-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem;
  }

  .icon-wrapper {
    display: inline;
    align-items: center;
    justify-content: center;
  }

  /*
  * Coming Soon Ribbin
  */

/* Ensure the card allows the ribbon to pop out past the borders */
.ribbon-card {
  position: relative;
  overflow: visible; 
  margin-top: 20px; /* Gives room for the ribbon height */
}

/* Position the wrapper perfectly on the top-left edge */
.banner-wrapper {
  position: absolute;
  top: 15px; 
  left: -10px; /* Pulls the ribbon out to wrap around the card edge */
  z-index: 10;
}

/* Front face of the ribbon badge */
.folded-banner {
    --pulse-color:var(--hac-yellow);
  border-radius: 4px 4px 4px 0;
  padding: 6px 12px;
  --wa-badge-border-radius: 0px; /* Clears default Web Awesome pill shapes */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
  background-color:var(--hac-red);
}

/* The 3D under-fold triangle */
.folded-banner::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 0;
  height: 0;
  /* Uses a darker theme token for the shadow fold */
  border-top: 10px solid var(--wa-color-brand-600); 
  border-left: 10px solid transparent;
}