/*
Theme Name: Hicksville Coming Soon
Template: twentytwentyone
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org
Description: A theme for the coming soon landing page for Hicksville
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 7.2
Version: 1.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
*/

/*
 * IMPORTANT: This file is only served on the frontend when `SCRIPT_DEBUG` is enabled;
 * in most instances, the `style.min.css` file will be served. It is not recommended that you
 * use the Theme File Editor to modify this stylesheet. Instead, add the necessary style
 * overrides via "Additional CSS" in the Site Editor.
 */

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */

/*RESET*/


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

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
  margin-block-end: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core body defaults */
body {
  line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
  line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
  color: currentColor;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
  font-family: inherit;
  font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
  min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
  scroll-margin-block: 5ex;
}

html,body{margin:0 !important; padding:0 !important;}

/*END RESET*/


/*CUSTOM*/
#page header{display:none;}
#main{
  height: 100vh;
  height: 100svh;
  width: 100vw;
  overflow: hidden;
  padding: 0 !important;
  font-size: 16px;
}
.site-main > *{
  margin: 0 !important;
  padding:0;
}

:root {
  --hv-bg-orange: #F26524;
  --hv-dark-orange: #e15524;
  --hv-cream: #FCEBAB;
  --hv-dark-green: #005542;
  --footer-height:6em;
}


body{
    background-color:var(--hv-bg-orange);
    max-height: 100vh;
}

.title{
  font-size:1.2em; 
  &.regular{
    font-weight: 400;
  }
}



.key-visual{
  position: relative;
  width: 100%;
  height: 100vh;
  background-color: black;

  a.button, .tnp-submit{
    width: 100%;
    padding:1em; border-radius: 10px; border: none; 
    background-color: var(--hv-bg-orange) !important;
    color:white!important;
    font-weight: 800;
    font-size:1em;
    transition: 0.3s;
    cursor: pointer;

    &:hover{
      background-color: var(--hv-dark-orange) !important;
      color:var(--hv-cream) !important;
    }
  }

  .bg-container{
    width: 100%;
    height: 100%;
    position: absolute;  
    background-color: black;
    z-index: 0;
    opacity: 0;
    transition: all 0.5s ease-in-out;
    &.active{
      opacity: 1;
      z-index: 1;
    }
    .bg{
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center top;
      background-repeat: no-repeat;
      position: absolute;
    }
   
  }
   .bg-smokehouse .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksvillle-slowly-smoked-beef-brisket.jpg'); opacity: 0.5;}
    .bg-cafe .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-cafe-bg.jpg'); opacity: 0.8;}
    #bg-2 .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-cafe-bg.jpg'); opacity: 0.8;}
    #bg-3 .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-gelato-bg.jpg'); opacity: 0.8;}
    #bg-4 .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-bar-bg.jpg'); opacity: 0.8;}

  .bg-right{
    .bg{
      background-position: right top;
    }
  }
  .black-overlay{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0;
    z-index: 1;
    pointer-events: none;
    &.inactive{
      opacity: 0 !important;
    }
  }
  .content-container{
    position: absolute;
    z-index: 10;
    width:90%;
    height:58%;
    max-width: 1700px;
    max-height: 1000px;
    top:0%;
    bottom:20%;
    bottom: calc(15vh + var(--footer-height));
    left:0;
    right:0;
    margin: auto;
    display:flex;
    flex-direction: row;
    column-gap: 50px;
    /* justify-content: center; */
    align-items: center;

    .logo-container{
      position: relative;
      height: 40vh;
      max-height: 450px;
      img.logo{
        position: absolute;
        top:0;
        bottom:0;
        margin: auto;
        left:0;
        right:0;
        height: 70%;
        width: auto;
        object-fit: contain;
        z-index: 0;
        opacity: 0;
        transition: all 0.5s ease-in-out;

        &.active{
          opacity: 1;
          z-index: 1;
        }
      }
    }
    & > div{
      width: 100%;
      display: flex;
      align-items: center;
      
    }
    & *{
      color:white;
      font-family: sans-serif;
      font-weight: 600;
    }
    .form-container{
      
      justify-content: center;
      .signup-form{
        width: 80%;
        .input-container{
          display:flex;
          flex-direction: row;
          column-gap: 20px;
        }
       
          input{
            padding:1em; border-radius: 10px; border: none; width:50%; color:black;
            margin-bottom:0.5rem;
          }
          select{
            padding:1em; border: none; 
          }
         .tnp-submit, .submitBtn button{
          width: 100%;
          padding:0.5em !important; border-radius: 10px !important; border: none !important;
          background-color: var(--hv-dark-orange);
          color:white;
          font-weight: 800;
          font-size:1em;
          transition: 0.3s ease-in-out;
        }
        
      }

      & > div{
        width: 100%;  
      }
      
    }
    .menu-container{
      flex-direction: column;

      p{
        font-size: 1.25em; font-weight: 600; text-align: center;
        margin-bottom: 0.5em;
      }

      .button{
        max-width: 300px; font-weight: 600; font-size: 1.25em; text-align: center; text-decoration: none; text-transform: uppercase; margin-bottom: 1em;
      }
    }
  }
}

.top-bar{
  position: absolute;
  top:1em;
  width: 100%;

  z-index: 11;
  
  div{
    position: absolute;
    color:white;
    font-family: sans-serif;
  }

  .top-left{
    left:3em;
    display: flex;
    flex-direction: row;
    align-items: center;
    column-gap: 1em;
    img{height:4em; width: auto; margin-top:1em;}
  }

  .top-right{
    right:3em;
    text-align: right;
    line-height: 100%;
  }
}

.sub-brands{
  position: absolute; 
  width: 100%;
  height: 15vh;
  background-color: black;
  bottom: var(--footer-height);
  z-index: 2;
  padding:0;
  display: flex;
  flex-direction: row;
  align-items: stretch;

  .brand-row{
    width:100%;
    display: flex;
    flex-direction: row;
    align-items: stretch;

    .brand{
      height: 100%;
      width: 100%;
      position: relative;
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center center;
      
      &:hover{
        cursor: pointer;

        img{
          transform: scale(1.1);
        }
      }
      &.active{
        cursor: pointer;

        img{
          transform: scale(1.2);
        }
      }

      img{
        position: absolute;
        height:40%;
        width: auto;
        object-fit: contain;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        transition: all 0.3s ease-in-out;
      }
    }
  }
  
}

.footer{
  position: absolute; height:var(--footer-height); display: flex; flex-direction: row; align-items: center; justify-content: center; width: 100%; bottom: 0; z-index: 4; background-color: var(--hv-bg-orange);

  .footer-content{
    color: white;
    font-family: sans-serif;
    font-size:0.8em;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    column-gap: 0.5em;
    width:100%;
    /* flex: 0 1 auto; */
    max-width: 1200px;
    
    > div{
      display: flex;
      flex-direction: row;
      align-items: center;
      column-gap: 1em;
      padding:0 1em;
      /* width:100%; */
      /* max-width:1200px; */
      justify-content: center;
      flex: 0 0 auto;
      
      .contacta-webform-table{
        display:flex;
        .contacta-row{
          margin-top:0;
        }
        .contacta-col{
          padding:0 0.5em; 
          
        }
      }
      .btn{line-height:140% !important;}
      &.newsletter-copy{
        flex-direction: column;
        width:13em;
        align-items:start;
        > *{
          margin-top:0;
        }
      }
      &.newsletter-signup{
         input,select,label{font-size:0.8rem !important;}
      }
      &.follow-us{
        padding-bottom:0.5em;
        display:flex;
        flex-direction:column;
        column-gap:5px;
        span{margin-bottom:5px;}
        > div{
           display:flex;
          flex-direction:row;
          row-gap:5px;
          > *{
          
            padding: 0 0.25em;
          }
        }
      }

      .contacta-col > *{
        flex: 0 0 auto;
      }
    }
    input,select{
      margin-top:0.5em;
      min-width:10em;
      padding: 0.25em 0.5em;
      max-width:250px;
    }
    
    img{ height:2em;width: auto;}
  }
}

@media screen and (max-width: 1080px) {
  :root {
    --hv-bg-orange: #F26524;
    --hv-dark-orange: #e15524;
    --hv-cream: #FCEBAB;
    --hv-dark-green: #005542;
    --footer-height:15em;
  }

  .key-visual{
    .black-overlay{
      opacity: 0.5;
  
    }
    .content-container{
      flex-direction: column !important;
      column-gap: 0px;
      justify-content: center;

      .form-container{
        justify-content: center !important;

        .signup-form{
          h3{
            text-align: center;
          }
        }
      }

      .menu-container{
        font-size:0.8em !important;
        .button {
          /* font-size:0.9em !important; */
        }

      }
      & .logo-container {
        height:25vh;
          & img.logo {
              width: 50%;
              height: auto;
              right:0;
              max-width:300px;
          }
      }
    }
    .bg-cafe .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-cafe-bg-mobile.jpg'); opacity: 0.8;}
    #bg-2 .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-cafe-bg-mobile.jpg'); opacity: 0.8;}
    #bg-4 .bg{background-image:url('https://hicksvillesmokehouse.com.au/wp-content/uploads/2026/04/hicksys-bar-bg-mobile.jpg'); opacity: 0.8;}
    .bg-right{
      .bg{
        background-position: center top;
      }
    }
  }

  .sub-brands {
    flex-direction: column;
    .brand-row{
      height: 100%;
      & .brand {
        img {
            height: 50%;
            
        }
     }
    }
  }

  .footer {
    .footer-content {
      flex-direction:column;
      > div {
        
        &.newsletter-copy{
          flex-direction: row;
          width:auto;
          align-items:start;
          column-gap: 0.5em;
          > *{
            margin-top:0;
          }
        }
        &.newsletter-signup{
          width:70%;
          .contacta-webform-table {
            font-size:0.8rem;
            button.btn{
              width:15em;
            }
          }
        }  
        &.follow-us{
          flex-direction: row;
           margin-top:0.5rem;
        }  
      }
    }
  }
  
}

@media screen and (max-width: 768px) {
    :root {
    --hv-bg-orange: #F26524;
    --hv-dark-orange: #e15524;
    --hv-cream: #FCEBAB;
    --hv-dark-green: #005542;
    --footer-height:16rem;
  }
  #page, #content, #primary{overflow: hidden;}
  .key-visual {
    overflow: hidden;
    & .content-container {
      top:3rem;
      bottom:calc(15vh + var(--footer-height) );
      height: calc(85vh - var(--footer-height));
      justify-content:center;
      font-size:1.1rem;
      & .form-container {
        & .signup-form {
          .input-container {
            flex-direction: column !important;
            row-gap: 10px;
          }
          input {
            width: 100% !important;
            padding: 0.75em;
          }
        }
      }
      & .menu-container {
        & p {
            font-size: 1em;
            font-weight: 600;
            text-align: center;
            line-height: 130%;
        }
        .button {
          font-size:0.9em !important;
        }
      }
      & .logo-container {
        height:20vh;
          & img.logo {
              width: 60%;
              object-fit: contain;
              max-height: 100%;
          }
      }
    }
  }
  .sub-brands {
    bottom: var(--footer-height);
    .brand-row{
      & .brand {
        
        img {
            height: 80%;
            width: 50%;
            bottom: 0;
        }
     }
    }
  }
  .top-bar{
    font-size: 0.8em;
    top:1em;
    p{margin:0; margin-bottom:0.25rem;}
    
    .top-left{
      left:1em;
      img{margin-top:0;}
    }
    .top-right{
      right:1em;
    }
  }
  .footer{
    font-size: 0.8em;
    .footer-content{
      font-size:1em;
      > div{
        &.newsletter-signup{
          width:100%;
        }
        
      }
    }
    .contacta-webform-table{
      display:flex;
      flex-direction:column;
      .contacta-row{
        margin-top:0;
      }
     
      .contacta-row,.contacta-col{
        display:flex !important;
        flex-grow:0;
        justify-content: center;
        .btn{margin:0;}
        input,select{
          padding: 0 0.5em;
          height:2em;
          min-height:unset;
          min-width:11em;
          width:80% !important;
        }
      }
    }
  }
}


@media screen and (max-width: 480px) {
  :root {
    --footer-height:14rem;
    --footer-mobile-height:auto;
    --footer-adjustment-top:2em;
  }

  #main{
    height:auto;
    min-height:100svh;
  }
  .key-visual {
    & .content-container {
      bottom: 25vh ;
      row-gap:1em;
        & .logo-container {
            height: 15vh;
        }
        & .menu-container {
          row-gap:0.5em;
            .button {
                padding:0.5em 1em;
            }
        }
    }
  }

  .sub-brands {
      bottom: var(--footer-adjustment-top);
      height:25vh;
      & .brand-row {
          & .brand {
              img {
                  height: 60%;
                  width: 50%;
                  bottom: 0;
              }
          }
      }
  }

  .footer{
    position:relative;
    height:var(--footer-mobile-height);
    padding:2em 0;
    top: -3em;
    z-index: 1;
    padding-bottom: 0;
    & .contacta-webform-table {
      .contacta-row{
          flex-direction:column;
          .contacta-col{
            flex-grow:1;
            > *{
              width:100% !important;
            }
          }
          input{
            width:100% !important;
            max-width:unset;
          }
      }
    }
  }
    /* top:-4em; */
}