/*
 * TravelConnect Theme — main stylesheet
 * Loaded after theme.json applies CSS custom properties.
 */

/* ---------- Global resets / typography polish ---------- */
html { scroll-behavior: smooth; }
body {
    font-family: var(--wp--preset--font-family--body, "Inter", -apple-system, sans-serif);
    color: var(--wp--preset--color--ink, #0E1A2B);
    background: var(--wp--preset--color--off-white, #F7F9FC);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--wp--preset--font-family--heading, "Poppins", sans-serif);
    color: var(--wp--preset--color--ink, #0E1A2B);
    font-weight: 700;
}
a { color: var(--wp--preset--color--primary, #007BFF); text-decoration: none; transition: color .15s; }
a:hover { color: var(--wp--preset--color--primary-dark, #0056B3); }

img { max-width: 100%; height: auto; display: block; }
figure { margin: 0; }

/* ---------- Layout helpers ---------- */
.tcp-section { padding: 60px 20px; }
@media (max-width: 768px) { .tcp-section { padding: 40px 16px; } }

/* ---------- Header / Footer polish ---------- */
.tcp-site-header { border-bottom: 1px solid #E3E8EF; position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 rgba(14,26,43,0.02); }
.tcp-site-header .wp-block-site-title a { color: var(--wp--preset--color--primary, #007BFF); text-decoration: none; }
.tcp-site-header .wp-block-navigation a { text-decoration: none; }
.tcp-site-header .wp-block-navigation a:hover { color: var(--wp--preset--color--primary, #007BFF); }

.tcp-site-footer { color: rgba(255,255,255,0.9); }
.tcp-site-footer a { color: #FFD700; }
.tcp-site-footer a:hover { color: #fff; }
.tcp-site-footer ul { list-style: none; padding-left: 0; }
.tcp-site-footer ul li { padding: 4px 0; }
.tcp-footer-sep { margin: 32px 0; opacity: 0.3; }

/* ---------- Buttons (used by hero, CTAs, etc.) ---------- */
.tcp-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 14px 28px; border-radius: 999px;
    font-weight: 600; font-size: 1rem; line-height: 1;
    text-decoration: none !important; cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s, color .15s;
    border: 2px solid transparent;
}
.tcp-btn-primary { background: #FFD700; color: #0E1A2B !important; box-shadow: 0 4px 14px rgba(255,215,0,0.35); }
.tcp-btn-primary:hover { background: #D4B400; transform: translateY(-2px); }
.tcp-btn-whatsapp { background: #25D366; color: #fff !important; box-shadow: 0 4px 14px rgba(37,211,102,0.30); }
.tcp-btn-whatsapp:hover { background: #1ebe5b; transform: translateY(-2px); color: #fff !important; }

/* ---------- Why-choose-us card hover ---------- */
.tcp-why-card {
    transition: transform .2s, box-shadow .2s;
    height: 100%;
}
.tcp-why-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0,123,255,0.10); }

/* ---------- Step cards (booking process) ---------- */
.tcp-step { height: 100%; }

/* ---------- Page hero (sub-pages) ---------- */
.tcp-page-hero {
    background: linear-gradient(135deg, #0056B3 0%, #007BFF 100%) !important;
    color: #fff;
}

/* ---------- Destination cards ---------- */
.tcp-destination-card { transition: transform .2s, box-shadow .2s; height: 100%; overflow: hidden; }
.tcp-destination-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(14,26,43,0.10); }
.tcp-destination-card img { width: 100%; height: 220px; object-fit: cover; display: block; }
.tcp-destination-img { margin: 0; }

/* ---------- Contact info card ---------- */
.tcp-contact-info a { font-weight: 600; }

/* ---------- Booking form integration (TravelConnect Pro) ---------- */
.tcp-booking-wrapper { max-width: 100% !important; margin: 0 !important; box-shadow: none !important; border: 1px solid #E3E8EF; }
.tcp-booking-form input,
.tcp-booking-form select,
.tcp-booking-form textarea { width: 100%; }
.tcp-submit-btn { width: 100%; }

/* ---------- Care card (about page) ---------- */
.tcp-care-card { text-align: center; }

/* ---------- Footer override for value cards on small screens ---------- */
@media (max-width: 600px) {
    .tcp-hero { min-height: 480px; padding: 60px 16px; }
    .tcp-hero-title { font-size: 2rem; }
    .tcp-hero-ctas { flex-direction: column; align-items: stretch; }
    .tcp-hero-ctas .tcp-btn { justify-content: center; }
    .tcp-service-card { padding: 24px 18px; }
    .tcp-testimonial-card { padding: 22px; }
    .tcp-wa-cta-buttons { flex-direction: column; align-items: stretch; }
    .tcp-wa-cta-buttons .tcp-wa-btn { justify-content: center; }
}

/* ---------- Tablet ---------- */
@media (min-width: 601px) and (max-width: 1024px) {
    .tcp-hero-title { font-size: 2.6rem; }
}

/* ---------- Selection / focus ring ---------- */
::selection { background: #FFD700; color: #0E1A2B; }
:focus-visible { outline: 3px solid #FFD700; outline-offset: 2px; border-radius: 4px; }

/* ---------- Print ---------- */
@media print {
    .tcp-site-header, .tcp-site-footer, .tcp-wa-cta, .tcp-btn { display: none !important; }
}

/* ---------- Reveal-on-scroll animation (driven by main.js) ---------- */
.tcp-reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.tcp-reveal.is-in-view { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .tcp-reveal { opacity: 1; transform: none; transition: none; }
    html { scroll-behavior: auto; }
}