/**
 * Typography System Overrides & Refinements
 * Ensures typography.css integrates with existing site.css
 */

/* Section Title Improvements */
.section-title {
    font-size: clamp(var(--text-3xl), 3vw, var(--text-4xl));
    line-height: var(--leading-snug);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    margin-bottom: 1.5rem;
}

.section-subtitle {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* Hero Typography */
.hero-title {
    font-size: clamp(var(--text-5xl), 5vw, var(--text-6xl)) !important;
    line-height: var(--leading-tight) !important;
    font-weight: var(--font-semibold) !important;
    letter-spacing: var(--tracking-tighter) !important;
}

.hero-subtitle {
    font-size: var(--text-xl);
    line-height: var(--leading-normal);
    font-weight: var(--font-regular);
    opacity: 0.95;
}

/* Cruise Card Typography Refinements */
.cruise-title {
    font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
    line-height: 1.3;
    font-weight: var(--font-semibold);
    margin-bottom: 0.75rem;
}

.cruise-description {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* Meta Line Styling */
.meta-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
}

.meta-line>span:not(:last-child)::after {
    content: "•";
    margin-left: 0.75rem;
    color: var(--text-muted);
}

/* Pricing Display */
.cruise-price {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.25rem;
    margin-bottom: 1.5rem;
}

.price-label {
    font-size: var(--text-xs);
    font-weight: var(--font-regular);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
}

.price-amount {
    font-size: var(--text-3xl);
    font-weight: var(--font-semibold);
    letter-spacing: var(--tracking-tight);
    color: var(--primary-wave-blue);
}

/* Form Section Titles */
.form-section-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--primary-wave-blue);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

.form-section-title:first-child {
    margin-top: 0;
}

/* Form Labels */
.form-label,
.booking-input+label,
label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
    text-transform: none;
    /* Sentence case */
    color: var(--text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

/* Important Information Blocks */
.details-list li strong,
.info-category {
    font-weight: var(--font-semibold);
    color: var(--text-primary);
}

.details-list li {
    line-height: var(--leading-relaxed);
    margin-bottom: 0.75rem;
}

/* Experience Description */
.experience-description p {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 72ch;
}

.experience-description h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    margin-bottom: 1rem;
    margin-top: 2rem;
}

/* Booking Summary Typography */
.booking-summary h4 {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--primary-wave-blue);
    margin-bottom: 1rem;
}

.summary-line {
    font-size: var(--text-base);
    line-height: 1.6;
}

.summary-total {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
}

.summary-gst {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    font-style: italic;
}

/* Buttons - Typography Only */
.btn {
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-normal);
}

.btn-primary {
    font-weight: var(--font-semibold);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .section-title {
        margin-bottom: 1rem;
    }

    .meta-line {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .price-amount {
        font-size: var(--text-2xl);
    }
}

/* Ensure proper text hierarchy in cards */
.cruise-card h3 {
    margin-top: 0;
}

.cruise-card p {
    margin-bottom: 1rem;
}

/* Fleet section (if exists) */
.fleet-section .eyebrow {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
    display: block;
    margin-bottom: 0.75rem;
}

.fleet-section p {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
}