/* =========================================================
   DREY SHARED MODULE STYLES

   Shared presentation for compact Drey modules such as
   Light Tools and Shop pages.

   Global colours and font families are defined in style.css.
   ========================================================= */


/* =========================================================
   Module page
   ========================================================= */

.drey-module {
    box-sizing                  : border-box ;
    margin                      : 0 auto ;
    max-width                   : 1180px ;
    padding                     : 0.7rem 1rem ;
}

.drey-module *,
.drey-module *::before,
.drey-module *::after {
    box-sizing                  : border-box ;
}


/* =========================================================
   Module heading
   ========================================================= */

.drey-module-heading {
    margin-bottom               : 0.55rem ;
    max-width                   : none ;
}

.drey-module-eyebrow {
    color                       : var(--grey) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.78rem ;
    font-weight                 : 700 ;
    letter-spacing              : 0.12em ;
    line-height                 : 1 ;
    margin                      : 0 ;
    text-transform              : uppercase ;
}

.drey-module-heading h1 {
    color                       : var(--dark-green) ;
    font-family                 : var(--merriweather-face), serif ;
    font-size                   : clamp(2rem, 3vw, 3rem) ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    line-height                 : 0.9 ;
    margin                      : -0.08rem 0 0.12rem 0 ;
}

.drey-module-heading > p:not(.drey-module-eyebrow) {
    font-family                 : var(--raleway-face), sans-serif ;
    line-height                 : 1.08 ;
    margin                      : 0 ;
}


/* =========================================================
   Cards / panels
   ========================================================= */

.drey-module-card {
    background                  : var(--light-green) ;
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    box-shadow                  : 0 2px 6px rgba(33, 71, 0, 0.12) ;
    padding                     : 0.7rem 0.85rem ;
}


/* =========================================================
   Labels
   ========================================================= */

.drey-module-label {
    color                       : var(--dark-green) ;
    display                     : block ;
    font-family                 : var(--merriweather-face), serif ;
    font-size                   : 1rem ;
    font-style                  : italic ;
    font-weight                 : 700 ;
    line-height                 : 1.1 ;
    margin-bottom               : 0.3rem ;
}


/* =========================================================
   Inputs
   ========================================================= */

.drey-module-input,
.drey-module-textarea {
    background                  : #ffffff ;
    border                      : 2px solid var(--dark-green) ;
    border-radius               : 5px ;
    color                       : #111111 ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 0.95rem ;
    transition                  : box-shadow 160ms ease,
                                  border-color 160ms ease ;
}

.drey-module-input {
    padding                     : 0.45rem 0.6rem ;
}

.drey-module-textarea {
    display                     : block ;
    line-height                 : 1.3 ;
    min-height                  : 8rem ;
    padding                     : 0.55rem 0.65rem ;
    resize                      : vertical ;
    width                       : 100% ;
}

.drey-module-input:focus,
.drey-module-textarea:focus {
    border-color                : var(--dark-purple) ;
    box-shadow                  : 0 0 0 4px rgba(54, 15, 90, 0.16) ;
    outline                     : none ;
}


/* =========================================================
   Help text
   ========================================================= */

.drey-module-help {
    color                       : var(--dark-green) ;
    font-family                 : var(--roboto-condensed-face), sans-serif ;
    font-size                   : 0.82rem ;
    line-height                 : 1.2 ;
    margin                      : 0.3rem 0 0.6rem 0 ;
}


/* =========================================================
   Button rows
   ========================================================= */

.drey-module-button-row {
    display                     : grid ;
    gap                         : 0.75rem ;
    grid-template-columns       : 1fr 1fr ;
}


/* =========================================================
   Buttons
   ========================================================= */
.drey-module-button {
    align-items                 : center ;
    border                      : 1px solid var(--dark-green) ;
    border-radius               : 5px ;
    box-sizing                  : border-box ;
    cursor                      : pointer ;
    display                     : inline-flex ;
    font-family                 : var(--raleway-face), sans-serif ;
    font-size                   : 0.8rem ;
    font-weight                 : 700 ;
    gap                         : 0.35rem;
    height                      : 2rem ;
    justify-content             : center ;
    line-height                 : 1 ;
    padding                     : 3px 9px ;
    text-decoration             : none ;
    transition                  : box-shadow 130ms ease,
                                  background 130ms ease,
                                  border-color 130ms ease,
                                  opacity 130ms ease ;
}

.drey-module-button:hover:not(:disabled) {
    box-shadow                  : 0 2px 5px rgba(33, 71, 0, 0.18) ;
}

.drey-module-button:active:not(:disabled) {
    box-shadow                  : none ;
}

.drey-module-button:focus-visible {
    outline                     : 4px solid rgba(54, 15, 90, 0.28) ;
    outline-offset              : 2px ;
}

.drey-module-button:disabled {
    cursor                      : not-allowed ;
    opacity                     : 0.42 ;
}


/* Primary */

.drey-module-button--primary {
    background                  : var(--dark-purple) ;
    border-color                : var(--dark-purple) ;
    color                       : #ffffff ;
}

.drey-module-button--primary:hover:not(:disabled) {
    background                  : var(--dark-green) ;
    border-color                : var(--dark-green) ;
}


/* Secondary */

.drey-module-button--secondary {
    background                  : #ffffff ;
    border-color                : var(--dark-green) ;
    color                       : var(--dark-green) ;
}

.drey-module-button--secondary:hover:not(:disabled) {
    background                  : var(--light-green) ;
}


/* =========================================================
   Responsive
   ========================================================= */

@media (max-width: 700px) {

    .drey-module {
        padding                 : 0.55rem 0.7rem ;
    }

    .drey-module-button-row {
        grid-template-columns   : 1fr ;
    }

}