/* =========================================================
   TENGOKU FISHING
   Main E-Commerce Style Sheet
   ========================================================= */


/* ---------- GLOBAL ---------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;

    background:
        radial-gradient(
            circle at top,
            #343236 0%,
            #202124 45%,
            #121315 100%
        );

    background-attachment: fixed;

    color: #eeeeee;

    font-family:
        "Trebuchet MS",
        Arial,
        Helvetica,
        sans-serif;

    line-height: 1.6;
}


/* ---------- MAIN WEBSITE CONTAINER ---------- */

#wrapper {
    width: 90%;
    max-width: 1000px;

    margin: 35px auto;

    background-color: #292a2d;

    border: 1px solid #51494a;
    border-radius: 10px;

    overflow: visible;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, 0.55),
        0 0 30px rgba(181, 155, 155, 0.07);
}


/* =========================================================
   HEADER
   ========================================================= */

header {
    text-align: center;

    padding: 32px 25px 27px;

    background:
        linear-gradient(
            180deg,
            #39383b 0%,
            #28282b 55%,
            #18191b 100%
        );

    border-bottom: 3px solid #b59b9b;
    border-radius: 10px 10px 0 0;

    position: relative;
}


/* Decorative line underneath header */

header::after {
    content: "";

    display: block;

    width: 90px;
    height: 1px;

    margin: 14px auto 0;

    background-color: #c8aaaa;
}


/* ---------- LOGO ---------- */

.logo {
    width: 220px;
    max-width: 90%;

    height: auto;

    display: block;

    margin: 0 auto 12px;

    border-radius: 6px;

    box-shadow:
        0 8px 20px rgba(0, 0, 0, 0.45),
        0 0 20px rgba(215, 197, 197, 0.10);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.logo:hover {
    transform: translateY(-4px) scale(1.02);

    box-shadow:
        0 12px 25px rgba(0, 0, 0, 0.55),
        0 0 25px rgba(215, 197, 197, 0.18);
}


/* ---------- STORE NAME ---------- */

header h1 {
    margin: 10px 0 3px;

    color: #f3e8e2;

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 2.1em;
    font-weight: normal;

    letter-spacing: 6px;

    text-shadow:
        0 2px 3px #000000,
        0 0 10px rgba(181, 155, 155, 0.25);
}


/* ---------- TAGLINE ---------- */

.tagline {
    color: #cbbaba;

    margin: 5px;

    font-size: 0.95em;

    letter-spacing: 1.5px;
}


/* =========================================================
   NAVIGATION
   ========================================================= */

nav {
    background:
        linear-gradient(
            180deg,
            #1c1d1f,
            #101113
        );

    text-align: center;

    border-bottom: 1px solid #51494a;

    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.30);

    position: relative;

    z-index: 100;
}

.menu {
    list-style-type: none;

    margin: 0;
    padding: 0;
}

.menu > li {
    display: inline-block;

    position: relative;
}


/* ---------- NAVIGATION LINKS ---------- */

.menu a {
    display: block;

    position: relative;

    color: #eee7e3;

    text-decoration: none;

    padding: 15px 28px;

    font-size: 0.95em;
    font-weight: bold;

    letter-spacing: 0.7px;

    transition:
        color 0.25s ease,
        background-color 0.25s ease;
}


/* Small arrow for dropdown menu categories */

.menu > .dropdown > a::before {
    content: "▾";

    display: inline-block;

    margin-right: 7px;

    color: #d1aaaa;

    font-size: 0.8em;
}


/* Animated underline */

.menu > li > a::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 7px;

    width: 0;
    height: 2px;

    background-color: #d1aaaa;

    transition:
        width 0.25s ease,
        left 0.25s ease;
}

.menu > li > a:hover::after {
    width: 55%;

    left: 22.5%;
}

.menu a:hover {
    color: #ffffff;

    background-color: #302d2f;
}


/* Keyboard navigation */

.menu a:focus-visible,
.button:focus-visible {
    outline: 2px solid #e1bba7;
    outline-offset: 3px;
}


/* =========================================================
   DROP DOWN MENU
   ========================================================= */

.dropdown-content {
    display: none;

    position: absolute;

    left: 0;
    top: 100%;

    min-width: 215px;

    margin: 0;
    padding: 0;

    list-style-type: none;

    background-color: #18191b;

    border: 1px solid #645859;
    border-top: 3px solid #b59b9b;

    border-radius: 0 0 5px 5px;

    box-shadow:
        0 10px 20px rgba(0, 0, 0, 0.55);

    z-index: 1000;
}

.dropdown-content li {
    display: block;
}

.dropdown-content a {
    text-align: left;

    padding: 13px 18px;

    color: #eee7e3;

    border-bottom: 1px solid #303134;

    white-space: nowrap;

    transition:
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.dropdown-content li:last-child a {
    border-bottom: none;
}

.dropdown-content a:hover {
    background-color: #b59b9b;

    color: #17181a;

    padding-left: 23px;
}

.dropdown:hover .dropdown-content,
.dropdown:focus-within .dropdown-content {
    display: block;
}


/* =========================================================
   MAIN CONTENT
   ========================================================= */

main {
    min-height: 400px;

    padding: 42px;

    background:
        linear-gradient(
            135deg,
            #4c4d49 0%,
            #40413e 45%,
            #353633 100%
        );
}


/* ---------- HEADINGS ---------- */

h2 {
    margin-top: 0;

    color: #ead8d5;

    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    font-size: 1.65em;
    font-weight: normal;

    letter-spacing: 1px;

    text-shadow:
        1px 2px 3px rgba(0, 0, 0, 0.50);
}

h3 {
    font-family:
        "Palatino Linotype",
        "Book Antiqua",
        Georgia,
        serif;

    letter-spacing: 0.5px;
}

main p {
    line-height: 1.65;

    color: #f0eeee;
}


/* =========================================================
   WELCOME SECTION
   ========================================================= */

.welcome {
    margin-bottom: 38px;

    padding: 5px 6px 22px;
}


/* Accent underneath section headings */

.welcome h2::after,
.featured h2::after,
.products h2::after,
.about h2::after {
    content: "";

    display: block;

    width: 55px;
    height: 2px;

    margin-top: 8px;

    background-color: #b59b9b;
}


/* ---------- DATE AND TIME ---------- */

.date-time {
    display: inline-block;

    margin-top: 12px;
    margin-bottom: 0;

    padding: 8px 14px;

    color: #dfceca;

    background-color: rgba(24, 25, 27, 0.45);

    border-left: 3px solid #b59b9b;

    border-radius: 3px;

    font-size: 0.9em;
    letter-spacing: 0.4px;
}


/* =========================================================
   FEATURED PRODUCTS
   ========================================================= */

.featured {
    padding-top: 25px;

    border-top: 1px solid #716869;
}


/* =========================================================
   PRODUCTS PAGE
   ========================================================= */

.products > p {
    margin-bottom: 28px;
}


/* Allows dropdown links to land neatly on product sections */

#rods,
#reels,
#tackle {
    scroll-margin-top: 25px;
}


/* ---------- PRODUCT CARD ---------- */

.product-card {
    position: relative;

    margin-top: 20px;
    padding: 28px;

    background:
        linear-gradient(
            135deg,
            #62625f 0%,
            #535451 55%,
            #494a47 100%
        );

    border: 1px solid #706868;
    border-left: 5px solid #d1aaaa;

    border-radius: 7px;

    box-shadow:
        0 7px 18px rgba(0, 0, 0, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        border-color 0.3s ease;
}


/* Extra separation between multiple products */

.product-card + .product-card {
    margin-top: 28px;
}


/* Product card motion */

.product-card:hover {
    transform: translateY(-5px);

    border-color: #9f8989;

    box-shadow:
        0 13px 25px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

.product-card h3 {
    margin-top: 0;

    color: #f2ded8;

    font-size: 1.3em;
}

.product-card p {
    color: #eeeeee;
}

.product-card strong {
    color: #f3ded8;
}


/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about {
    max-width: 800px;

    margin: 0 auto;

    padding: 5px 6px 15px;
}

.about p {
    margin-bottom: 18px;
}


/* =========================================================
   BUTTONS
   ========================================================= */

.button {
    display: inline-block;

    margin-top: 10px;

    padding: 11px 21px;

    background:
        linear-gradient(
            180deg,
            #e1bba7,
            #c89e91
        );

    color: #17181a;

    text-decoration: none;

    font-weight: bold;

    letter-spacing: 0.3px;

    border: 1px solid #efd0c0;
    border-radius: 4px;

    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.35);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.button:hover {
    background:
        linear-gradient(
            180deg,
            #efd2c5,
            #d7aaa0
        );

    transform: translateY(-2px);

    box-shadow:
        0 7px 12px rgba(0, 0, 0, 0.40);
}

.button:active {
    transform: translateY(0);

    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35);
}


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

footer {
    text-align: center;

    padding: 22px;

    background:
        linear-gradient(
            180deg,
            #1d1e20,
            #101113
        );

    color: #c9c9c9;

    border-top: 3px solid #b59b9b;

    border-radius: 0 0 10px 10px;
}

footer p {
    margin: 5px;

    font-size: 0.9em;

    letter-spacing: 0.4px;
}


/* =========================================================
   TEXT SELECTION
   ========================================================= */

::selection {
    background-color: #b59b9b;

    color: #17181a;
}


/* =========================================================
   MOBILE / SMALLER SCREENS
   ========================================================= */

@media screen and (max-width: 700px) {

    #wrapper {
        width: 95%;

        margin: 15px auto;
    }

    header {
        padding: 25px 15px;
    }

    .logo {
        width: 180px;
    }

    header h1 {
        font-size: 1.6em;

        letter-spacing: 3px;
    }

    .tagline {
        font-size: 0.9em;
    }

    .menu > li {
        display: block;
    }

    .menu a {
        width: 100%;
    }

    .dropdown-content {
        position: static;

        width: 100%;
        min-width: 0;

        border-left: none;
        border-right: none;
    }

    .dropdown-content a {
        text-align: center;
    }

    main {
        padding: 27px 22px;
    }

    .product-card {
        padding: 22px;
    }

    .date-time {
        display: block;
    }
}


/* =========================================================
   ACCESSIBILITY
   Reduces motion if the visitor requests it
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .logo,
    .product-card,
    .button,
    .menu a,
    .dropdown-content a {
        transition: none;
    }

    .logo:hover,
    .product-card:hover,
    .button:hover {
        transform: none;
    }
}