/* Recikeep - AirPods Edition Styles */

:root {
    --color-bg: #FFFFFF;
    --color-text: #1d1d1f;
    --color-text-gray: #86868b;
    --color-bg-alt: #F5F5F7;
    --color-accent: #000000;
    /* Stark black for primary actions */

    --font-stack: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --container-width: 980px;
    --header-height: 60px;
}

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

img {
    height: auto;
    max-width: 100%;
}


body {
    font-family: var(--font-stack);
    font-display: swap;
    background-color: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    line-height: 1.1;
    overflow-x: hidden;
}

/* Typography - Massive Scale */
h1 {
    font-size: 96px;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    margin-bottom: 24px;
}

h2 {
    font-size: 64px;
    font-weight: 600;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}

h3 {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 12px;
}

p {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 400;
    color: var(--color-text-gray);
    max-width: 700px;
    margin: 0 auto 40px;
}

p.lead {
    font-size: 32px;
    font-weight: 500;
    color: #1d1d1f;
}

/* Utils */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
}

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

.text-left {
    text-align: left;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 18px 36px;
    background-color: #0071e3;
    /* Classic Apple Blue Link Color or Black */
    background-color: #000;
    color: #fff;
    border-radius: 980px;
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.btn:hover {
    transform: scale(1.05);
    /* Gentle subtle grow */
}

/* Header - Apple Product Nav (Local Nav) */
header {
    position: sticky;
    top: 0;
    width: 100%;
    height: 52px;
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
    z-index: 9999;
    display: flex;
    justify-content: center;
}

header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    margin: 0;
    /* Container handles width */
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 21px;
    /* Slightly larger brand name */
    color: #1d1d1f;
    text-decoration: none;
    letter-spacing: -0.01em;
}

.nav-brand img {
    height: 28px;
    /* Slightly smaller icon for balance */
    width: 28px;
    border-radius: 6px;
}

.nav-cta {
    background: #0071e3;
    /* Apple Blue for small action */
    color: #fff;
    padding: 4px 12px;
    border-radius: 98px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: none;
    min-width: 24px;
}

/* Sections */
section {
    padding: 120px 0;
}

/* Hero */
/* Hero */
.hero {
    padding-top: 200px;
    padding-bottom: 120px;
    text-align: center;
    position: relative;
    overflow: hidden;
    background-color: #f5f5f7;
}

/* Background Layer */
.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    animation: hero-zoom 30s infinite alternate ease-in-out;
    transform-origin: center center;
}

/* Gradient overlay for readability */
.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.4) 40%, rgba(255, 255, 255, 0.95) 100%);
    pointer-events: none;
    z-index: 1;
}

.hero .container {
    position: relative;
    z-index: 2;
}

.hero h1 {
    /* Dark text on light BG */
    background: linear-gradient(135deg, #1d1d1f 0%, #434344 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    /* Add subtle shadow for pop if bg is busy */
    filter: drop-shadow(0 20px 40px rgba(255, 255, 255, 0.8));
    /* Fix for descenders being cut off with background-clip */
    padding-bottom: 0.1em;
    margin-bottom: 0.2em;
}

.hero-image {
    margin-top: 80px;
}

.hero-image img {
    max-width: 380px;
    width: 100%;
    border-radius: 54px;
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.25);
    transform: rotate(-3deg);
    animation: float 6s ease-in-out infinite;
}

/* Keyframes */
@keyframes hero-zoom {
    0% {
        transform: scale(1.0);
    }

    100% {
        transform: scale(1.15);
    }
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0) rotate(-3deg);
    }

    50% {
        transform: translateY(-15px) rotate(-3deg);
    }
}

/* Dark Mode Section (Stark Contrast) */
.section-dark {
    background-color: #000;
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 160px 0;
    position: relative;
}

.section-dark::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    /* Darken bg image */
    pointer-events: none;
}

.section-dark .container {
    position: relative;
    z-index: 2;
}

.section-dark h2 {
    color: #fff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.section-dark p {
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.section-dark .highlight-text {
    color: #fff;
}

/* Share Extension Section */
.section-share {
    background-color: #f5f5f7;
    padding: 160px 0;
}

.section-share h2 {
    color: #1d1d1f;
}

.section-share p.lead {
    color: #1d1d1f;
}

/* Bento Highlight Grid */
.grid-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    margin-top: 80px;
}

.card {
    background-color: var(--color-bg-alt);
    border-radius: 30px;
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 600px;
    /* Fixed high height for premium feel */
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.card:hover {
    transform: scale(1.02);
}

.card-content {
    margin-bottom: 40px;
}

.card-icon {
    font-size: 64px;
    margin-bottom: 24px;
    display: block;
}

.card.full-width {
    grid-column: span 2;
    flex-direction: row;
    align-items: center;
    height: auto;
    min-height: 400px;
}

.card.full-width .card-content {
    flex: 1;
    margin-bottom: 0;
}

.card.full-width .card-visual {
    flex: 1;
    display: flex;
    justify-content: center;
}

/* Tech Specs Section */
.specs-section {
    padding: 120px 0;
    background-color: #fff;
    border-top: 1px solid #d2d2d7;
}

.specs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px 40px;
    margin-top: 60px;
    text-align: left;
}

.spec-category h4 {
    font-size: 21px;
    font-weight: 600;
    margin-bottom: 24px;
    color: #1d1d1f;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 12px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid #f5f5f7;
    font-size: 14px;
}

.spec-label {
    color: #86868b;
    font-weight: 500;
}

.spec-value {
    color: #1d1d1f;
    font-weight: 600;
    text-align: right;
}

/* Nav Link */
.nav-menu {
    flex: 1;
    display: flex;
    justify-content: center;
}

.nav-link {
    font-size: 12px;
    color: #1d1d1f;
    text-decoration: none;
    margin: 0 20px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.nav-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Dark Carousel Section */
.carousel-section {
    background-color: #000;
    /* Deep dark background */
    padding: 120px 0;
    overflow: hidden;
    color: #fff;
}

.carousel-section h2 {
    color: #fff;
    margin-bottom: 60px;
}

/* Carousel Wrapper for Arrows */
.carousel-wrapper {
    position: relative;
    width: 100%;
}

/* Scroll Container */
.carousel-container {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 40px;
    padding: 0 40px 40px 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Hide scrollbar for cleaner look */
}

.carousel-container::-webkit-scrollbar {
    display: none;
}

/* Nav Buttons */
.carousel-nav-btn {
    position: absolute;
    top: calc(50% - 20px);
    /* Adjust based on card height center roughly */
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.carousel-nav-btn:hover {
    background: rgba(255, 255, 255, 0.4);
    transform: translateY(-50%) scale(1.1);
}

.carousel-nav-btn.prev {
    left: 20px;
}

.carousel-nav-btn.next {
    right: 20px;
}

/* Hide arrows on touch devices where specific hover/click precision is lower and natural swipe is preferred, 
   BUT user asked for hints. So we keep them but maybe style them less intrusively or keep as is.
   We will keep them as requested. */
@media (hover: none) and (pointer: coarse) {
    /* Optional: could make them bigger or hide if swipe is enough, but user asked for hints */
}

/* Card Item */
.carousel-card {
    flex: 0 0 400px;
    /* Fixed width */
    scroll-snap-align: center;
    display: flex;
    flex-direction: column;
    text-align: left;
}

.carousel-visual {
    width: 100%;
    height: 500px;
    background-color: #1d1d1f;
    border-radius: 30px;
    overflow: hidden;
    position: relative;
    margin-bottom: 30px;
    transition: transform 0.3s ease;
}

.carousel-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.carousel-card:hover .carousel-visual {
    transform: scale(1.02);
}

.carousel-card:hover .carousel-visual img {
    transform: scale(1.05);
}

.carousel-text h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #fff;
}

.carousel-text p {
    font-size: 17px;
    line-height: 1.4;
    color: #86868b;
    font-weight: 400;
    max-width: 100%;
    margin: 0;
}

@media (max-width: 800px) {
    .carousel-card {
        flex: 0 0 85vw;
        /* Nearly full width on mobile */
    }

    .carousel-visual {
        height: 60vh;
    }
}

@media (max-width: 800px) {
    header {
        height: auto;
        padding: 10px 0;
    }

    header .container {
        flex-wrap: wrap;
        row-gap: 15px;
    }

    .nav-brand {
        flex: 1 1 auto;
    }

    .nav-cta {
        flex: 0 0 auto;
    }

    .nav-menu {
        display: flex;
        flex: 1 1 100%;
        order: 3;
        justify-content: center;
    }

    h1 {
        font-size: 56px;
    }

    h2 {
        font-size: 40px;
    }

    .grid-container {
        grid-template-columns: 1fr;
    }

    .card.full-width {
        flex-direction: column;
        grid-column: span 1;
    }

    .card {
        height: auto;
        padding: 40px 30px;
        min-height: 400px;
    }
}

/* Legal Pages */
.legal-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 120px 40px;
}

.legal-content h1 {
    font-size: 56px;
    margin-bottom: 40px;
}

.legal-content h2 {
    font-size: 32px;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #1d1d1f;
}

.legal-content p,
.legal-content li {
    font-size: 19px;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 24px;
    max-width: 100%;
}

.legal-content ul {
    list-style-position: inside;
    margin-bottom: 24px;
}

/* Footer */
footer {
    background-color: #f5f5f7;
    padding: 40px 0;
    border-top: 1px solid #d2d2d7;
    font-size: 12px;
    color: #86868b;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
}

.footer-legal {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: left;
}

.footer-legal p {
    font-size: 12px;
    margin: 0;
    max-width: none;
    color: #515154;
}

.footer-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}

.footer-links a,
.footer-credit a {
    color: #515154;
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer-links a:hover,
.footer-credit a:hover {
    color: #1d1d1f;
    text-decoration: underline;
}

.separator {
    color: #d2d2d7;
}

@media (max-width: 800px) {
    .container {
        padding: 0 20px;
    }

    .hero {
        padding-top: 120px;
    }

    h1 {
        font-size: 48px;
        /* Smaller for mobile */
    }

    h2 {
        font-size: 36px;
    }

    p.lead {
        font-size: 20px;
        /* Readable comfortable size */
    }

    p {
        font-size: 18px;
        /* Standard readable body text */
    }

    /* Carousel Adjustment */
    .carousel-nav-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
        background: rgba(0, 0, 0, 0.5);
        /* darker bg for visibility on light/mixed images if needed, but carousel is dark bg */
        background: rgba(255, 255, 255, 0.15);
    }

    .carousel-nav-btn.prev {
        left: 10px;
    }

    .carousel-nav-btn.next {
        right: 10px;
    }

    /* Share Sheet scaling */
    .share-demo-container {
        perspective: none;
        /* Flatten for simplicity on small screens or reduce scale */
        transform: scale(0.9);
    }
}

@media (max-width: 800px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        /* Center align for mobile footer */
        text-align: center;
        gap: 30px;
    }

    .footer-legal {
        align-items: center;
        /* Center children */
        text-align: center;
    }
}

/* Share Demo Visual */
.share-demo-container {
    margin-top: 60px;
    display: flex;
    justify-content: center;
    perspective: 1000px;
}

.share-sheet {
    background: #fff;
    border-radius: 24px;
    padding: 24px;
    width: 320px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.1),
        0 0 0 1px rgba(0, 0, 0, 0.05);
    text-align: left;
    transform: rotateX(10deg) translateY(0);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: default;
}

.share-sheet:hover {
    transform: rotateX(0deg) translateY(-10px);
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(0, 0, 0, 0.05);
}

.share-header {
    border-bottom: 1px solid #f5f5f7;
    padding-bottom: 16px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.share-title {
    font-size: 13px;
    font-weight: 600;
    color: #1d1d1f;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.share-row {
    display: flex;
    gap: 20px;
    justify-content: flex-start;
    /* Align specifically to show ReciKeep first */
    overflow: hidden;
}

.share-app {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.share-app.active {
    opacity: 1;
}

.app-icon {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.app-name {
    font-size: 11px;
    font-weight: 500;
    color: #1d1d1f;
}

/* Placeholder mimics generic apps */
.share-app.placeholder .app-icon {
    background: #f5f5f7;
    box-shadow: none;
    /* Creating a fake icon look */
}

/* Make the placeholders look like skeleton loaders or generic icons */
.share-app.placeholder::before {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    background: #e5e5e7;
    border-radius: 14px;
}

.share-app.placeholder::after {
    content: '';
    display: block;
    width: 40px;
    height: 8px;
    background: #e5e5e7;
    border-radius: 4px;
    margin-top: 4px;
}
/* Zichtbaar voor screenreaders en crawlers, niet op het scherm. Gebruikt voor
   de h1 op receptpagina's, waar de titel in de hero-afbeelding is gerenderd. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Android-variant van de Smart App Banner; iOS krijgt die van Safari zelf. */
.android-app-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 12px;
    background: var(--color-bg-alt);
    border-bottom: 1px solid rgba(0, 0, 0, 0.16);
}

.android-app-banner[hidden] {
    display: none;
}

.android-app-banner__close {
    order: -1;
    border: 0;
    background: none;
    color: var(--color-text-gray);
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
}

.android-app-banner img {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

.android-app-banner__text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    font-size: 13px;
    line-height: 1.3;
}

.android-app-banner__text strong {
    font-size: 14px;
}

.android-app-banner__text span {
    color: var(--color-text-gray);
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.android-app-banner__cta {
    flex-shrink: 0;
    padding: 6px 14px;
    border-radius: 980px;
    background: var(--color-accent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.open-in-app {
    display: block;
    width: 100%;
    margin: 16px 0 8px;
    padding: 14px 20px;
    border-radius: 999px;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.open-in-app[hidden] {
    display: none;
}

/* Receptkaarten (overzichten en "Ook lekker") */
.rk-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.rk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1); }
.rk-card-head {
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    text-align: center;
}
.rk-card-head h3 { color: #fff; font-size: 19px; font-weight: 800; line-height: 1.15; margin: 0; }
.rk-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex-grow: 1; gap: 10px; }
.rk-card-body p { font-size: 14px; line-height: 1.45; color: #6e6e73; margin: 0; flex-grow: 1; }
.rk-card-reason { align-self: flex-start; font-size: 12px; font-weight: 700; color: #0071e3; background: #eef5fe; border-radius: 980px; padding: 3px 10px; }
.rk-card-meta { display: flex; gap: 12px; font-size: 13px; font-weight: 600; color: #86868b; }
.rk-card-meta span + span::before { content: "·"; margin-right: 12px; }

.rk-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 24px; }

/* Horizontale strip op mobiel: de strip scrollt, de pagina niet */
.rk-card-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 800px) {
    .rk-card-strip {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 14px;
        margin: 0 -20px;
        padding: 4px 20px 16px;
        -webkit-overflow-scrolling: touch;
    }
    .rk-card-strip > .rk-card { flex: 0 0 78%; scroll-snap-align: start; }
}

/* Chips met keuken, gang, thema's en ingrediënten */
.rk-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.rk-chip {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    background: #f5f5f7;
    border-radius: 980px;
    padding: 6px 14px;
    text-decoration: none;
}
.rk-chip:hover { background: #e8e8ed; }

/* Zoekveld in de header */
.nav-search { display: flex; align-items: center; margin-right: 12px; }
.nav-search input {
    width: 170px;
    font: inherit;
    font-size: 13px;
    padding: 5px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 980px;
    background: rgba(255, 255, 255, 0.8);
    color: #1d1d1f;
}
.nav-search input:focus { outline: 2px solid #0071e3; outline-offset: 1px; }
@media (max-width: 800px) {
    header .nav-brand { flex: 0 0 auto; }
    .nav-search { order: 2; flex: 1 1 0; margin: 0 8px; min-width: 0; }
    .nav-search input { width: 100%; }
    .nav-cta { order: 2; }
}

.ingredient-link { color: #1d1d1f; text-decoration: underline; text-decoration-color: #c7c7cc; text-underline-offset: 3px; }
.ingredient-link:hover { color: #0071e3; text-decoration-color: currentColor; }

.home-link-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 24px; background: #f5f5f7; color: #1d1d1f; text-decoration: none; text-align: left; }
.home-link-card strong { font-size: 19px; }
.home-link-card span { font-size: 15px; line-height: 1.45; color: #6e6e73; }
.home-link-card:hover { background: #e8e8ed; }