/*
Theme Name: Cruise Warriors
Theme URI: https://cruisewarriors.com
Author: Cruise Warriors
Author URI: https://cruisewarriors.com
Description: A custom block-based WordPress theme built for Cruise Warriors — a cruise travel resource for veterans, groups, multi-generational families, and seasoned cruisers 50 and over.
Version: 0.2.0
Tested up to: 6.5
Requires at least: 6.4
Requires PHP: 8.0
License: Proprietary
License URI:
Text Domain: cruise-warriors
Tags: full-site-editing, block-patterns, blog
*/

/* =============================================================
   Cruise Warriors — supplemental component styles
   Most theme tokens live in theme.json. This file adds:
     1. Block style variants (referenced in inc/block-styles.php)
     2. Small utility helpers used inside patterns
     3. Accessibility enhancements
     4. Small refinements theme.json can't express
   ============================================================= */


/* -------------------------------------------------------------
   1. BASE / ACCESSIBILITY
   ------------------------------------------------------------- */

/* Smooth transitions on interactive elements */
a,
button,
.wp-block-button__link {
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.15s ease-out;
}

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Accessible focus outlines */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--wp--preset--color--coral);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Balance long headings */
:where(h1, h2, h3) {
    text-wrap: balance;
}

/* Pretty-wrap paragraphs (progressive enhancement) */
:where(p) {
    text-wrap: pretty;
}

/* Skip-to-content accessibility helper */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--wp--preset--color--coral);
    color: var(--wp--preset--color--white);
    padding: 0.75rem 1.25rem;
    z-index: 10000;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    top: 0;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}


/* -------------------------------------------------------------
   2. BUTTON VARIANTS (block styles)
   ------------------------------------------------------------- */

/* Secondary button: deep teal background */
.wp-block-button.is-style-secondary .wp-block-button__link {
    background-color: var(--wp--preset--color--deep-teal);
    border-color: var(--wp--preset--color--deep-teal);
    color: var(--wp--preset--color--white);
}
.wp-block-button.is-style-secondary .wp-block-button__link:hover,
.wp-block-button.is-style-secondary .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--coral);
    border-color: var(--wp--preset--color--coral);
    color: var(--wp--preset--color--white);
}

/* Outline button: transparent with coral border */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--coral);
    color: var(--wp--preset--color--coral);
    box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--coral);
    color: var(--wp--preset--color--white);
}

/* Outline on dark background */
.wp-block-button.is-style-outline-light .wp-block-button__link {
    background-color: transparent;
    border: 2px solid var(--wp--preset--color--cream);
    color: var(--wp--preset--color--cream);
    box-shadow: none;
}
.wp-block-button.is-style-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light .wp-block-button__link:focus {
    background-color: var(--wp--preset--color--cream);
    color: var(--wp--preset--color--deep-teal);
    border-color: var(--wp--preset--color--cream);
}

/* Ghost button: just text with underline on hover */
.wp-block-button.is-style-ghost .wp-block-button__link {
    background-color: transparent;
    border-color: transparent;
    color: var(--wp--preset--color--coral);
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    box-shadow: none;
}
.wp-block-button.is-style-ghost .wp-block-button__link::after {
    content: " →";
    display: inline-block;
    transition: transform 0.2s ease-out;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover,
.wp-block-button.is-style-ghost .wp-block-button__link:focus {
    color: var(--wp--preset--color--deep-teal);
    background-color: transparent;
    border-color: transparent;
}
.wp-block-button.is-style-ghost .wp-block-button__link:hover::after {
    transform: translateX(4px);
}

/* Large button size */
.wp-block-button.is-style-large .wp-block-button__link {
    padding: 1.1rem 2.25rem;
    font-size: 1.1rem;
}


/* -------------------------------------------------------------
   3. GROUP VARIANTS (block styles on core/group)
   ------------------------------------------------------------- */

/* Card: white bg, shadow, radius, padding */
.wp-block-group.is-style-card {
    background-color: var(--wp--preset--color--white);
    border-radius: var(--wp--custom--radius--md);
    box-shadow: var(--wp--preset--shadow--md);
    padding: 2rem;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.wp-block-group.is-style-card:hover {
    box-shadow: var(--wp--preset--shadow--lg);
    transform: translateY(-4px);
}

/* Card variant — sand background for warmer feel */
.wp-block-group.is-style-card-sand {
    background-color: var(--wp--preset--color--sand-light);
    border-radius: var(--wp--custom--radius--md);
    padding: 2rem;
    box-shadow: var(--wp--preset--shadow--sm);
}

/* Callout — coral accent */
.wp-block-group.is-style-callout-coral {
    background-color: var(--wp--preset--color--coral-pale);
    border-left: 4px solid var(--wp--preset--color--coral);
    padding: 1.75rem 2rem;
    border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
}

/* Callout — teal accent */
.wp-block-group.is-style-callout-teal {
    background-color: var(--wp--preset--color--teal-light);
    border-left: 4px solid var(--wp--preset--color--teal);
    padding: 1.75rem 2rem;
    border-radius: 0 var(--wp--custom--radius--sm) var(--wp--custom--radius--sm) 0;
}

/* Bordered — subtle mist border */
.wp-block-group.is-style-bordered {
    border: 1px solid var(--wp--preset--color--mist);
    border-radius: var(--wp--custom--radius--md);
    padding: 2rem;
    background-color: var(--wp--preset--color--white);
}

/* Dark section — deep teal bg, cream text */
.wp-block-group.is-style-dark-section {
    background-color: var(--wp--preset--color--deep-teal);
    color: var(--wp--preset--color--cream);
    padding: 4rem 2rem;
    border-radius: var(--wp--custom--radius--md);
}
.wp-block-group.is-style-dark-section :is(h1, h2, h3, h4, h5, h6) {
    color: var(--wp--preset--color--cream);
}
.wp-block-group.is-style-dark-section a {
    color: var(--wp--preset--color--coral-light);
}
.wp-block-group.is-style-dark-section a:hover {
    color: var(--wp--preset--color--sand);
}


/* -------------------------------------------------------------
   4. QUOTE VARIANTS
   ------------------------------------------------------------- */

/* Testimonial — card-like with quote mark decoration */
.wp-block-quote.is-style-testimonial {
    background-color: var(--wp--preset--color--white);
    border-left: none;
    padding: 2.5rem;
    border-radius: var(--wp--custom--radius--md);
    box-shadow: var(--wp--preset--shadow--md);
    position: relative;
    font-style: normal;
}
.wp-block-quote.is-style-testimonial::before {
    content: "\201C";
    position: absolute;
    top: -0.25rem;
    left: 1rem;
    font-family: "Fraunces", Georgia, serif;
    font-size: 5rem;
    line-height: 1;
    color: var(--wp--preset--color--coral);
    font-weight: 700;
}
.wp-block-quote.is-style-testimonial p {
    font-family: "Fraunces", Georgia, serif;
    font-size: 1.25rem;
    line-height: 1.5;
    font-style: italic;
    margin-top: 1.5rem;
}
.wp-block-quote.is-style-testimonial cite {
    display: block;
    margin-top: 1rem;
    font-family: "Inter", sans-serif;
    font-size: 0.95rem;
    font-style: normal;
    font-weight: 600;
    color: var(--wp--preset--color--slate);
}

/* Large pull quote */
.wp-block-pullquote.is-style-large-pull {
    font-size: 2.25rem;
    padding: 2.5rem 1rem;
}


/* -------------------------------------------------------------
   5. IMAGE VARIANTS
   ------------------------------------------------------------- */

.wp-block-image.is-style-rounded-lg img {
    border-radius: var(--wp--custom--radius--lg);
}

.wp-block-image.is-style-shadow img {
    box-shadow: var(--wp--preset--shadow--lg);
    border-radius: var(--wp--custom--radius--md);
}

.wp-block-image.is-style-polaroid img {
    padding: 0.75rem 0.75rem 3rem 0.75rem;
    background-color: var(--wp--preset--color--white);
    box-shadow: var(--wp--preset--shadow--md);
    border-radius: 2px;
}


/* -------------------------------------------------------------
   6. SEPARATOR VARIANTS
   ------------------------------------------------------------- */

.wp-block-separator.is-style-coral-short {
    border: none;
    background-color: var(--wp--preset--color--coral);
    height: 4px;
    width: 60px;
    margin-left: 0;
    margin-right: auto;
    border-radius: 2px;
    opacity: 1;
}

.wp-block-separator.is-style-coral-short.has-text-align-center,
.aligncenter > .wp-block-separator.is-style-coral-short {
    margin-left: auto;
    margin-right: auto;
}

.wp-block-separator.is-style-dots {
    border: none;
    background-image: radial-gradient(circle, var(--wp--preset--color--slate-light) 1.5px, transparent 1.5px);
    background-size: 12px 12px;
    background-repeat: repeat-x;
    background-position: center;
    height: 12px;
    max-width: 200px;
    margin-left: auto;
    margin-right: auto;
}


/* -------------------------------------------------------------
   7. UTILITY HELPERS (used inside patterns)
   ------------------------------------------------------------- */

/* Small uppercase label — "eyebrow" text */
.cw-eyebrow {
    font-family: "Inter", sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--wp--preset--color--coral);
    margin-bottom: 0.5rem;
}

/* Stat number — large display */
.cw-stat-number {
    font-family: "Fraunces", Georgia, serif;
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--wp--preset--color--coral);
}

/* Stat label */
.cw-stat-label {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--wp--preset--color--slate);
    margin-top: 0.5rem;
    letter-spacing: 0.02em;
}

/* Tagline italic */
.cw-tagline {
    font-family: "Fraunces", Georgia, serif;
    font-style: italic;
    color: var(--wp--preset--color--slate);
    font-size: 1.15rem;
}


/* -------------------------------------------------------------
   8. HEADER & NAVIGATION REFINEMENTS
   ------------------------------------------------------------- */

/* Header sticky shadow when scrolled (optional — subtle) */
.wp-site-blocks > header {
    position: relative;
    z-index: 100;
}

/* Navigation hover underline animation */
.wp-block-navigation .wp-block-navigation-item__content {
    position: relative;
}
.wp-block-navigation .wp-block-navigation-item__content::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    background-color: var(--wp--preset--color--coral);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
    transform: scaleX(1);
}


/* -------------------------------------------------------------
   9. FORM ELEMENT POLISH
   (Applies to native forms and Fluent Forms once installed)
   ------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
textarea,
select {
    border: 1px solid var(--wp--preset--color--mist);
    border-radius: var(--wp--custom--radius--sm);
    padding: 0.75rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--ink);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
    max-width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    border-color: var(--wp--preset--color--coral);
    box-shadow: 0 0 0 3px rgba(232, 93, 74, 0.15);
    outline: none;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.4rem;
    font-size: 0.95rem;
    color: var(--wp--preset--color--ink);
}


/* -------------------------------------------------------------
   10. TABLE REFINEMENTS
   ------------------------------------------------------------- */

.wp-block-table table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--wp--preset--color--mist);
    border-radius: var(--wp--custom--radius--sm);
    overflow: hidden;
}
.wp-block-table th {
    background-color: var(--wp--preset--color--teal-light);
    font-weight: 600;
    text-align: left;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wp--preset--color--mist);
}
.wp-block-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--wp--preset--color--mist);
}
.wp-block-table tr:last-child td {
    border-bottom: none;
}


/* -------------------------------------------------------------
   11. RESPONSIVE REFINEMENTS
   ------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Tighter padding on cards for mobile */
    .wp-block-group.is-style-card,
    .wp-block-group.is-style-card-sand,
    .wp-block-group.is-style-bordered {
        padding: 1.5rem;
    }

    .wp-block-group.is-style-dark-section {
        padding: 2.5rem 1.5rem;
    }

    /* Testimonial adjustments */
    .wp-block-quote.is-style-testimonial {
        padding: 2rem 1.5rem;
    }
    .wp-block-quote.is-style-testimonial::before {
        font-size: 3.5rem;
    }
    .wp-block-quote.is-style-testimonial p {
        font-size: 1.1rem;
    }

    /* Stat number smaller on mobile */
    .cw-stat-number {
        font-size: 2.5rem;
    }
}