/* Armenian glyphs: Roboto (Lagom's base font) has none, so Armenian text fell back to a
   platform font that differed between elements (e.g. buttons/inputs use
   'font-family: Roboto' without a generic family -> serif fallback). Load Noto Sans
   Armenian and chain it after Roboto everywhere via the theme variable. */
/* (Noto Sans Armenian is linked from <head> by includes/hooks/bob_head_links.php, not @import-ed here) */

/* bob.am customisations (loaded by includes/head.tpl after theme.css) */

/* Checkout: the Ameriabank gateway icon is a row of 5 badges
   (card, Visa, Mastercard, Google Pay, Apple Pay) — give it more room
   than Lagom's default 70px gateway icon slot. */
#paymentGatewaysContainer .panel-check.ameria .check-icon,
#paymentGatewaysContainer .panel-check.ameriamir .check-icon {
    max-width: 250px;
}
@media (max-width: 767px) {
    #paymentGatewaysContainer .panel-check.ameria .check-icon,
    #paymentGatewaysContainer .panel-check.ameriamir .check-icon {
        max-width: 165px;
    }
}

/* Sticky header: Lagom ("Affixed navigation") only pins the navigation while
   scrolling UP and lets it scroll away on the way down. Keep it pinned in both
   directions so the logo + main menu are always reachable. The top utility bar
   (#header) is still collapsed by Lagom's own JS offset. */
.lagom-layout-top.scroll-down .sticky-navigation {
    position: fixed;
    box-shadow: var(--ui-block-overlay-shadow);
    border: transparent;
    z-index: var(--zindex-navbar-fixed);
    width: 100%;
}
@media (min-width: 992px) {
    .lagom-futuristic.lagom-layout-top.scroll-down .sticky-navigation {
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

/* Armenian font fallback (see @import at the top of this file) */
:root {
    --font-family-base: Roboto, "Noto Sans Armenian", sans-serif !important;
}

/* Currency switcher: sign before the code (navbar toggle, dropdown items, footer) */
.bob-currency-sign { margin-right: 0.2em; }

/* Accessibility: text on the "faded" primary buttons and info labels was #1062fe on #d6e4ff (3.9:1);
   a slightly darker blue gives 5.4:1 (WCAG AA) without changing the look much */
:root {
    --btn-primary-faded-color: #0b4fd1 !important;
    --btn-primary-faded-hover-color: #0b4fd1 !important;
    --label-info-color: #0b4fd1 !important;
}

/* Main menu dropdowns: Lagom floats them 16px (--spacing-2x) below the menu bar; keep them close to the item */
@media (min-width: 992px) {
    .lagom-layout-top .app-nav-menu .menu > li .dropdown-menu {
        top: calc(100% + 4px);
    }
}

/* Footer bottom bar: legal links on their own row, copyright + back-to-top below
   (copyright used to be squeezed into a narrow column next to 4 links in Armenian/Russian);
   mobile keeps the theme's own stacked layout */
@media (min-width: 992px) {
    .footer-bottom .container {
        flex-wrap: wrap;
        row-gap: 12px;
    }
    .footer-bottom .footer-nav {
        display: contents;
    }
    .footer-bottom .footer-nav > li {
        order: 1;
    }
    .footer-bottom .footer-nav > li:first-child {
        margin-left: -16px;
    }
    .footer-bottom .footer-nav > li:last-child {
        order: 3;
        margin-left: auto;
    }
    .footer-bottom .footer-copyright {
        order: 2;
        flex: 1 1 calc(100% - 64px);
    }
}

/* Mobile pricing blocks (Lagom CMS "packages" sections).
   The compare-table layout (swipe slider + feature accordions + sticky header)
   is unusable on phones: show plain plan cards one under another and
   shorten long plan descriptions. Desktop/tablet untouched. */
@media (max-width: 767px) {
    .section-content-packages .slider-nav,
    .section-content-packages .package-header-primary,
    .section-content-packages .package-background,
    .section-content-packages .section-collapse,
    .section-content-packages [data-plan-sticky] {
        display: none !important;
    }
    .section-content-packages .compare-plans .swiper-container {
        overflow: visible;
    }
    .section-content-packages .compare-plans .swiper-wrapper {
        display: flex;
        flex-direction: column;
        gap: 16px;
        width: 100% !important;
        transform: none !important;
        transition: none !important;
    }
    .section-content-packages .compare-plans .swiper-slide {
        width: 100% !important;
        margin: 0 !important;
    }
    .section-content-packages .compare-plans .package-header {
        opacity: 1 !important;
    }
    .section-content-packages .compare-plans .package-box {
        border: 1px solid var(--border-color, rgba(0,0,0,.1));
        border-radius: 12px;
        padding: 16px;
    }

    /* Shortened plan descriptions on plan card grids */
    .package-body .package-content {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        overflow: hidden;
    }
}

/* Spec list inside mobile plan cards (filled by assets/js/mobile-plans.js) */
.bob-specs { display: none; }
@media (max-width: 767px) {
    .bob-specs {
        display: block;
        list-style: none;
        margin: 12px 0 0;
        padding: 12px 0 0;
        border-top: 1px solid var(--border-color, rgba(0,0,0,.1));
    }
    .bob-specs li {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 4px 0;
        font-size: 14px;
    }
    .bob-specs li span { opacity: .75; }
    .bob-specs li strong { text-align: right; white-space: nowrap; }
}

/* Section action buttons (CMS "graphic" sections etc.) must not overflow
   the screen on phones: stack, full width, allow long text to wrap. */
@media (max-width: 767px) {
    .site-section .section-actions,
    .site-section .section-actions-buttons {
        max-width: 100%;
    }
    .site-section .section-actions-buttons {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        width: 100%;
    }
    .site-section .section-actions-buttons .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 100%;
        margin: 0 !important;
        white-space: normal;
        text-align: center;
        box-sizing: border-box;
    }
    .site-section .section-actions-buttons .btn .btn-text {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Sticky plan header: do NOT display:none it - the theme JS then hides the
   main navbar on scroll. Collapse it invisibly instead. */
@media (max-width: 767px) {
    .section-content-packages .section-header-sticky {
        visibility: hidden !important;
        height: 0 !important;
        min-height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        border: 0 !important;
        pointer-events: none !important;
    }
}

/* Narrow phones: long (Armenian/Russian) words in headings and wide link
   buttons must wrap instead of pushing past the screen edge. */
@media (max-width: 767px) {
    .site-section .section-title,
    .site-section .section-caption,
    .site-section .section-subtitle,
    .site-section .section-header h1,
    .site-section .section-header h2,
    .site-section .section-header h3 {
        overflow-wrap: anywhere;
        word-break: normal;
        hyphens: auto;
        max-width: 100%;
    }
    .site-section .section-box { max-width: 100%; }
    .site-section .btn,
    .site-section .btn .btn-text {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}
@media (max-width: 400px) {
    .site-section .section-title.h2,
    .site-section h2.section-title { font-size: 26px; line-height: 1.25; }
}

/* Banner action buttons (domain pages etc.) */
@media (max-width: 767px) {
    .banner-actions,
    .banner-actions-buttons { max-width: 100%; }
    .banner-actions-buttons { flex-wrap: wrap; }
    .banner-actions-buttons .btn,
    .banner-actions-buttons .btn .btn-text {
        white-space: normal;
        max-width: 100%;
        overflow-wrap: anywhere;
    }
}

/* Banner/hero texts: long words must wrap (the banner clips overflow). */
@media (max-width: 767px) {
    .banner-title,
    .banner-subtitle,
    .banner-caption,
    .banner-desc,
    .banner-content h1,
    .banner-content h2,
    .banner-content p {
        overflow-wrap: anywhere;
        hyphens: auto;
        max-width: 100%;
    }
}
@media (max-width: 400px) {
    .banner-title { font-size: 28px; line-height: 1.2; }
}