/* ============================================================
   Landing Heading Styles
   Reusable heading style presets for landing pages, admin,
   product pages, custom sections, and future modules.
   
   Usage: <h2 class="landing-section-title heading-style-1">
   
   These styles use CSS custom properties with fallbacks so
   they work with or without the Landing Theme variables:
     --lt-accent-start / --lt-accent-end
   ============================================================ */

/* --- Base: shared by all heading styles --- */
.landing-section-title {
    display: inline-block;
}

/* ===== Style 1 – Double Border Title ===== */
.heading-style-1 {
    padding: 0.5rem 0;
    border-top: 3px double var(--lt-accent-start, #6366f1);
    border-bottom: 3px double var(--lt-accent-start, #6366f1);
}

/* ===== Style 2 – Wave Underline Title ===== */
.heading-style-2 {
    padding-bottom: 0.5rem;
    position: relative;
}
.heading-style-2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(135deg, var(--lt-accent-start, #6366f1), var(--lt-accent-end, #8b5cf6));
    border-radius: 2px;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0,4 Q15,0 30,4 T60,4 T90,4 T120,4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8'%3E%3Cpath d='M0,4 Q15,0 30,4 T60,4 T90,4 T120,4' fill='none' stroke='black' stroke-width='2'/%3E%3C/svg%3E");
    mask-size: 120px 4px;
    -webkit-mask-size: 120px 4px;
    mask-repeat: repeat-x;
    -webkit-mask-repeat: repeat-x;
}

/* ===== Style 3 – Decorative Side Lines ===== */
.heading-style-3 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.heading-style-3::before,
.heading-style-3::after {
    content: '';
    flex: 1;
    height: 2px;
    background: linear-gradient(135deg, var(--lt-accent-start, #6366f1), var(--lt-accent-end, #8b5cf6));
}

/* ===== Style 4 – Badge / Ribbon Style ===== */
.heading-style-4 {
    padding: 0.5rem 1.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, var(--lt-accent-start, #6366f1), var(--lt-accent-end, #8b5cf6));
    color: #fff;
}

/* ===== Style 5 – Premium Section Title ===== */
.heading-style-5 {
    padding: 0.75rem 0;
    position: relative;
    text-align: center;
}
.heading-style-5::before {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: 0 auto 0.75rem;
    background: linear-gradient(135deg, var(--lt-accent-start, #6366f1), var(--lt-accent-end, #8b5cf6));
    border-radius: 2px;
}
.heading-style-5::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    margin: 0.75rem auto 0;
    background: linear-gradient(135deg, var(--lt-accent-start, #6366f1), var(--lt-accent-end, #8b5cf6));
    border-radius: 2px;
}