/*
Theme Name: Chillin' Cookies
Theme URI: https://chillincookies.local
Author: Chillin' Cookies
Author URI: https://chillincookies.local
Description: A fun, family-friendly FSE block theme for Chillin' Cookies — serving ice cream, homemade cookies, paninis, and daily soup.
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: chillin-cookies
Tags: block-patterns, full-site-editing, custom-colors, custom-fonts, food-and-drink, one-column, wide-blocks
*/

/* ==========================================================================
   Chillin' Cookies — Custom Styles
   Most styling is handled via theme.json. This file fills in the gaps
   for transitions, animations, and fine-grained polish.
   ========================================================================== */

/* ---------- Eliminate Gaps Between Full-Width Sections ---------- */
body>.wp-site-blocks {
    gap: 0 !important;
}

body>.wp-site-blocks>*+* {
    margin-block-start: 0 !important;
}

.wp-site-blocks>.alignfull+.alignfull,
.wp-site-blocks>header+.alignfull,
.wp-site-blocks>.alignfull+footer {
    margin-top: 0 !important;
}

/* ---------- Global Smoothing ---------- */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---------- Sticky Header Elevation ---------- */
header .wp-block-group.alignfull {
    z-index: 1000;
    box-shadow: 0 2px 16px rgba(26, 26, 46, 0.25);
    backdrop-filter: blur(8px);
}

/* Header nav link styling */
header .wp-block-navigation a {
    color: #FFF8F0 !important;
    font-family: "Nunito", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.02em;
    transition: color 0.2s ease;
}

header .wp-block-navigation a:hover,
header .wp-block-navigation a:focus {
    color: #3CC8F4 !important;
}

/* ---------- Buttons ---------- */
.wp-block-button__link {
    transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    letter-spacing: 0.02em;
    font-size: 1rem;
}

.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 114, 182, 0.45);
}

/* Outline button variant */
.wp-block-button.is-style-outline .wp-block-button__link {
    border: 2px solid var(--wp--preset--color--bubblegum-pink);
    color: var(--wp--preset--color--bubblegum-pink);
    background: transparent;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background: var(--wp--preset--color--bubblegum-pink);
    color: #fff;
    box-shadow: 0 6px 20px rgba(244, 114, 182, 0.35);
}

/* ---------- Category Cards ---------- */
.chillin-category-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-radius: 20px !important;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(26, 26, 46, 0.07);
}

.chillin-category-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(26, 26, 46, 0.12);
}

.chillin-category-card .wp-block-image img {
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.chillin-category-card:hover .wp-block-image img {
    transform: scale(1.03);
}

/* ---------- Hero ---------- */
.chillin-hero {
    background: linear-gradient(135deg, #FFF8F0 0%, #E8F9FF 100%) !important;
    min-height: 480px;
}

.chillin-hero .wp-block-cover__background {
    display: none !important;
}


/* ---------- About Teaser Image ---------- */
.chillin-about-teaser .wp-block-image img {
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(26, 26, 46, 0.10);
}

/* ---------- Visit Us Section ---------- */
.chillin-visit-us iframe {
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(26, 26, 46, 0.10);
}

/* ---------- Footer ---------- */
footer .wp-block-social-links {
    gap: 1rem;
}

footer .wp-block-social-links a {
    transition: transform 0.2s ease;
}

footer .wp-block-social-links a:hover {
    transform: scale(1.15);
}

/* ---------- Separator Style ---------- */
.wp-block-separator.is-style-dots::before {
    color: var(--wp--preset--color--cookie-gold);
}

/* ---------- Menu Section ---------- */
.chillin-menu-item {
    border-bottom: 1px dashed var(--wp--preset--color--cookie-gold);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}

.chillin-menu-item:last-child {
    border-bottom: none;
}

/* ---------- Image placeholder fallback ---------- */
.wp-block-image img[src=""],
.wp-block-image img:not([src]) {
    background: linear-gradient(135deg, #FFF8F0 0%, #F472B6 50%, #3CC8F4 100%);
    min-height: 200px;
    border-radius: 12px;
}

/* ---------- Food Carousel Pattern ---------- */
.chillin-carousel-container {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    padding-bottom: 2rem !important;
    gap: 1.5rem !important;
    justify-content: flex-start;
}

.chillin-carousel-container::-webkit-scrollbar {
    display: none;
    /* Safari/Chrome */
}

.chillin-carousel-container .wp-block-image {
    scroll-snap-align: center;
    flex: 0 0 auto;
    width: clamp(260px, 70vw, 360px) !important;
    max-width: none !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 24px rgba(26, 26, 46, 0.08);
    border-radius: 16px;
    margin: 0 !important;
}

.chillin-carousel-container .wp-block-image:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(26, 26, 46, 0.15);
}

.chillin-carousel-container .wp-block-image img {
    border-radius: 16px !important;
    object-fit: cover !important;
    aspect-ratio: 4/3 !important;
    height: auto !important;
}

/* Carousel Control Arrow Buttons */
.cc-carousel-controls {
    display: none;
    /* Hidden on mobile/touch since they can swipe */
    justify-content: flex-end;
    gap: 1rem;
    margin-bottom: 2rem;
    padding: 0 4rem;
    /* match container padded edges */
    max-width: var(--wp--style--global--wide-size);
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 782px) {
    .cc-carousel-controls {
        display: flex;
        /* Show only on desktop */
    }
}

.cc-carousel-btn {
    appearance: none;
    border: none;
    background: #FFF8F0;
    color: #1A1A2E;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(26, 26, 46, 0.1);
    transition: all 0.2s ease;
}

.cc-carousel-btn:hover {
    background: #F472B6;
    color: #FFF8F0;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(244, 114, 182, 0.3);
}

.cc-carousel-btn svg {
    width: 24px;
    height: 24px;
}

/* ---------- Responsive ---------- */
@media (max-width: 781px) {
    .chillin-hero h1 {
        font-size: 2rem !important;
    }

    .chillin-hero p {
        font-size: 1.1rem !important;
    }

    footer .wp-block-columns {
        text-align: center;
    }

    footer .has-text-align-right {
        text-align: center !important;
    }
}