/***************
    COACH LIKE A WOMAN
*****************/

:root {
    --quarter: .25rem;
    --half: .5rem;
	--single: 1rem;
    --single-quarter: 1.5rem;
	--double: 2rem;
	--triple: 3rem;
    --desktop: 1440px;
    --primary:  #ae2185;
    --secondary: #fcf495;
    --tertiary: #a7daf2 ; 
    --black: #4A4A4A;
    --white:#FEFEFE;
    --gray: #F7F7F7;
    /* I use magic numbers because the Row's gap makes too much space. */
    --row-gap-helper: 2.5;
    --mobile-btn-position: 30px;
}

h1,
h2,
h3,
h4,
h5,
h6,
a {
    color: var(--primary);
}


/* Header */

.header-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
}

.header-logo {
    display: flex;
}

.header-logo-img-container {
    width: 120px;
    height: 100px;
    margin-top: .5rem;
}

.header-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header-logo-link {
    margin-top: var(--single);
}

h2.header-logo-title {
    color: var(--white) !important;
}

/* Body */
      
main {
	margin-left: auto;
	margin-right: auto;
	max-width: 100%;
	overflow: hidden;
	position: relative;
}

.container,
.body {
	margin: 0 auto;
	width: 100%;
}

section {
    padding: var(--single);
}

.button {
    background-color: var(--tertiary);
    color: var(--white);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    margin: var(--single);
    padding: var(--single);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--single);
    width: 100%;
}

.button:second-child {
    background-color: var(--secondary);
}

.button:hover  {
    background-color: var(--primary);
    transition: ease-in;
}

.button:second-child:hover {
    background-color: var(--tertiary);
}

.quiz {
    max-width: var(--desktop);
}

.quiz__group-title {
    margin-bottom: var(--single);
    font-weight: 700;
}

.quiz__wrapper {
    padding: var(--single);
    border: 1px solid var(--primary);
    margin: var(--single);
}

.accordion__answer .quiz__wrapper {
    margin: var(--single) 0;
}

.accordion__answer .quiz__title  {
    font-size: 24px;
}

.quiz__question {
    padding-top: var(--single);   
    padding-bottom: var(--single);
}

.quiz__answer--correct {
    color: green;
}

.quiz__answer--disabled {
    color: grey;
}

.quiz__answer--incorrect {
    color: red;
}

.quiz__explanation {
    display: none;
}

.quiz__explanation--reveal {
    display: block;
}

/***************
  Helper classes
*****************/

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

/***************
 Content blocks
*****************/

  .accordion__answer a::after,
  .section-content--coach-woman a::after {
      padding-left: .25rem;
      font-size: 12px;
      -webkit-font-smoothing: antialiased;
      font-family: "Font Awesome 5 Solid";
      font-weight: 500; 
      content: "\f0c1";
      display: inline-block;
      font-style: normal;
      font-variant: normal;
      text-rendering: auto;
  }

.accordion {
    margin-top: var(--single);
    margin-bottom: var(--single);
    padding-left: var(--single-quarter);
    padding-right: var(--single-quarter);
}

.accordion__header {
    margin-bottom: var(--single);
}

.accordion__item {
    border-top: 1px solid var(--primary);
}
.accordion__item:last-child {
    border-bottom: 1px solid var(--primary);
}

.accordion__title {
    margin-bottom: 0;
    font-weight: 700;
    font-size: var(--single);
    transition: color 0.5s;
    display: inline-flex;
    align-items: center;
    gap: var(--single);
}

.accordion__icon-wrapper {
    margin-left: var(--half);
}

.accordion__icon {
    color: var(--primary);
    background-color: var(--white);
    transition: all 0.5s;
}

.accordion__icon path {
    color: var(--primary);
}

.accordion__question {
    font-weight: 700;
    font-style: italic;
    text-transform: uppercase;
    width: 100%;
    text-align: left;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--single);
    font-size: 1.125rem;
    line-height: 1.25;
}
.accordion__question:focus {
    outline: none;
}

.accordion__answer {
    padding: var(--single);
    border-top: 1px solid var(--primary);
}

.accordion__answer:has(.quiz) {
    padding: var(--single) 0;
}

.accordion__answer span, .accordion__answer p, .accordion__answer a {
    margin-bottom: var(--single);
}
.accordion__answer h2, .accordion__answer h3, .accordion__answer h4, .accordion__answer h5, .accordion__answer h6 {
    margin-top: 8px;
    margin-bottom: 8px;
}
.accordion__answer p {
    font-size: var(--single);
    line-height: 1.5;
}
[aria-expanded="true"] .hide-for-expanded, 
[aria-expanded="false"] .hide-for-not-expanded {
    display: none;
}

.accordion__block {
    display: block;
}

.accordion__hidden {
    display: none;
}

/***************
   Text And Image Block
*****************/

.text-and-image-container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

.text-and-image-container--reverse {
    flex-direction: column-reverse;
}

.text-and-image .section-img-container {
    height: 220px;
    padding: var(--single);
}

.section-img-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

.listed-services {
    width: 100%;
}

.link {
    list-style-type: none;
    width: 100%;
    padding-bottom: 0.75rem;
    display: flex;
}

.link__text {
    text-decoration: underline;
    text-underline-offset: 5px;
}

.link__icon {
    margin-left: 0.25rem;
    padding-top: 0.25rem;
}

.section-content {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: inherit;
    align-content: center;
    padding: var(--single) var(--double);
}

.section-content ul {
    padding-top: var(--single);
    padding-bottom: var(--single);
    width: 100%;
    text-align: left;
}

.section-title {
    font-size: 32px;
    margin-bottom: var(--single-quarter);
    color: var(--primary);
}

.section-link {
    text-decoration: underline;
    text-transform: uppercase;
    font-weight: 700;
}

.text-and-image .section-img-container {
    height: 220px;
    padding: var(--single);
}

.section-img-container img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.section-button,
.button {
    background-color: var(--secondary);
    color: var(--black);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    margin: var(--single);
    padding: var(--single);
    display: inline-block;
    border: 1px solid transparent;
    border-radius: var(--single);
    width: 100%;
}


.section-button:hover,
.button:hover  {
    background-color: var(--tertiary);
    transition: ease-in;
}

/***************
  Helper classes
*****************/

.sr-only{
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }

.bg-white {
    background-color: var(--white);
    color: var(--black);
}

.bg-primary {
    background-color: var(--primary);
    color: var(--white);
}

.bg-image .section-title,
.bg-primary .section-title,
.bg-image .section-content,
.bg-primary .section-content
.bg-image .link__text,
.bg-primary .link__text {
    color: var(--white);
}

.bg-white .section-button,
.bg-image .section-button {
    background-color: var(--primary-dark);
    color: var(--white);
}

.bg-white .section-button:hover,
.bg-image .section-button:hover {
    background-color: var(--secondary);
    color: var(--black);
}


/* OVERWRITING MAIN STYLES */

/* Header */

header.header-main.header-coach-woman,
header.header-main {
	background-color: var(--white);
    background-image: initial;
    background-repeat: initial;
    background-position: initial;
    background-size: initial;
    padding-top: initial;
}

header.header-main.header-coach-woman nav,
header.header-main nav {
	background-color: var(--white);
}

/* Mobile menu toggle button */
.main-menu-btn {
    float: initial;
    position: absolute;
    top: var(--mobile-btn-position);
    right: 0;
}

.main-menu-btn-icon::before,
.main-menu-btn-icon,
.main-menu-btn-icon::after {
    background-color: var(--primary);
}

#main-menu > li.active > a {
    color: var(--secondary);
}
#main-menu > li.active > a:hover,
#main-menu > li.active > a:focus
 {
    color: var(--tertiary);
}

.sm-clean {
    width: 100%;
    background-color: var(--primary);
    color: var(--white)
}

.sm-clean a {
    color: var(--white);
}

.sm-clean ul li a {
    color: var(--white);
}

.sm-clean a:hover,
.sm-clean a:focus {
    color: var(--secondary);
}

.sm-clean li a:hover,
.sm-clean li a:focus {
    color: var(--tertiary);
}

footer {
    background-image: initial;
}

section.container {
    margin-top: initial;
}

section.theme-image,
section.theme-image.carousel-content  {
    padding: unset;
}

section.theme-image .row {
    margin-left: unset;
    margin-right: unset;
}

section.theme-image .carousel-content  {
    float: unset !important;
}


/***************
   TABLET STYLES
*****************/
@media (min-width: 768px) {

    /* Mobile menu toggle button */
    .main-menu-btn,
    .main-menu-btn-icon {
        display: none !important;
    }

    .header-logo-img-container {
        width: 150px;
        height: 150px;
    }
    
    .header-logo {
        margin-left: var(--single);
    }

    .sm-clean ul li a {
        color: var(--primary);
    }
    
    .text-and-image .section-img-container {
        height: 420px;
    }

    .section-button,
    .button {
        width: fit-content;
    }

}

/***************
   DESKTOP STYLES
*****************/
@media (min-width: 1280px) { 

    section {
        padding-top: var(--single-quarter);
        padding-bottom: var(--single-quarter);
    }

    .header-logo {
        margin-left: var(--double);
    }

    .header-container {
        justify-content: flex-start;
    }

    ul#main-menu {
        width: 100%;
        display: flex;
        justify-content: center;
        border-top: 1px solid var(--gray);
        border-bottom: 1px solid var(--gray);
        background-color: var(--primary);
    }

    #main-menu-state:not(:checked) ~ #main-menu {
        display: flex;
        justify-content: flex-start;
        padding-left: var(--single);
    }

    .container {
		max-width: var(--desktop);
        margin-left: var(--double);
        margin-right: var(--double);
	}

    /* Content Blocks */

    .accordion {
        padding-left: var(--double);
        padding-right: var(--double);
    }

    .accordion__header {
        margin-bottom: var(--double);
    }

    .accordion__question:focus {
        font-size: var(--single-quarter);
    }

    .section-content {
        flex-direction: column;
        justify-content: center;
        padding: var(--double);
    }

    .text-and-image .section-content {
        max-width: 50%;
        flex: 0 0 50%;
        width: 100%;
    }

    .section-title {
        font-size: 56px;
        margin-right: auto; 
    }

    
    .section-button,
    .button {
        width: fit-content;
    }

    .section-button:first-of-type {
        margin-left: 0;
    }

    .text-and-image .section-img-container {
        max-width: 50%;
        flex: 0 0 50%;
        width: 100%;
        height: 720px;
        align-self: center;
    }

    .section-content ul {
        width: initial;
    }

    /* Text and Image */

    .text-and-image-container {
        flex-direction: row;
        flex-wrap:nowrap;
    }

    .text-and-image-container--reverse {
        flex-direction: row-reverse;
    }

    /* OVERWRITING MAIN STYLES */

    .sm-clean a {
        color: var(--white);
    }

    .quiz__wrapper {
        padding: var(--double);
        margin: var(--double);
    }

    .quiz__group-title {
        margin-bottom: var(--double);
    }

    .text-center.text-center--coach-woman {
        text-align: initial;
    }

    .row.row--coach-woman {
        margin-left: initial;
        margin-right: initial;
    }

}