/* Panna Wild Tours site-specific frontend styling. Generic layout/navigation/image behavior is in the base theme. */

.pwt-single-wrap .pwt-contact-card {
    border-top-color: #c9a227;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: clamp(20px, 4vw, 30px);
}

/* Fix vertical alignment for "Chat on WhatsApp" button */
.pwt-single-wrap .pwt-contact-card p {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pwt-single-wrap .pwt-contact-list a {
    font-weight: 600;
}

.pwt-booking-form .pwt-form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(0.5rem, 2vw, 0.75rem);
    align-items: center;
}

@media (min-width: 860px) {
    .pwt-single-wrap .pwt-contact-card {
        box-shadow: 0 18px 40px rgba(18, 53, 36, 0.10);
    }
}

.pwt-single-wrap .pwt-contact-card {
    transition: box-shadow 0.3s ease;
}

/* Optional two-column dropdown for wide submenus (e.g. Experiences with 8 children).
   In WP Admin > Appearance > Menus, add the CSS class "menu-mega" to the parent item.
   Display is still toggled by the base theme's hover/focus-within rules. */
@media (min-width: 1024px) {
    .site-header .primary-menu > li.menu-mega > .sub-menu {
        grid-template-columns: repeat(2, minmax(180px, 220px));
        width: max-content;
    }
}


/* Site-specific layout guardrails. Keep plugin content aligned with the base theme reading column. */
.pwt-site,
.pwt-single-wrap {
    width: min(100%, var(--wt-content-width, 1440px));
    max-width: min(var(--wt-content-width, 1440px), 100%);
    margin-inline: auto;
}

.pwt-single-wrap {
    padding-inline: 0;
}

.pwt-booking-form .pwt-form-message {
    min-height: clamp(1.5rem, 3vw, 2rem);
}

.pwt-booking-form [aria-invalid="true"] {
    border-color: #b42318;
}

.pwt-booking-form .pwt-form-message.is-error {
    color: #b42318;
}

.pwt-booking-form .pwt-form-message.is-success {
    color: var(--wt-color-primary-dark, #1f4e2c);
}

@media (max-width: 720px) {
    .pwt-site,
    .pwt-single-wrap {
        width: min(100%, calc(100% - 2rem));
    }
}

@media (max-width: 480px) {
    .pwt-site,
    .pwt-single-wrap {
        padding: 0 1rem;
    }
}