/* vinkorkad.se – Custom styles & design tokens (Ocean Sunset palette) */

:root {
    /* Ocean Sunset color palette */
    --background: 0 0% 100%;
    --foreground: 24 10% 10%;
    --card: 0 0% 100%;
    --card-foreground: 24 10% 10%;
    --popover: 0 0% 100%;
    --popover-foreground: 24 10% 10%;
    --primary: 352 82% 29%;
    --primary-foreground: 0 0% 100%;
    --secondary: 40 7% 96%;
    --secondary-foreground: 24 10% 10%;
    --muted: 40 7% 96%;
    --muted-foreground: 25 8% 32%;
    --accent: 40 7% 96%;
    --accent-foreground: 24 10% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;
    --border: 24 9% 87%;
    --input: 24 9% 83%;
    --ring: 352 82% 29%;
    --radius: 0.5rem;
    --wine-burgundy: 352 82% 29%;
    --wine-burgundy-light: 349 72% 52%;
    --wine-gold: 48 100% 61%;
    --wine-gold-light: 57 55% 72%;
    --wine-cream: 0 0% 100%;
    --wine-charcoal: 24 10% 10%;
    --wine-warm-gray: 25 8% 32%;
    --wine-rose: 346 84% 68%;
    --wine-rose-light: 336 82% 78%;
    --wine-ice-blue: 189 62% 87%;
    --wine-cta: 48 100% 61%;
    --wine-green: 128 18% 38%;
    --wine-image-bg: 40 6% 96%;
    --font-heading: Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', sans-serif;
}

* {
    border-color: hsl(var(--border));
}

body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: hsl(var(--primary));
    color: hsl(var(--primary-foreground));
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: top 0.2s ease;
}
.skip-link:focus {
    top: 1rem;
}

/* Focus ring – visible on keyboard focus */
:focus-visible {
    outline: 2px solid hsl(var(--ring));
    outline-offset: 2px;
    border-radius: 2px;
}

/* Stars component */
.stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.stars svg {
    flex-shrink: 0;
}

/* Wine image container – light gray, NOT blue */
.wine-image-bg {
    background-color: #f5f5f4;
}

/* Consistent wine card height — all cards in a grid row same height */
.grid > .card-hover,
.grid > div > .card-hover,
.grid > [data-produkt-nr] > .card-hover {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.grid > .card-hover > .p-4,
.grid > div > .card-hover > .p-4,
.grid > [data-produkt-nr] > .card-hover > .p-4,
.grid > .card-hover > div:last-child,
.grid > div > .card-hover > div:last-child,
.grid > [data-produkt-nr] > .card-hover > div:last-child {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.grid > .card-hover > div:last-child > div:last-child,
.grid > div > .card-hover > div:last-child > div:last-child,
.grid > [data-produkt-nr] > .card-hover > div:last-child > div:last-child {
    margin-top: auto;
}
/* Clamp wine names to 2 lines max */
.grid .card-hover h3 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Search page excluded — .no-heights overrides */
.no-heights .card-hover {
    height: auto !important;
}

/* Wine heart (save) button */
.wine-heart-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.9);
    border: 1px solid hsl(var(--border));
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    padding: 0;
    line-height: 1;
}
.wine-heart-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    background: rgba(255,255,255,1);
}
.wine-heart-btn:active {
    transform: scale(0.95);
}

/* Product page heart button */
.wine-heart-btn-product {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: hsl(var(--secondary));
    border: 1px solid hsl(var(--border));
    cursor: pointer;
    transition: transform 0.15s ease, background 0.15s ease;
    padding: 0;
    line-height: 1;
    flex-shrink: 0;
}
.wine-heart-btn-product:hover {
    transform: scale(1.1);
    background: hsl(var(--secondary));
}
.wine-heart-btn-product:active {
    transform: scale(0.95);
}

/* Card hover effect */
.card-hover {
    transition: box-shadow 0.2s ease-out, transform 0.15s ease-out;
    cursor: pointer;
}
.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}

/* Clickable card links */
a.card-hover,
a[class*="group"] {
    cursor: pointer;
}

/* Desktop dropdown menus */
.group .dropdown-panel {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease-out, visibility 0s 0.15s;
}
.group:hover .dropdown-panel,
.group:focus-within .dropdown-panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.1s ease-out, visibility 0s 0s;
}
.group:hover .chevron-icon {
    transform: rotate(180deg);
}
/* Invisible bridge to prevent hover gap */
.dropdown-panel::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

/* Category pill transition */
.category-pill {
    transition: background-color 0.15s ease, color 0.15s ease;
}

/* Mobile menu overlay */
.mobile-overlay-hidden {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s 0.3s;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.mobile-overlay-visible {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease, visibility 0s 0s;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Mobile menu slide from right */
.mobile-menu-closed {
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0.3s;
}
.mobile-menu-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s 0s;
}

/* Mobile nav link: 44px minimum touch target */
.mobile-nav-link {
    display: flex;
    align-items: center;
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Mobile accordion navigation */
.mobile-accordion-group {
    border-bottom: 1px solid var(--border);
}

.mobile-accordion-btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 20px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground);
    background: none;
    border: none;
    cursor: pointer;
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.15s ease;
}

.mobile-accordion-btn:hover,
.mobile-accordion-btn:active {
    background-color: var(--secondary);
}

.mobile-accordion-chevron {
    width: 18px;
    height: 18px;
    color: var(--muted-foreground);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.mobile-accordion-chevron.rotated {
    transform: rotate(180deg);
}

.mobile-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-accordion-content.expanded {
    max-height: 600px;
}

.mobile-accordion-link {
    padding: 10px 20px 10px 32px;
    font-size: 0.875rem;
    color: var(--foreground);
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
    border-left: 3px solid transparent;
}

.mobile-accordion-link:hover,
.mobile-accordion-link:active {
    background-color: var(--secondary);
    color: var(--primary);
}

.mobile-accordion-all {
    color: var(--primary);
    font-weight: 500;
    margin-top: 2px;
    margin-bottom: 6px;
    border-left-color: transparent;
}

.mobile-accordion-all:hover {
    text-decoration: underline;
}

.mobile-accordion-direct {
    padding: 8px 0;
}

.mobile-accordion-directlink {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--foreground);
    text-decoration: none;
    transition: background-color 0.15s ease;
    min-height: 48px;
}

.mobile-accordion-directlink:hover,
.mobile-accordion-directlink:active {
    background-color: var(--secondary);
}

/* Desktop nav dropdown transitions */
.desktop-nav-item {
    position: relative;
}
.desktop-nav-item::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: hsl(var(--primary));
    transition: width 0.2s ease, left 0.2s ease;
    border-radius: 1px;
}
.desktop-nav-item:hover::after {
    width: 60%;
    left: 20%;
}

/* CTA button style */
.btn-cta {
    background-color: #FFDB3A;
    color: #1a120f;
    font-weight: 600;
    transition: background-color 0.15s ease, transform 0.1s ease;
    cursor: pointer;
}
.btn-cta:hover {
    background-color: #f0d230;
    transform: translateY(-1px);
}
.btn-cta:active {
    transform: translateY(0);
}

/* Badge green accent */
.badge-green {
    background-color: #507255;
    color: #fff;
}

/* Footer styles */
.footer-dark {
    background-color: #880D1E;
    color: rgba(255,255,255,0.9);
}
.footer-dark .footer-muted {
    color: rgba(255,255,255,0.55);
}
.footer-dark .footer-link {
    color: rgba(255,255,255,0.55);
    transition: color 0.15s ease;
}
.footer-dark .footer-link:hover {
    color: rgba(255,255,255,1);
}
.footer-dark .footer-brand-dot {
    color: #F49CBB;
}
.footer-dark .footer-divider {
    border-color: rgba(255,255,255,0.15);
}

/* Animations */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in-slow {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Reduced motion: respect user preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .card-hover:hover {
        transform: none;
    }
}

/* Prose article content */
.prose h2,
.prose h3 {
    color: #880D1E;
    font-family: var(--font-heading);
    font-weight: 700;
}
.prose h2 {
    font-size: 1.25rem;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}
.prose h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.prose p {
    color: hsl(var(--foreground) / 0.9);
    line-height: 1.75;
    margin-bottom: 1rem;
}
.prose strong,
.prose b {
    font-weight: 600;
    color: hsl(var(--foreground));
}
.prose ul,
.prose ol {
    padding-left: 1.25rem;
    margin-bottom: 1rem;
}
.prose ul {
    list-style-type: disc;
}
.prose ol {
    list-style-type: decimal;
}
.prose li {
    line-height: 1.75;
    margin-bottom: 0.25rem;
}
.prose u {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Scroll margin for fixed headers */
.scroll-mt-24 {
    scroll-margin-top: 6rem;
}

/* Table of Contents pill buttons */
.toc-pill {
    min-height: 48px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Wine carousel – mobile horizontal swipe, desktop grid */
@media (max-width: 1023px) {
    .wine-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wine-carousel::-webkit-scrollbar {
        display: none;
    }
    .wine-carousel > * {
        flex: 0 0 80%;
        scroll-snap-align: start;
    }
}
@media (min-width: 1024px) {
    .wine-carousel {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
}

/* Responsive improvements */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* Section accordion for country pages */
.section-accordion-content {
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out;
}
.section-accordion-content > div {
    padding-bottom: 3rem; /* min 48px luft mot nederkanten */
}