/* ==========================================================================
   Armenia E-Visa Portal - Responsive / Cross-browser Stylesheet
   --------------------------------------------------------------------------
   Breakpoints:
       <= 1199px  - Large desktop / small laptop
       <= 991px   - Tablet landscape
       <= 767px   - Tablet portrait
       <= 575px   - Mobile
   ========================================================================== */

/* -------------------- Large desktop / small laptop -------------------- */
@media (max-width: 1199px) {
    .container { max-width: 980px; }

    .nationality-grid--4col { grid-template-columns: repeat(2, 1fr); }
    .nationality-grid--6col { grid-template-columns: repeat(4, 1fr); }
    .quick-actions__grid    { grid-template-columns: repeat(2, 1fr); }
    .trust-strip__grid      { grid-template-columns: repeat(2, 1fr); gap: 18px; }
    .footer-grid            { grid-template-columns: repeat(4, 1fr); gap: 24px 28px; }
    .primary-menu > li > a  { padding: 16px 12px; font-size: .88rem; }
}

/* -------------------- Tablet landscape -------------------------------- */
@media (max-width: 991px) {
    :root { --nav-h: 56px; --masthead-h: auto; }

    .container { max-width: 100%; padding-left: 24px; padding-right: 24px; }

    /* Masthead: logo + CTA stay on the SAME row at tablet widths */
    .masthead__inner    { flex-wrap: nowrap; gap: 16px; padding: 14px 22px; }
    /* Tablet: scale the whole wordmark unit down slightly so the larger
       66px "e" + 55px "Visa" don't crowd the CTA on smaller laptops. */
    .brand__wordmark      { transform: scale(.85); margin-right: -12px; }
    .brand__title         { font-size: 1.02rem; }
    .brand__subtitle      { font-size: .78rem; }

    /* Burger menu */
    .nav-toggle { display: inline-flex; margin: 0 16px; }
    .main-nav__inner { justify-content: flex-start; }

    .primary-menu {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--color-navy);
        flex-direction: column;
        align-items: stretch;
        padding: 0;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        transform: translateY(-12px);
        opacity: 0; visibility: hidden;
        transition: opacity var(--transition), transform var(--transition), visibility 0s linear var(--transition);
        box-shadow: var(--shadow-lg);
        z-index: 999;
    }
    .primary-menu.is-open {
        opacity: 1; visibility: visible; transform: translateY(0); transition-delay: 0s;
    }
    .primary-menu > li > a {
        padding: 14px 22px;
        border-bottom: 1px solid rgba(255,255,255,.08);
        border-left: 4px solid transparent;
        border-radius: 0;
        justify-content: space-between;
        font-size: .95rem;
    }
    .primary-menu > li > a:hover,
    .primary-menu > li > a.active {
        border-bottom-color: rgba(255,255,255,.08);
        border-left-color: var(--color-gold);
    }
    .primary-menu > li:last-child > a { border-bottom: 0; }

    .sub-menu {
        position: static;
        background: var(--color-navy-dark);
        box-shadow: none; border-top: 0;
        opacity: 1; visibility: visible; transform: none;
        max-height: 0; overflow: hidden; padding: 0;
        transition: max-height 300ms ease;
        border-radius: 0;
    }
    .primary-menu .has-children.is-open .sub-menu {
        max-height: 500px; padding: 4px 0 10px;
    }
    .sub-menu a { padding: 10px 38px; color: #cbd5e1; }
    .sub-menu a i { color: var(--color-gold); }
    .sub-menu a:hover { background: rgba(255,255,255,.05); color: #fff; }

    /* Sections */
    .why-grid    { grid-template-columns: 1fr; gap: 40px; }
    .why-image   { aspect-ratio: 16/10; }

    .steps-grid  { grid-template-columns: 1fr; gap: 36px; }
    .steps-grid::before { display: none; }

    .visa-grid   { grid-template-columns: 1fr; }
    .visa-type-trio { grid-template-columns: 1fr; }
    .purpose-simple { grid-template-columns: 1fr; max-width: 100%; }
    .stats__grid { grid-template-columns: repeat(2, 1fr); }
    .trust-strip__grid { grid-template-columns: repeat(2, 1fr); }
    /* Footer: 2×2 grid on tablets */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .verify-box { grid-template-columns: 1fr; text-align: center; }

    .hero-slide__inner { padding-left: 18px; border-left-width: 3px; }

    .section { padding: 60px 0; }
}

/* -------------------- Tablet portrait --------------------------------- */
@media (max-width: 767px) {
    .container { max-width: 100%; padding: 0 16px; }

    /* Masthead: keep logo + Apply button on a single row on phones */
    .masthead__inner    { flex-wrap: nowrap; padding: 10px 16px; gap: 10px; }
    .brand              { gap: 10px; min-width: 0; flex: 1 1 auto; }
    /* Phones: same trick as the reference - scale the whole wordmark unit
       from its left edge so it shrinks proportionally without breaking the
       e/Visa overlap. (Mirrors the reference's @media (max-width: 576px)
       { .logo-container { transform: scale(0.6); } } rule.) */
    .brand__wordmark      {
        transform: scale(.7);
        margin-right: -48px;
    }
    .brand__text        { min-width: 0; }
    .brand__title       {
        font-size: .92rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .brand__subtitle    {
        font-size: .7rem;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .masthead__eservices img {
        height: 44px;
        max-width: 160px;
    }

    /* ----- Compact mobile hero slider ------------------------------ */
    .hero-slider             { height: clamp(260px, 52vh, 320px); }
    .hero-slide__inner       { text-align: left; padding-left: 14px; border-left-width: 2px; max-width: 100%; }
    .hero-slide__overline    {
        font-size: .62rem; letter-spacing: 1.5px;
        margin-bottom: 5px; line-height: 1.3;
    }
    .hero-slide__overline i  { font-size: .7rem; margin-right: 4px; }
    .hero-slide__subtitle    {
        font-size: .72rem; letter-spacing: 1px;
        margin-bottom: 4px;
    }
    .hero-slide__title       {
        font-size: clamp(1.2rem, 5.4vw, 1.55rem);
        line-height: 1.2;
        margin-bottom: 7px;
    }
    .hero-slide__desc        {
        font-size: .82rem;
        line-height: 1.5;
        margin-bottom: 12px;
        max-width: 100%;
        /* clamp to 2 lines so the slider stays short on small phones */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    /* Buttons stay on the SAME row - shrink instead of wrap */
    .hero-slide__actions     {
        flex-wrap: nowrap;
        gap: 8px;
        width: 100%;
        max-width: 360px;
    }
    .hero-slide__actions .btn,
    .hero-slide__actions .btn-lg {
        flex: 1 1 0;
        padding: 8px 10px;
        font-size: .75rem;
        letter-spacing: .3px;
        white-space: nowrap;
        min-width: 0;
        justify-content: center;
    }
    .hero-slide__actions .btn i { font-size: .8rem; margin-right: 4px; }

    /* Smaller nav arrows + dots */
    .hero-slider__nav        { width: 32px; height: 32px; font-size: .8rem; }
    .hero-slider__nav--prev  { left: 8px; }
    .hero-slider__nav--next  { right: 8px; }
    .hero-slider__dots       { bottom: 8px; gap: 6px; }
    .hero-slider__dot        { width: 22px; height: 3px; }
    .hero-slider__watermark  { width: 280px; right: -110px; opacity: .04; }

    .quick-actions { margin-top: -40px; }

    .notice-ribbon__inner { flex-wrap: wrap; }
    .notice-ribbon a      { margin-left: 0; width: 100%; text-align: left; }
}

/* -------------------- Mobile ------------------------------------------ */
@media (max-width: 575px) {
    h1 { font-size: 1.22rem; }
    h2 { font-size: 1rem; }
    h3 { font-size: .88rem; }
    h4 { font-size: .8rem; }

    .page-hero--inner .page-hero__title {
        font-size: clamp(.7rem, 3.2vw, .88rem);
        line-height: 1.15;
    }
    .visa-country-page .vcp-country-intro__head h2,
    .visa-country-page .vcp-section-head h2,
    .visa-country-page .content-box > h2 {
        font-size: clamp(.68rem, 3vw, .82rem);
        line-height: 1.15;
    }
    .visa-country-page .content-box > h3,
    .visa-country-page .vcp-panel h3,
    .visa-country-page .vcp-doc-set__title,
    .visa-country-page .visa-procedure-step h3 {
        font-size: clamp(.64rem, 2.8vw, .76rem);
        line-height: 1.18;
    }
    .visa-country-page .season-card h4 {
        font-size: clamp(.62rem, 2.6vw, .72rem);
    }
    .visa-country-page .vcp-cta-banner h2 {
        font-size: clamp(.66rem, 2.9vw, .8rem);
    }

    .section__header h2,
    .visa-purpose-section__header h2,
    .nationality-section__header h2 {
        font-size: .95rem;
    }

    .content-box h2 { font-size: clamp(.82rem, 3.2vw, .92rem); }
    .content-box h3 { font-size: clamp(.74rem, 2.9vw, .84rem); }

    .evisa-update-card .update-header h2 { font-size: .72rem; }

    .nationality-grid--6col .nationality-card {
        padding: 6px 7px 6px;
    }
    .nationality-grid--6col .nationality-card__flag {
        width: 28px;
        height: 18px;
    }
    .nationality-grid--6col .nationality-card__head h3 {
        font-size: .66rem;
    }
    .nationality-grid--6col .nationality-card p {
        font-size: .62rem;
        margin-bottom: 2px;
    }
    .nationality-grid--6col .nationality-card__link {
        font-size: .6rem;
    }

    .btn-lg { padding: 12px 22px; font-size: .92rem; }

    /* Masthead: collapse CTA to icon-only and shrink the wordmark so the
       Armenian title + subtitle stay visible alongside it. The .brand__text
       column uses min-width: 0 (set at the 767px breakpoint) so the two
       Armenian lines get ellipsis-truncated rather than wrapping. */
    .brand__wordmark     {
        transform: scale(.58);
        margin-right: -65px;
    }
    .brand__title        { font-size: .82rem; }
    .brand__subtitle     { font-size: .65rem; line-height: 1.25; }
    .masthead__eservices img {
        height: 36px;
        max-width: 130px;
    }

    .quick-actions__grid    { grid-template-columns: 1fr; }
    .stats__grid            { grid-template-columns: 1fr 1fr; }
    .trust-strip__grid      { grid-template-columns: 1fr; }
    /* Footer stays as 2 link columns on phones (instead of stacking 1-by-1) */
    .footer-grid            { grid-template-columns: repeat(2, 1fr); gap: 18px 16px; }
    .footer-col h4          { font-size: .92rem; margin-bottom: 12px; padding-bottom: 8px; }
    .footer-col h4::after   { width: 32px; height: 2px; }
    .footer-links li        { margin-bottom: 7px; }
    .footer-links a         { font-size: .82rem; gap: 6px; }

    .footer-bottom__inner   { flex-direction: column; text-align: center; gap: 10px; }
    .footer-bottom__links   { justify-content: center; gap: 14px; }
    .social-links           { justify-content: center; }

    .hero-slide__overline { letter-spacing: 1.5px; }

    /* ----- Slider on small phones (<= 480px) ------------------------ */
    .hero-slider             { height: clamp(240px, 48vh, 280px); }
    .hero-slide__title       { font-size: clamp(1.1rem, 5.8vw, 1.35rem); margin-bottom: 6px; }
    .hero-slide__desc        { font-size: .78rem; margin-bottom: 10px; -webkit-line-clamp: 2; }
    .hero-slide__overline    { font-size: .58rem; margin-bottom: 4px; }
    .hero-slide__subtitle    { font-size: .68rem; margin-bottom: 3px; }
    .hero-slide__actions     { gap: 6px; max-width: 100%; }
    .hero-slide__actions .btn,
    .hero-slide__actions .btn-lg {
        padding: 7px 8px;
        font-size: .7rem;
    }
    .hero-slide__actions .btn i { margin-right: 3px; font-size: .72rem; }
    .hero-slider__nav        { width: 28px; height: 28px; font-size: .7rem; }
    .hero-slider__nav--prev  { left: 4px; }
    .hero-slider__nav--next  { right: 4px; }
    .hero-slider__watermark  { display: none; }

    /* Mobile quick-nav on small phones - tighter spacing, still 5 buttons */
    .mobile-quicknav            { gap: 2px; }
    .mobile-quicknav__item      { padding: 5px 2px; font-size: .55rem; gap: 2px; }
    .mobile-quicknav__item i    { font-size: .92rem; }
}

/* Extra-small phones (<= 360px) - hide labels, icons only */
@media (max-width: 360px) {
    .mobile-quicknav__item span { display: none; }
    .mobile-quicknav__item      { padding: 8px 4px; }
    .mobile-quicknav__item i    { font-size: 1rem; }

    /* Footer falls back to single column only on the tiniest screens */
    .footer-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* -------------------- Print ------------------------------------------- */
@media print {
    .flag-stripe, .site-header, .site-footer,
    .back-to-top, .hero-slider__nav, .hero-slider__dots,
    .nav-toggle, .mobile-quicknav, .social-links,
    .trust-strip, .notice-ribbon {
        display: none !important;
    }
    a { color: #000; text-decoration: underline; }
    body { color: #000; background: #fff; font-size: 12pt; }
}

/* -------------------- Reduced motion ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* -------------------- Dense-layout responsive overrides --------------- */
@media (max-width: 991px) {
    .row-2col,
    .row-2col--unequal,
    .welcome-policy-section .row-2col--unequal,
    .welcome-policy-section--continued .row-2col--unequal { grid-template-columns: 1fr; }
    .col-stack      { gap: 18px; }
    .welcome-policy-section .col-stack .purpose-simple { grid-template-columns: 1fr; }
    .welcome-policy-section .evisa-update-card { height: auto !important; max-height: none !important; }
    .welcome-policy-section .policy-updates-scroll-container { max-height: 360px; }
    .verify-box     { grid-template-columns: 1fr; text-align: center; }
    .verify-box__icon { margin: 0 auto; }

    .hero-slider    { height: clamp(280px, 48vh, 360px); }
    .quick-actions  { margin-top: -28px; }

    /* Mobile quick-nav: 5 icon shortcuts visible next to the hamburger -
       gives users one-tap access to Apply / Track / Verify / Fees / FAQ
       without opening the collapsed menu. */
    .main-nav__inner    {
        gap: 8px;
        padding-top: 6px;
        padding-bottom: 6px;
        flex-wrap: nowrap;
    }
    .nav-toggle         { flex-shrink: 0; }
    .mobile-quicknav    {
        display: flex;
        flex: 1 1 auto;
        gap: 4px;
        align-items: stretch;
        min-width: 0;
    }
    .mobile-quicknav__item span { display: inline; }

    /* News ticker */
    .news-ticker__label { font-size: .68rem; padding: 4px 10px; }

    /* SEO content grids */
    .nationality-grid { grid-template-columns: repeat(2, 1fr); }
    .attractions-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 600px) {
    .nationality-grid,
    .nationality-grid--6col { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .attractions-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .attraction-card  { padding: 14px 12px; }
    .attraction-card__icon { width: 46px; height: 46px; font-size: 1.05rem; }
    .attraction-card h3 { font-size: .92rem; }
    .attraction-card p  { font-size: .8rem; }
    .fees-box           { padding: 16px 18px; }
    .fees-table         { font-size: .82rem; min-width: 480px; }
    .fee-calc-layout    { grid-template-columns: 1fr; }
    .fee-result__meta   { grid-template-columns: 1fr; }
    .fee-calculator__actions { flex-direction: column; }
    .fee-calculator__actions .btn,
    .fee-calculator__actions .btn-primary { flex: none; width: 100%; }
}

@media (max-width: 767px) {
    /* Smaller headings so long titles stay on one line on phones */
    h1 { font-size: 1.45rem; line-height: 1.2; }
    h2 { font-size: 1.15rem; line-height: 1.22; }
    h3 { font-size: .98rem; line-height: 1.25; }
    h4 { font-size: .9rem; }

    .section__header h2,
    .visa-purpose-section__header h2,
    .nationality-section__header h2 {
        font-size: 1.08rem;
        line-height: 1.25;
        white-space: nowrap;
    }

    .evisa-update-card .update-header h2 {
        font-size: .78rem;
        line-height: 1.2;
        white-space: nowrap;
        flex: 1;
        min-width: 0;
    }

    /* Drop straight from 3-col to 1-col at the tablet breakpoint -
       avoids an awkward 2+1 layout when only 3 cards are present. */
    .row-3col       { grid-template-columns: 1fr; }
    .country-list,
    .country-list--3col { grid-template-columns: 1fr; }
    .eligible-countries-table td { width: 50%; font-size: .82rem; padding: 9px 10px; }
    .info-card__visual { height: 110px; font-size: 2.6rem; }
    .content-box    { padding: 18px 20px; }
    .content-box h2 { font-size: clamp(.88rem, 3.4vw, 1.05rem); }
    .content-box h3 { font-size: clamp(.8rem, 3.1vw, .92rem); line-height: 1.2; }

    .welcome-policy-section .content-box h3,
    .welcome-policy-section--continued .content-box h3 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .holidays-table { font-size: .82rem; }
    .holidays-table thead th,
    .holidays-table tbody td { padding: 7px 9px; }
    .holidays-table td:first-child { width: 90px; }

    .section        { padding: 36px 0; }
    .info-cards-section,
    .content-section { padding: 28px 0; }

    .news-ticker__inner { gap: 10px; font-size: .82rem; }

    /* Welcome h1: allow natural line breaks — do not clip long titles */
    .welcome-intro h1 {
        font-size: clamp(1.2rem, 4.5vw, 1.65rem);
        white-space: normal;
        overflow: visible;
        line-height: 1.35;
        max-width: 100%;
    }
}

@media (max-width: 575px) {
    .holidays-table thead th:last-child,
    .holidays-table tbody td:last-child { display: none; }
    .welcome-intro { padding: 28px 0 22px; }
    .welcome-intro h1 {
        font-size: clamp(1.15rem, 4.8vw, 1.4rem);
        white-space: normal;
        line-height: 1.38;
    }
    .welcome-intro p  { font-size: .9rem; }
    .visa-purpose-section { padding: 32px 0 28px; }
    .welcome-policy-section + .visa-purpose-section { padding-top: 36px; }
    .purpose-simple { grid-template-columns: 1fr; }
    .policy-updates-scroll-container { max-height: 340px; }
    .visa-duration-option { flex-direction: column; align-items: flex-start; }
    .eligible-countries-table td { width: 100%; display: block; border-right: 0; }
    .eligible-countries-table tr { display: block; margin-bottom: 0; }
    .eligible-countries-table tr[hidden] { display: none; }
    .eligible-countries-table__empty { display: none !important; }
}

/* -------------------- Cross-browser fall-backs ------------------------ */
.hero-slide, .masthead__inner, .main-nav__inner,
.quick-actions__grid, .steps-grid, .visa-grid, .why-grid, .stats__grid,
.faq-list, .footer-grid, .footer-bottom__inner, .trust-strip__grid,
.row-3col, .row-2col, .country-list,
.visa-type-trio, .purpose-simple, .footer-grid {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
.btn {
    -webkit-transition: all 220ms ease;
       -moz-transition: all 220ms ease;
         -o-transition: all 220ms ease;
            transition: all 220ms ease;
}

/* Application form */
@media (max-width: 991px) {
    .evisa-app-layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .evisa-guide {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .evisa-guide__card--accent { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .evisa-grid, .evisa-upload-grid, .evisa-docs-add { grid-template-columns: 1fr; }
    .evisa-progress__item { font-size: .62rem; min-width: 68px; }
    .info-card--form { padding: 16px 14px 18px; }
    .evisa-input-icon { left: 10px; }
    .evisa-input-wrap .form-control,
    .evisa-input-wrap select.form-control { padding-left: 38px; }
    .evisa-guide { grid-template-columns: 1fr; }
    .evisa-form-page__head,
    .info-card--form-page .vf-form { padding-left: 18px; padding-right: 18px; }
    .evisa-actions--end .btn { width: 100%; justify-content: center; }
}