/* css/global.css */
/* ---------------------------------------------------------------------------
   Design tokens — derived from the original index.html landing-page design,
   now shared across every shop page (home, product, cart, checkout).
--------------------------------------------------------------------------- */
:root {
    /* Brand palette (from the landing page) */
    --blue:   #164f7d;
    --blue2:  #2477b7;
    --orange: #f28a18;
    --cream:  #fffaf1;
    --mint:   #eaf7f2;

    /* Text + surfaces */
    --text-color: #263b49;
    --text-muted: #65737c;
    --bg-color:   #ffffff;
    --gray-light: #f7f7f7;
    --gray-border:#e6ecef;

    --shadow: 0 18px 45px rgba(25, 55, 75, .12);
    --radius: 24px;

    --font-main: Arial, Helvetica, sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-main);
    background: linear-gradient(180deg, #fffdf8 0%, #f7fbfa 55%, #fff 100%);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: inherit; }

main { width: 100%; }

.container,
.wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 22px;
}

/* ---------------------------------------------------------------------------
   HEADER / NAV
--------------------------------------------------------------------------- */
header.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(22, 79, 125, .08);
}

header.site-header nav {
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.brand { line-height: 1.05; text-decoration: none; }
.brand .logo {
    font-size: 30px;
    font-weight: 900;
    letter-spacing: -1.5px;
    color: var(--blue);
}
.brand .logo span { color: var(--orange); }
.brand .tag {
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-top: 2px;
}

.menu {
    display: flex;
    gap: 26px;
    align-items: center;
}
.menu a {
    text-decoration: none;
    font-weight: 700;
    color: var(--blue);
}
.menu a:hover { color: var(--orange); }
/* Icons dienen nur der Mobil-Ansicht – am Desktop zeigen wir den Text. */
.menu-icon { display: none; }
.menu-link { display: inline-flex; align-items: center; gap: 7px; }
.menu .cta {
    background: var(--orange);
    color: #fff;
    padding: 10px 17px;
    border-radius: 999px;
}
.menu .cta:hover { color: #fff; opacity: .92; }

/* Cart link + badge */
.cart-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--blue);
    text-decoration: none;
}
.cart-link:hover { color: var(--orange); }
.cart-badge {
    background: var(--orange);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    min-width: 20px;
    text-align: center;
    line-height: 1.4;
}

/* ---------------------------------------------------------------------------
   BUTTONS (shared)
--------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    text-decoration: none;
    padding: 14px 21px;
    border-radius: 999px;
    font-weight: 800;
    border: 2px solid var(--blue);
    cursor: pointer;
}
.btn.primary { background: var(--blue); color: #fff; }
.btn.secondary { background: #fff; color: var(--blue); }

/* ---------------------------------------------------------------------------
   FOOTER
--------------------------------------------------------------------------- */
footer.site-footer {
    background: var(--blue);
    color: #fff;
    padding: 34px 0;
    margin-top: auto;      /* pin footer to the bottom */
    font-size: .95rem;
}
footer.site-footer .wrap {
    display: flex;
    justify-content: space-between;
    gap: 16px 20px;
    flex-wrap: wrap;
    align-items: center;
}
footer.site-footer a {
    color: #fff;
    text-decoration: none;
}
footer.site-footer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------------------------- */
@media (max-width: 800px) {
    header.site-header nav { height: 66px; }
    /* Mobil: alle Links als Icons zeigen (Text ausblenden), damit Shop,
       Versand, Kontakt und Warenkorb sichtbar bleiben. */
    .menu { gap: 20px; }
    .menu .menu-text { display: none; }
    .menu-icon { display: inline-block; }
    footer.site-footer .wrap { justify-content: center; text-align: center; }
}