/*
Theme Name: Warfighter Wellness 
Author: Warfighter Wellness
Author URI: https://wordpress.org/
Description: 
Tags: 
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: warfighterwellness
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

@charset "utf-8";
body {
    font-family: 'Open Sans', 'Verdana', sans-serif;
}

/*********** FONT INFO ***********/
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.opensans {
    font-family: "Open Sans", "Verdana", sans-serif, system-ui;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings:
        "wdth" 400,
    "wdth" 500,
    "wdth" 600,
    "wdth" 700,
    "wdth" 800;
}

/*********** COLORS ***********/
:root {
    --hpwgreen: rgba(104, 117, 78, 1.00);
    --hpwtan: rgba(205, 186, 156, 1.00);
    --hpwtanlite: rgba(225, 213, 195, 1.00);
    --hpwgreenlite: rgba(192, 196, 180, 1.00);
    --hpwdarkgreen: rgba(52,60,39, 1.00);
    --hpwdarktan: rgba(125,111,90,1.0);
    --hpwblack: rgba(0,0,0,1.0);
    --darkgrey: rgba(74,74,74,1.0);
    --litegrey: rgba(200,200,200,1.0);
    --white: rgba(255,255,255,1.0);
    --hpwred: rgba(178,85,85,1.0);
    --hpworange: rgba(250,176,89,1.0);
    --hpwyellow: rgba(263,232,121,1.0);
    --hpwlimegreen: rgba(164,207,94,1.0);
    --hpwblue: rgba(79,138,187,1.0);
    --hpwpurple: rgba(164,108,187,1.0);
    --hpwpink: rgba(230,153,181,1.0);
    --baseblack: rgba(33,37,41,1.0)
    --globalbackground: rgba(249,247,244,1.0);
}

/*********** MASTHEAD *********/
#masthead {
    background-image: url('images/BG_green-black-gradient.jpg');
    background-color: #343c27;
    background-repeat: repeat-x;
}

.search-n-menu input#s {
    border-radius: 5rem;
    margin: 0.75rem 0;
    width: 328px;
    padding: 0 1rem;
}

#aux-navigation {
    background-color: transparent;
    color: #fff;
    font-weight: 800;
}

#aux-menu-list {
    list-style: none;
    padding-left: 0.5em;
}

#aux-menu-list li {
    display: inline-block;
    font-size: 1.25rem;
}

#aux-menu-list a {
    color: #fff;
}

#aux-menu-list a:hover {
    color: var(--hpwtanlite);
}

#aux-menu-list li:nth-child(1)::after {
    content: ' • ';
}

.primary-menu-container {
    padding: 0.5em 0;
}

/********** W2 NAVIGATION **********/


/********** LISTS **********/

ul.triangle { list-style-type: none; padding-inline-start: 0rem; margin: 0 0 1rem 1rem;}
ul.triangle li { display: block; background-repeat: no-repeat; background-position: 0rem .6rem; padding-left: 2rem; padding-top: .25rem; padding-bottom: .25rem; margin: .375rem 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMy4yIiBoZWlnaHQ9IjE1LjIiIHZpZXdCb3g9IjAgMCAxMy4yIDE1LjIiPg0KICA8cGF0aCBpZD0iUG9seWdvbl80IiBkYXRhLW5hbWU9IlBvbHlnb24gNCIgZD0iTTcuNiwwbDcuNiwxMy4ySDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMy4yKSByb3RhdGUoOTApIiBmaWxsPSJyZ2JhKDEwNCwxMTcsNzgsMC40KSIvPg0KPC9zdmc+DQo=); }  

ul.triangle > li > ul > li {display: block; background-repeat: no-repeat; background-position: 0rem .7rem; padding-left: 1.75rem; padding-top: .25rem; padding-bottom: .25rem; margin: .375rem 0 .375rem .75rem; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMyIgaGVpZ2h0PSIxMyIgdmlld0JveD0iMCAwIDEzIDEzIj4NCiAgPHJlY3QgaWQ9IlJlY3RhbmdsZV81OTMiIGRhdGEtbmFtZT0iUmVjdGFuZ2xlIDU5MyIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiBmaWxsPSIjYzBjNGI0Ii8+DQo8L3N2Zz4NCg==);}

ul.triangle > li > ul > li > ul > li {display: block; background-repeat: no-repeat; background-position: 0rem .75rem; padding-left: 1.5rem; padding-top: .25rem; padding-bottom: .25rem; margin: .375rem 0; background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgdmlld0JveD0iMCAwIDEwIDEwIj4NCiAgPHJlY3QgaWQ9IlJlY3RhbmdsZV80OSIgZGF0YS1uYW1lPSJSZWN0YW5nbGUgNDkiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgcng9IjUiIGZpbGw9IiNjMGM0YjQiLz4NCjwvc3ZnPg0K);}

ol.round {margin: 0 0 0 1rem; padding: 0; list-style-type: none;}
ol.round li {counter-increment: step-counter; margin-bottom: 1.25rem; padding-left: 2.0rem;}
ol.round li::before {content: counter(step-counter); position:absolute; left: 1rem; font-size: 1rem; background-color: var(--hpwgreenlite); margin-top: -0.125rem; color: white; font-weight: 800; padding: .2rem .7rem; border-radius: 1rem;}


/********** HEADERS **********/
h1, h2, h3, h4, h5, h6 {margin-bottom: 1rem;}


/***** UNORDERED LISTS, ORDERED LISTS *****/
ul.triangle.two-col, ul.triangle.three-col {display: flex; flex-wrap: wrap; gap: 0 2rem;}
ul.triangle.two-col > li {width: calc(50% - 1rem);}
ul.triangle.three-col > li {width: calc(33.3% - 2rem);}

ol.rnd {margin: 0; padding: 0; list-style-type: none; position: relative;}
ol.rnd li {counter-increment: step-counter; margin-bottom: 1rem; padding-left: 2.5rem;}
ol.rnd li::before {content: counter(step-counter); position:absolute; left: 0rem; font-size: 1rem; background-color: var(--hpwgreenlite); margin-top: -0.125rem; color: white; font-weight: 800; padding: .2rem .7rem; border-radius: 1rem;}

@media (min-width: 768px) {
	ol.rnd li::before {left: 1rem;}
	ol.rnd li {padding-left: 4.5rem;}
}

ol.outline {list-style: none; counter-reset: count; margin-left: 2rem;} 
ol.outline li {counter-increment: count; margin-bottom: 15px; position: relative;} 
ol.outline li::before {content: counter(count); color: rgba(104, 117, 78, 1.00); font-weight: bold; border: 2px solid #000000; border-radius: 20px; padding: 2px; line-height: 29px; text-align: center; width: 37px; margin-right: 15px; position: absolute; left: -49px; top: -5px;}


/********** LAZY BLOCKS **********/
.introduction {margin: 2rem auto;}
.introduction p:last-of-type{margin-bottom: 0;}

/********** FLIP CARDS **********/
:not(.wp-block-lazyblock-flip-boxes) + .wp-block-lazyblock-flip-boxes {margin: 2rem auto 0;}
.wp-block-lazyblock-flip-boxes + .wp-block-lazyblock-flip-boxes {margin: 1rem auto;}
.wp-block-lazyblock-flip-boxes + :not(.wp-block-lazyblock-flip-boxes) {margin: 1rem auto 2rem;}

.flip--cards {position: relative; display: flex; justify-content: space-evenly; gap: 1rem; perspective: 1000px;}

.flip--cards > .is-flipped.inner{transform: rotateY(-180deg);}

.flip--cards img {border-radius:  1em;} 
.flip--cards > .inner {position: relative; text-align: center; transition: transform 0.4s ease-in-out; transform-style: preserve-3d; box-shadow: 0 0 .25em rgba(0,0,0, 0.5); display: grid; cursor: pointer;}

.flip--cards > .crd > .front, .flip--cards > .crd > .back {width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden;  grid-area: 1 / 1; overflow: hidden;}

div.flip--cards > p, div.flip--cards > div {width: calc(50% - .5rem); background-color: var(--hpwtanlite); border-radius: 1rem; margin: 0;}

.flip--cards > .crd > .front {position: relative; border-radius: 1rem;}
.flip--cards > .crd > .front::after{content: ""; position: absolute; bottom: 10px; right: 10px; width: 2rem; aspect-ratio: 1/1; z-index:10; background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCA0OC42IDQ3LjgiPgogIDwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAzMC4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiAyLjEuMSBCdWlsZCAxMzYpICAtLT4KICA8ZGVmcz4KICAgIDxzdHlsZT4KICAgICAgLnN0MCB7CiAgICAgICAgZmlsbDogI2ZmZjsKICAgICAgfQogICAgPC9zdHlsZT4KICA8L2RlZnM+CiAgPGcgaWQ9Ikdyb3VwXzU3OSI+CiAgICA8cGF0aCBpZD0iUGF0aF8xNzk3IiBjbGFzcz0ic3QwIiBkPSJNMTguMiw0NS43aDBMLjcsNDIuNGwzLjMtMy44QzEuNCwzNC41LDAsMjkuOCwwLDI1YzAtMy4zLjctNi43LDItOS43LDEuMy0zLDMuMS01LjcsNS40LTcuOSwyLjMtMi4zLDUtNC4xLDcuOS01LjRDMTguMy43LDIxLjcsMCwyNSwwYy4zLDAsLjYsMCwxLDBsMi41LDcuMmMtMS4xLS4yLTIuMy0uMy0zLjQtLjMtMTAsMC0xOC4xLDguMS0xOC4xLDE4LjEsMCwyLjguNyw1LjYsMS45LDguMWwzLjYtNC4yLDUuOCwxNi45aDBaIi8+CiAgICA8cGF0aCBpZD0iUGF0aF8xNzk4IiBjbGFzcz0ic3QwIiBkPSJNMjMuNiw0Ny44Yy0uOCwwLTEuNSwwLTIuMywwbC0yLjEtNy4zYzEuNC40LDIuOS41LDQuNC41LDEwLDAsMTguMS04LjEsMTguMS0xOC4xLDAtMi44LS43LTUuNi0xLjktOC4xbC0zLjYsNC4yTDMwLjMsMmwxNy41LDMuNC0zLjMsMy44YzIuNiw0LDQsOC44LDQsMTMuNiwwLDMuMy0uNyw2LjctMiw5LjctMS4zLDMtMy4xLDUuNy01LjQsNy45LTIuMywyLjMtNSw0LjEtNy45LDUuNC0zLjEsMS4zLTYuNCwyLTkuNywyWiIvPgogIDwvZz4KPC9zdmc+"); filter: opacity(0.4); background-repeat: no-repeat;}
.flip--cards > .crd >.front img {height: fit-content;}
.flip--cards > .crd > .front > p {position: absolute; font-size: 1.2rem; font-weight: 800; height: 100%; color: #ffffff; filter: drop-shadow(0px 4px 6px black); padding:1rem; width:100%; left: 50%; transform: translate(-50%, 50%); transition:0.4s ease-in-out; margin-bottom: 0; /* bottom: 0;*/}
.flip--cards > .crd.inner:hover >.front > p {transform: translate(-50%, 45%);}

.flip--cards > .crd > .back > * {text-align: left;}
.flip--cards > .crd > .back {transform: rotateY(180deg); vertical-align: middle; margin: auto; height: 100%; padding: 2rem;}

.flip--cards > .crd > .back p {width: 100%; margin-bottom: 0;}

@media (max-width: 768px) { 
    div.flip--cards {flex-direction: row; flex-wrap: wrap;} 
    div.flip--cards > .crd {width: calc(50% - .5rem); flex-grow: 1;}
}

@media (max-width: 500px) { 
    div.flip--cards {flex-direction: column;} 
    div.flip--cards > .crd {width: 100%;}
}

/****** ARTICLE BLOCKS WITH IMAGES ******/
.article--image--block--left {display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0;}
.article--image--block--left > div:nth-of-type(1) > img {width: 100%; border-radius: 1rem;}
.article--image--block--left > div:nth-of-type(2) {width:100%;}

@media (min-width:768px) {
   .article--image--block--left {display: flex; flex-direction: row; gap: 2rem;}
   .article--image--block--left > div:nth-of-type(1) {border-right: .25rem solid var(--hpwgreen); padding: 0 2rem 0 0;}
   .article--image--block--left > div:nth-of-type(1) {width: 34%; align-self: start;}
   .article--image--block--left > div:nth-of-type(2) {width: 66%;}
}

.article--image--block--right {display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1rem;}
.article--image--block--right > div:nth-of-type(1) {order: 1;}
.article--image--block--right > div > img {width: 100%; border-radius: 1rem;}
.article--image--block--right > div:nth-of-type(2) {width:100%; order:2;}

@media (min-width:768px) {
   .article--image--block--right {display: flex; flex-direction: row; gap: 2rem;}
   .article--image--block--right > div:nth-of-type(1) {border-left: .25rem solid var(--hpwgreen); padding: 0 0 0 2rem; order: 2;}
   .article--image--block--right > div:nth-of-type(1) {width: 34%; align-self: start;}
   .article--image--block--right > div:nth-of-type(2) {width: 66%; order:1;}
}


/****** LIST IMAGE BLOCKS ******/
.list--image--blocks {display: flex; flex-direction: row; gap: 1.5rem 1rem;}
.list--image--blocks > div {width: calc(33.3% - 1rem);}
.list--image--blocks > div > img {width: 100%; border-radius: 1rem;}
.list--image--blocks.icons > div > img {width: unset; display: block; margin: 0 auto;}
.list--image--blocks > div > div {margin: 1rem 0 0;}

@media (max-width: 768px) {
   .list--image--blocks {flex-wrap: wrap;}
   .list--image--blocks > div {width: calc(50% - 1rem);}
   .list--image--blocks.icons > div {width: calc(25% - 1rem);}
}
@media (max-width: 500px) {
  .list--image--blocks > div {width: 100%;}
  .list--image--blocks {flex-direction: column;}  
  .list--image--blocks.icons {flex-direction: row;}  
  .list--image--blocks.icons > div {width: calc(50% - 1rem);}
}

/****** HORIZONTAL LISTS ******/
.horizontal--card--vocab {display: flex; gap: 1rem; flex-wrap: wrap; flex-direction: column; margin: 1.5rem auto 2rem;}
.horizontal--card--vocab--icons {display: flex; gap: 1rem; flex-wrap: wrap; flex-direction: column;}
.horizontal--card--vocab > div, .horizontal--card--vocab--icons > div {display: flex;}
.horizontal--card--vocab > div > div > img {border-radius: 1rem; width:18rem; margin: 0 2rem 0 0; }
.horizontal--card--vocab--icons > div > div > img {width:9.375rem; margin: 0 2rem 0 0; }
.horizontal--card--vocab > div > div, .horizontal--card--vocab--icons > div > div {align-self: center;} 
.horizontal--card--vocab > div > div > p, .horizontal--card--vocab--icons > div > div > p {margin-bottom: 0; display: inline;}
.horizontal--card--vocab > div > div > p > strong, .horizontal--card--vocab--icons > div > div > p > strong  {font-weight: 800;}

@media (max-width: 500px) {
   .horizontal--card--vocab > div > div > img, .horizontal--card--vocab--icons > div > div > img {width: 100%; align-self: center; margin: 0 0 1rem 0;}
   .horizontal--card--vocab > div, .horizontal--card--vocab--icons > div {flex-direction: column;}
}



/********** CALLOUTS **********/
.callout {border-radius: 1rem; padding: 9rem 1.5rem 1.5rem 1.5rem; position: relative; margin: 2rem 0rem 3rem;}
  
.callout::before {content: url("/wp-content/uploads/2024/09/CalloutIcon_info.svg");
    width: 6rem; position: absolute; filter: opacity(0.25); left: 0rem; top: 1.5rem; text-align: center; margin: 0rem auto; right: 0;}

 .callout.bg-hpwgreen::before {content: url("/red/wp-content/uploads/2026/02/CalloutIcon_info-white.svg");}

    
.callout.noicon {padding: 1.5rem;}

.callout.noicon:before {content: none;}

.callout.bg-hpwgreen {color: var(--white);}
.callout.bg-hpwtanlite {color: var(--hpwblack); font-weight: 500;}
.callout.bg-white {color: var(--hpwblack); border: .25rem solid var(--hpwgreen);}


  @media (min-width: 768px) {
    .callout {max-width: 100%; padding: 5rem 3rem 5rem 12rem; margin: 2rem auto 3rem; }
    .callout:before {left: 3rem; margin: 0; text-align: left; top: calc(50% - 51.5px); }
    .callout.noicon {padding: 3rem;}
    .callout.noicon:before {left: 0;}
  }

/********** PASSWORD PROTECTED PAGES **********/

.entry-content > form.post-password-form {width: 1200px; margin: 0 auto;}

/********** backgrounds & borders **********/
.bg-hpwgreen {background-color: var(--hpwgreen);}
.bg-hpwtan {background-color: var(--hpwtan);}
.bg-hpwtanlite {background-color: var(--hpwtanlite);}
.bg-hpwgreenlite {background-color: var(--hpwgreenlite);}
.bg-white {background-color: var(--white);}
.bc-hpwgreen {border: .25rem solid var(--hpwgreen);}
.bc-black {border: .25rem solid var(--hpwblack);}