/*
Theme Name: Wright Packaging Custom Theme
Author: April Baeb
Description: A custom WordPress theme built for Wright Packaging.
Version: 1.0
Requires at least: 6.9
Requires PHP: 8.0
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: wrightpackaging
*/

/*Brand Colors*/
:root {
    --dark-blue: #04445e;
    --light-blue: #179ab4;
    --contrast-blue: #137f95;
    --lighter-blue: #c1e0e4;
    --dark-brown: #a49494;
    --light-brown: #b9a9ab;
    --white: white;
}

body {
    background: var(--white);
    font-family: "Noto Sans", sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--dark-blue);
    margin: auto;
    /*Prevents floating footer*/
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.wrapper {
    background: var(--white);
    margin: 0 auto;
    width: min(1400px, 90%);
    flex: 1;
    display: flex;
    flex-direction: column;
}

main {
  flex: 1;
}

.footer-wrapper {
  background: var(--dark-blue);
    margin: 0 auto;
    width: min(1400px, 90%);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    flex-direction: column;
    align-items: flex-start;
}

.header-wrapper {
    margin: 0 auto;
    width: min(1400px, 90%);
    display: flex;
    align-items: flex-end;  /* aligns menu to the bottom of the header */
    justify-content: space-between;
    padding: 1em 0em;
    flex-wrap: wrap;
}

/*Limit logo size to fit header*/
.custom-logo {
    max-width: 3em;
    height: auto;
}

h1 {
    font-weight: 800;
    color: var(--dark-blue);
    font-size: 2.5em;
    line-height: 1.3em;
}

h2 {
    font-weight: 700;
    color: var(--light-blue);
    font-size: 2em;
    margin-bottom: 0em;
    line-height: 1.3em;
}

.gray-section h2 {
  color: var(--dark-blue);
}

h3 {
  font-weight: 800;
  color: var(--dark-blue);
}

h3 a {
  font-weight: 800;
}

p {
  font-size: 1em;
} 

p a {
  color: var(--contrast-blue);
}

strong {
    font-weight: 600;
}

a {
  transition: background-color 1s ease;
  color: var(--contrast-blue);
  text-decoration: none;
  font-weight: 600;
}

a:hover {
  text-decoration: underline;
}

.market-btn {
  border: 2px solid var(--dark-blue) !important;
}

.market-btn a:hover {
    border: 2px solid var(--dark-blue) !important;
}

hr {
  border: solid 0.05em var(--dark-blue);
  color: var(--dark-blue);
}

.btn:hover {
  background-color: var(--dark-blue) !important;
  color: var(--white) !important;
}


/*Make header sticky (scroll with page)*/
.site-header {
    position: sticky;   
    top: 0;             /* sticks to the top */
    width: 100%;
    margin-left: calc(-50vw + 50%);
    background: var(--lighter-blue);   /* header background color */
    z-index: 9999;      /* stay on top of other content */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* optional subtle shadow */
    left: 0;
    right: 0;
}

/* Hide checkbox */
.menu-toggle {
  display: none;
}

/* Hamburger icon */
.menu-icon {
  display: block;
  font-size: 2em;
  cursor: pointer;
  color: var(--dark-blue);
  margin-left: auto;
}

/* Mobile navigation: hidden by default */
.main-navigation {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background-color: var(--dark-blue); /* adjust to your theme */
}

/* Menu items vertical by default (mobile) */
.main-navigation ul {
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Menu links */
.main-navigation a {
  display: block;
  padding: 0.5em 1em;
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
}

.main-navigation a:hover {
  opacity: 0.8;
  transition: opacity 0.2s ease;
}

/* Show menu when checkbox is checked */
.menu-toggle:checked + .menu-icon + .main-navigation {
  max-height: 500px; /* enough to show all items */
}

/*Contact Us Page Submit Button Styling*/
#submit-contact-btn {
  padding: 0.7em 1em !important;
  font-weight: 600 !important;
  color: var(--white) !important;
  background-color: var(--light-blue) !important;
  font-size: 1.2em;
  border: none;
  display: block;
  margin: 0 auto;
  transition: background-color 1s ease;
}

#submit-contact-btn:hover {
  background-color: var(--dark-blue) !important;
  color: var(--white);
  cursor: pointer;
}


/*Footer Styling*/
footer {
  background-color: var(--dark-blue);
  color: var(--white);
  width: 100%;
  margin-left: calc(-50vw + 50%);
  margin-left: 0;
}

footer ul {
  padding-left: 0em;
}

footer li {
  list-style: none;
}

footer a:link {
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
}

footer a:visited {
  color: var(--white);
  text-decoration: none;
  font-weight: 400;
}

footer a:hover {
  color: var(--lighter-blue);
  text-decoration: none;
  font-weight: 400;
}

footer a:active {
    color: var(--lighter-blue);
    text-decoration: none;
    font-weight: 400;
  }

footer svg path {
    transition: fill 0.2s ease;
}

footer a:hover svg path {
    fill: var(--lighter-blue) !important;
}

.footer-bold {
  font-size: 1.1em;
  font-weight: 800;
}

.menu-item-has-children .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--lighter-blue);
    list-style: none;
    padding: 0;
    margin: 0;
    min-width: 180px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    z-index: 999;
}

header .menu-item-has-children .sub-menu a {
    padding: 10px 15px;
    color: var(--dark-blue);
}

/*Icon sizes and colors for Tabler icons*/
.icon-tabler {
  display: inline-block;
  fill: none;
  stroke: var(--dark-blue);
  width: 4em;
  height: 4em;
}

.icon-tabler-large {
  display: inline-block;
  fill: none;
  stroke: var(--dark-blue);
  width: 6em;
  height: 6em
}

/*Icon sizes and colors for FontAwesome and Illustrator icons*/
.icon {
  display: inline-block;
  width: 4em;
  height: 4em;
  stroke-width: 0;
  stroke: var(--dark-blue);
  fill: var(--dark-blue);
}

/*Icon sizes and colors on food packaging page*/
.food-icon {
  width: 6em;
  height: 6em;
  stroke: var(--dark-blue);
  fill: var(--dark-blue);
  stroke-width: 2;
}

/*Icon sizes and colors on sustainability page*/
.sustainability-icon {
  width: 15em;
  height: 15em;
  stroke: var(--dark-blue);
  fill: var(--dark-blue);
  stroke-width: 2;
}

/* Mobile menu toggle */
.menu-toggle:checked + .menu-icon + .main-navigation {
    max-height: 1000px; /* large enough to show all items */
}

.submenu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--white);
    font-size: 1rem;
    cursor: pointer;
    padding: 0.5em;
}

.copyright-year {
  margin-bottom: 0em;
  padding-bottom: 1em;
  text-align: center;
}

hr.copyright-year {
  background-color: var(--white);
  padding-bottom: 0.1em;
}

/************************ Skip Menu Link **************************************/
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dark-blue);
    color: var(--white);
    padding: 12px 20px;
    font-weight: 600;
    text-decoration: none;
    z-index: 9999;
}

.skip-link:focus {
    left: 0 !important;
    z-index: 999999;
}

/************************* Campaigner Sign Up Form ****************************/

/*Inherit theme styling for form and override Campaigner styling*/
#SignupFormPreview, #FooterPreview #disclaimer #btnSection {
  padding: inherit !important;
  text-align: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-style: inherit !important;
  text-decoration: inherit !important;
}

#formContainer {
  margin: inherit !important;
  border: inherit !important;
  background-color: inherit !important;
}

/*Remove disclaimer*/
#disclaimer {
  display: none;
}

/*Remove green asterisk images for required fields*/
td[width="15px"] img[style="border-width:0px;"] {
    display: none;
}

input [type="text"] {
  width: inherit !important;
  border: inherit !important;
  height: 1.5em;
  border-color: var(--white) !important;
  border-width: 0px !important;
}

#SubmitButton {
  background-color: var(--white) !important;
  color: var(--dark-blue) !important;
  padding: 1em;
  width: 100px;
  height: 50px;
  font-size: inherit !important;
  display: block;
  margin-left: auto;
  margin-bottom: 50px;
  transition: background-color 1s ease;
  border-width: 0px !important;
  text-transform: uppercase;
  cursor: pointer;
}

#SubmitButton:hover {
  background-color: var(--light-blue) !important;
  color: var(--white) !important;
}

.SignupFormPreview {
  width: inherit !important;
}

/************************* End Campaigner Sign Up Form **************************/

/************************* CookieYes Banner *************************************/

/*Remove "Powered by CookieYes" logo*/
[data-cky-tag="optout-powered-by"] {
    display: none !important;
}

/* Styling for "Accept All" button */
[data-cky-tag="optout-confirm-button"] {
    color: var(--white) !important;
    background-color: var(--dark-blue) !important;
    text-align: center !important;
    text-decoration: none !important;
    border: solid 1px var(--dark-blue) !important;
    transition: background-color 1s ease;
    text-transform: uppercase !important;
    order: 1;
}

[data-cky-tag="optout-confirm-button"]:hover {
    background-color: var(--white) !important;
    color: var(--dark-blue) !important;
    opacity: 1 !important;
}

/*Styling for cookies description before button*/
[data-cky-tag="optout-description"] {
    color: var(--dark-blue) !important;
}

/* Styling for bold heading at the top*/
[data-cky-tag="optout-title"] {
  color: var(--dark-blue) !important;
}

[data-cky-tag="optout-option-toggle"] {
  border: 1px solid var(--dark-blue) !important;
}

[data-cky-tag="optout-option-title"] {
  color: var(--dark-blue) !important;
}

[data-cky-tag="optout-cancel-button"] {
    color: var(--white) !important;
    background-color: var(--dark-blue) !important;
    border: solid 1px var(--dark-blue) !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: background-color 1s ease;
    text-transform: uppercase !important;
}

[data-cky-tag="optout-cancel-button"]:hover {
    background-color: var(--white) !important;
    color: var(--dark-blue) !important;
    opacity: 1 !important;
}

/*Styling for button element in footer*/
button.cookie-link {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    cursor: pointer;
    font: inherit;
}

button.cookie-link:hover {
  color: var(--lighter-blue);
}

/************************* End CookieYes Banner ********************************/

/*Tablet and Larger*/
@media (min-width: 768px) {
  .menu-icon {
    display: none;
  }

  .main-navigation {
    max-height: none;
    background: none;
    overflow: visible;
  }

  .main-navigation ul {
    display: flex;
    flex-direction: row;
    gap: 20px;
    overflow: visible;
  }

  .main-navigation > ul > li {
    display: flex;
    align-items: flex-end;   /* aligns link text to the bottom of the tall li */
  }

  .main-navigation a {
    padding-top: 0.5em 0em;
    color: var(--dark-blue);
  }

  /* Ensure the li covers the gap between link and submenu */
  .menu-item-has-children {
    position: relative;
  }

  .menu-item-has-children:hover > .sub-menu {
      display: block;
    }

  .menu-item-has-children .sub-menu { 
      position: absolute;
      top: 100%;
      left: 0;
      background-color: var(--dark-blue);
    }

    .menu-item-has-children .sub-menu a { 
      color: var(--white);
    }

    header .main-navigation {
        position: relative;
    }

    header .menu-item-has-children:hover > .sub-menu {
        display: block;
    }

    .footer-wrapper {
      flex-direction: row;
    }

/*Limit logo size to fit header*/
.custom-logo {
    max-width: 8em;
    height: auto;
}

/*Main nav text is white on tablet and desktop*/
header .menu-item-has-children .sub-menu a {
    color: var(--white);
}

header .menu-item-has-children .sub-menu a:hover {
    color: var(--lighter-blue);
}

}

@media (max-width: 767px) {

  /*Mobile Menu*/
    .site-branding {
        order: 1;
    }
    .menu-icon {
        order: 2;
    }
    .main-navigation {
        order: 3;
        width: 100%;
    }

    .menu-item-has-children {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }

    .menu-item-has-children > a {
        display: block;
        flex: 1;
        justify-content: space-between;
        align-items: center;
    }
    .menu-item-has-children.open > .sub-menu {
        display: block;
        width: 100%;       
        position: static;     
        background-color: var(--white);  
        box-shadow: none;
    }

    .submenu-toggle {
        display: inline-block;
        padding: 0.5em 1em;
    }

    .menu-item-has-children > .sub-menu {
        width: 100%;
        display: none;
    }

       .menu-item-has-children > .sub-menu a {
        color: var(--white);
        padding-left: 2em;    /* slight indent so it reads as a child */
    }
}