/* =============================================================
   One By MSN . Theme stylesheet
   Custom CSS that supplements the Tailwind utilities loaded on
   the front-end. Only put rules here that Tailwind cannot express
   inline (animations, font-faces, popup specifics, FAQ open state).
   ============================================================= */

/* ---------- Fonts (mirror App.css from React project) ---------- */
@font-face {
    font-family: 'AlbertSans-ExtraBold';
    src: url('../fonts/AlbertSans-ExtraBold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'AlbertSans-Bold';
    src: url('../fonts/AlbertSans-Bold.ttf') format('truetype');
    font-display: swap;
}

@font-face {
    font-family: 'AlbertSans-Light';
    src: url('../fonts/AlbertSans-Light.ttf') format('truetype');
    font-display: swap;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'AlbertSans-ExtraBold', 'Abhaya Libre', serif;
}

button {
    font-family: 'AlbertSans-Bold', sans-serif !important;
}

p {
    font-family: 'AlbertSans-Light', sans-serif;
}

h1, h2 {
    text-transform: uppercase;
    font-family: "Abhaya Libre", serif;
}

.head {
    text-transform: capitalize !important;
    font-family: "Abhaya Libre", serif;
}

/* ---------- Loader / Star alignments ---------- */
.star, .loader-wrapper {
    display: flex;
    justify-content: flex-start !important;
}

@media (max-width: 768px) {
    .loader-wrapper {
        display: flex;
        justify-content: center !important;
        align-items: center !important;
    }
}

/* ---------- Background zoom animation (matches React .animate-slowZoom) ---------- */
@keyframes slowZoom {
    0%   { transform: scale(1.1); }
    100% { transform: scale(1.18); }
}

.animate-slowZoom {
    animation: slowZoom 18s ease-in-out infinite alternate;
}

/* ---------- Hero zoom (kept in case used by hero overlay) ---------- */
@keyframes heroZoom {
    0%   { transform: scale(1); }
    100% { transform: scale(1.15); }
}

/* ---------- Fade-in (popup, timeline) ---------- */
@keyframes fadeIn {
    0%   { opacity: 0; transform: translateY(10px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fadeIn {
    animation: fadeIn 0.4s ease-out;
}

/* ---------- Hero overlay reveal-on-scroll ---------- */
.obm-hero[data-obm-hero][data-obm-overlay-visible="1"] .obm-hero-overlay {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
}

/* On mobile the overlay should always be visible (matches React behaviour) */
@media (max-width: 767px) {
    .obm-hero-overlay {
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
    }
}

/* ---------- Timeline scroll animations (replaces framer-motion) ---------- */
.obm-timeline-item {
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.obm-timeline-item[data-obm-direction="left"] {
    transform: translateX(-80px);
}

.obm-timeline-item[data-obm-direction="right"] {
    transform: translateX(80px);
}

.obm-timeline-item.obm-in-view {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

/* ---------- FAQ accordion ---------- */
[data-obm-faq-answer] {
    max-height: 0;
}

[data-obm-faq-item][data-obm-faq-open="true"] [data-obm-faq-answer] {
    max-height: 500px;
}

/* ---------- Popup form fields ---------- */
.form-field {
    padding: 8px 10px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 100%;
    background-color: #fff;
    color: #333;
}

.form-field:focus {
    border-color: #dc2626;
    outline: none;
}

input::placeholder,
textarea::placeholder {
    opacity: 1;
    color: #333 !important;
}

/* ---------- Popup behaviour ---------- */
.obm-popup.hidden {
    display: none !important;
}

.obm-popup.is-open {
    display: flex !important;
}

body.obm-popup-open {
    overflow: hidden;
}

/* ---------- Line clamp util used in original Pop.css ---------- */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---------- Mobile popup scroll (matches React behaviour) ---------- */
@media (max-width: 600px) {
    .obm-popup {
        overflow-y: auto;
    }
    .obm-popup-box {
        max-height: 90vh;
        overflow-y: auto;
    }
}

/* ---------- Form submission state ---------- */
.obm-form-submitting [data-obm-submit],
.obm-form-submitting [data-obm-step-next],
.obm-form-submitting [data-obm-otp-verify] {
    opacity: 0.6;
    pointer-events: none;
}

.obm-form-message-success {
    color: #15803d;
}

.obm-form-message-error {
    color: #b91c1c;
}

/* ---------- Reset button styling ---------- */
.obm-cta-button {
    border: 0;
    cursor: pointer;
    font-family: 'AlbertSans-Bold', sans-serif;
}

/* ==================================================================
   Elementor compatibility (added in v1.2.0)
   ================================================================== */

/* Canvas template — strip everything */
body.elementor-template-canvas { margin:0; padding:0; }
body.elementor-template-canvas .site-header,
body.elementor-template-canvas .site-footer { display:none !important; }

/* Full-width template — let Elementor sections run edge-to-edge */
.obm-elementor-full-width { width:100%; max-width:none; margin:0; padding:0; }
.page-template-elementor-full-width .site-main,
.page-template-elementor-full-width .site-content { max-width:none; padding:0; }

/* Section widget wrapper */
.obm-elementor-section { width:100%; }
.obm-elementor-section > section { width:100%; }

/* Don't let theme heading resets bleed into Elementor widgets */
.elementor-widget-container h1,
.elementor-widget-container h2,
.elementor-widget-container h3,
.elementor-widget-container h4,
.elementor-widget-container h5,
.elementor-widget-container h6,
.elementor-widget-container p { margin:0; }