@import url(/styles/global.css);

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    background-color: var(--base-background-color);
    z-index: 1000;
}

header h1 {
    color: var(--base-color-orange);
    font-size: var(--base-h1-font-size);
    transition: var(--base-transition);
    cursor: pointer;
    padding: var(--base-padding);
}

header h1:hover {
    padding-top: calc(var(--base-size)*0.8);
    padding-bottom: calc(var(--base-size)*1.2);
}

.header-first-box {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

header form,
.search-bar-bottom {
    border-radius: var(--base-border-radius-x4);
    padding: var(--base-padding-even);
    background-color: var(--base-color-grey-light);
    border: solid var(--base-color-grey-light) 1px;
    transition: var(--base-transition);
    position: sticky;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    width: max-content;
}

.header-first-box form:hover {
    border: solid var(--base-color-grey) 1px;
    background-color: transparent;
}

header form input,
.search-bar-bottom input {
    border: none;
    background-color: transparent;
    width: auto;
    padding: var(--base-padding);
    color: var(--base-text-color);
}

.search-bar-bottom input {
    width: 80%;
}

.search-bar-bottom {
    display: none;
}

header form input,
.search-bar-bottom input:focus {
    outline: none;
}

header form input::placeholder,
.search-bar-bottom input::placeholder {
    font-size: var(--base-caption-font-size);
    color: var(--base-text-color);
    font-weight: var(--base-thin-font-weight);
}

header form button,
.search-bar-bottom button {
    border: none;
    background-color: var(--base-color-orange);
    color: var(--base-on-accent);
    padding: var(--base-size) calc(var(--base-size)*1.5);
    border-radius: 20cap;
    right: var(--base-size);
    position: absolute;
}

header form button a {
    font-size: var(--base-button-small-font-size);
}


header nav {
    display: flex;
    flex-direction: row;
    gap: var(--base-size-x2);
    padding: var(--base-size-x2)
}

header .back,
nav a {
    background-color: var(--base-color-grey-light);
    padding: var(--base-padding);
    border-radius: var(--base-border-radius-x6);
    color: var(--base-text-color);
    font-weight: var(--base-medium-font-weight);
    font-size: var(--base-button-medium-font-size);
    transition: var(--base-transition);
    cursor: pointer;
}

.top-menu-item {
    font-size: 14px;
}


.header-first-box a {
    background-color: transparent;
}

header nav a:hover {
    background-color: var(--base-color-orange);
    color: var(--base-on-accent);
    box-shadow: var(--base-color-shadow) 0px 2px 5px -1px, var(--base-color-shadow) 0px 1px 3px -1px;
}

header .back:hover {
    background-color: var(--base-color-orange);
    color: var(--base-on-accent);
    box-shadow: var(--base-color-shadow) 0px 2px 5px -1px, var(--base-color-shadow) 0px 1px 3px -1px;
}

.side-menu {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 100vw;
    z-index: 1000;
    background-color: var(--base-background-color);
    display: none;
    flex-direction: column;
    padding: var(--base-size-x4);
    justify-content: center;
    align-items: center;
    gap: var(--base-size-x2);
}

header .side-menu .side-menu-item {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 220px;
    min-height: 44px;
    text-align: center;
    font-size: 14px;
}

header .side-menu .side-menu-item svg {
    width: 16px;
    height: 16px;
}

header .side-menu [aria-label="close"] {
    position: absolute;
    top: var(--base-size-x4);
    right: var(--base-size-x4);
}

.side-menu-bar {
    display: none;
}

footer {
    padding: 2rem;
    background-color: var(--base-background-color-orange);
}

footer ul {
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}

footer ul li ul {
    display: flex;
    flex-direction: column;
    color: var(--base-grey-text-color)
}

footer ul li ul li {
    font-weight: var(--base-regular-font-weight);
    font-size: var(--base-caption-font-size);
    padding: var(--base-size);
}

footer ul li ul li a {
    margin-top: var(--base-size);
    font-weight: var(--base-regular-font-weight);
    font-size: var(--base-caption-font-size);
    color: var(--base-grey-text-color)
}

footer ul li h3 {
    font-size: var(--base-caption-font-size);
    color: var(--base-grey-text-color);
}

footer ul li #social-icons {
    flex-direction: row;
}

footer ul li #social-icons li {
    font-size: var(--base-h4-font-size);
    padding: var(--base-size-x2);
}

footer a {
    transition-duration: 0.3s;
}

footer a:hover {
    color: var(--base-color-orange);
}

footer ul li #social-icons li a {
    color: var(--base-grey-text-color);
    transition: var(--base-transition);
    font-size: var(--base-button-xlarge-font-size);
    font-weight: var(--base-heavy-font-weight);
}

footer ul li #social-icons li a:hover {
    transform: scale(1.2);
}


@media (max-width: 570px) {
    footer ul {
        flex-direction: column;
        justify-content: center;
    }

    footer ul li #social-icons {
        justify-content: flex-start;
    }

}

@media (max-width: 590px) {
    .header-first-box {
        justify-content: center;
        gap: 0;
        flex-direction: column;
    }

    footer ul li li {
        padding: var(--base-size-x2)
    }
}

@media (max-width: 650px) {
    .search-bar {
        display: none;
    }

    .search-bar-bottom {
        display: inline;
        position: sticky;
        bottom: 20px;
        left: 5vw;
        right: 5vw;
        z-index: 999;
        width: 90vw;
    }
}


@media (max-width: 900px) {
    .top-menu-item {
        display: none;
    }

    .side-menu-bar {
        display: block;
    }
}

.site-footer { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding: 32px clamp(16px, 3vw, 48px); background: var(--base-color-light-orange); color: var(--base-text-color); }
.site-footer strong { color: var(--base-color-orange); font-size: 20px; }
.site-footer p { margin-top: 8px; line-height: 1.5; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 12px; padding: 0; }
.site-footer nav a { background: transparent; color: var(--base-color-orange); font-size: 14px; padding: 8px; }
@media (max-width: 650px) { .site-footer { flex-direction: column; } }

/* Shared navigation on every page */
.site-header { min-height: 68px; padding: 8px clamp(16px, 3vw, 32px); background: var(--base-color-white); }
.site-header .site-logo { padding: 0; color: var(--base-color-orange); font-size: clamp(25px, 3vw, 34px); font-weight: 800; letter-spacing: -0.04em; }
.site-header .site-nav { display: flex; align-items: center; gap: 8px; padding: 0; margin-left: auto; }
.site-header .site-nav a, .site-header .site-drawer a { display: inline-flex; align-items: center; gap: 8px; color: var(--base-text-color); background: var(--base-color-grey-light); border-radius: 999px; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.site-header .site-nav a span, .site-header .site-drawer a span { font-size: inherit; }
.site-header .site-nav a:hover, .site-header .site-drawer a:hover { color: var(--base-on-accent); background: var(--base-color-orange); }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; margin-left: 8px; border: 0; border-radius: 50%; color: var(--base-text-color); background: var(--base-color-grey-light); cursor: pointer; flex: 0 0 auto; }
.theme-toggle:hover { color: var(--base-on-accent); background: var(--base-color-orange); }
.site-menu-toggle { display: none; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; color: var(--base-text-color); background: var(--base-color-grey-light); cursor: pointer; }
.site-header .site-drawer { position: fixed; inset: 68px 0 0; z-index: 1100; padding: 20px 16px; background: var(--base-color-white); display: flex; flex-direction: column; align-items: stretch; gap: 10px; overflow-y: auto; }
.site-header .site-drawer[hidden] { display: none; }
.site-header .site-drawer a { min-height: 50px; border-radius: 16px; font-size: 16px; }
.site-header .site-drawer svg { width: 20px; height: 20px; }
.theme-toggle:focus-visible, .site-menu-toggle:focus-visible { outline: 2px solid var(--base-color-orange); outline-offset: 3px; }
@media (max-width: 900px) {
  .site-header .site-nav { display: none; }
  .site-menu-toggle { display: inline-flex; margin-left: 12px; }
  .theme-toggle { margin-left: auto; }
}