/*
 Theme Name:   Understrap Child
 Theme URI:    https://understrap.com
 Description:  Understrap Child Theme
 Author:       the Understrap Contributors
 Author URI:   https://github.com/understrap/understrap-child/graphs/contributors
 Template:     understrap
 Version:      1.2.0
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  understrap-child
 Tags: one-column, custom-menu, featured-images, theme-options, translation-ready
 GitHub Theme URI: understrap/understrap-child
*/

/* =====================
   FONTS
   ===================== */

@font-face {
    font-family: 'Dahlia';
    src: url('fonts/Dahlia_Regular.woff2') format('woff2'),
         url('fonts/Dahlia_Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahlia Condensed';
    src: url('fonts/Dahlia_Regular_Condensed.woff2') format('woff2'),
         url('fonts/Dahlia_Regular_Condensed.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahlia';
    src: url('fonts/Dahlia_Medium.woff2') format('woff2'),
         url('fonts/Dahlia_Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahlia Condensed';
    src: url('fonts/Dahlia_Medium_Condensed.woff2') format('woff2'),
         url('fonts/Dahlia_Medium_Condensed.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahlia';
    src: url('fonts/Dahlia_Bold.woff2') format('woff2'),
         url('fonts/Dahlia_Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dahlia Condensed';
    src: url('fonts/Dahlia_Bold_Condensed.woff2') format('woff2'),
         url('fonts/Dahlia_Bold_Condensed.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Nexa Text Regular */
@font-face {
    font-family: 'NexaText';
    src: url('fonts/NexaText-Regular.woff2') format('woff2'),
         url('fonts/NexaText-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Nexa Text Light */
@font-face {
    font-family: 'NexaText';
    src: url('fonts/NexaText-Light.woff2') format('woff2'),
         url('fonts/NexaText-Light.woff') format('woff');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

/* Nexa Text Bold */
@font-face {
    font-family: 'NexaText';
    src: url('fonts/NexaText-Bold.woff2') format('woff2'),
         url('fonts/NexaText-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* =====================
   TYPOGRAPHY
   ===================== */

h1, h2 {
    font-family: 'Dahlia', sans-serif;
    font-weight: 700;
    font-size: 5.5em;
}

h3 {
    font-family: 'Dahlia', sans-serif;
    font-weight: 500;
}

body, p, li, input, textarea {
    font-family: 'NexaText', sans-serif;
    font-weight: 400;
}

/* =====================
   NAVBAR
   ===================== */

header#wrapper-navbar {
    position: absolute;
    width: 100%;
    z-index: 100;
}

a.navbar-brand {
    visibility: hidden;
}

.navbar {
    background-color: transparent !important;
}

/* Always show hamburger, hide expanded nav */
.navbar-expand-md .navbar-toggler {
    display: block !important;
}

.navbar-expand-md .navbar-collapse:not(.show) {
    display: none !important;
}

.navbar .container {
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Hamburger icon */
.navbar-toggler {
    z-index: 10000;
    position: relative;

    border: none !important;
    box-shadow: none !important;
    padding: 0;
}

.navbar-toggler:focus {
    box-shadow: none !important;
    outline: none !important;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    width: 30px;
    height: 24px;
}

/* =====================
   OFF-CANVAS MENU
   ===================== */

#navbarNavDropdown {
    position: fixed;
    top: 0;
    right: -300px;
    width: 300px;
    height: 100vh;
    background-color: #000;
    z-index: 10001;
    transition: right 0.3s ease;
    padding: 80px 30px 30px;
    display: block !important;
}

#navbarNavDropdown.show {
    right: 0;
}

#navbarNavDropdown .navbar-nav {
    flex-direction: column;
    align-items: flex-end;
}

#navbarNavDropdown .nav-link {
    color: #eec32c !important;
    font-family: 'Dahlia', sans-serif;
    font-weight: 700;
    font-size: 1.5rem;
    padding: 15px 0 !important;
    border-bottom: 1px solid #222;
    text-align: right;
    display: block;
    width: 100%;
}

#navbarNavDropdown .nav-link:hover {
    color: #fff !important;
}

/* =====================
   HERO
   ===================== */

.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    background-color: #eec32c;
}

.hero img {
    max-width: 54%;
}

/* =====================
   HEARTBEAT ANIMATION
   ===================== */

@keyframes heartbeat {
    0%   { transform: scale(1); }
    10%  { transform: scale(1.2); }
    20%  { transform: scale(1); }
    30%  { transform: scale(1.2); }
    40%  { transform: scale(1); }
    50%  { transform: scale(1.2); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

.hero img {
    animation: heartbeat 1.7s ease-in 1;
}

/* =====================
   FOOTER
   ===================== */

.site-info { text-align: center; }

@keyframes wobble {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-15deg); }
    50%  { transform: rotate(15deg); }
    75%  { transform: rotate(-10deg); }
    100% { transform: rotate(0deg); }
}

.social-links {
    display: flex;
    gap: 20px;
    justify-content: center;
    padding: 20px 0;
}

.social-links a {
    color: #000;
    font-size: 2.5rem;
    transition: color 0.2s ease;
    display: inline-block; /* needed for transform to work */
}

.social-links a:hover {
    animation: wobble 0.4s ease;
}

/* =====================
   MOBILE
   ===================== */

@media (max-width: 768px) {
    h1, h2 {
        font-size: 4em;
    }

    .hero img {
        max-width: 76%;
    }
}