/* ==========================================================================
   Header appointment button.

   Mirrors the reference header: an outlined secondary action sitting to the
   left of a solid primary action, in the site's own navy.

   The theme renders ONE menu markup for both breakpoints — on desktop
   .ova_nav is the horizontal bar, on mobile it becomes the off-canvas panel —
   so each placement is explicitly shown/hidden per breakpoint.

   Every rule is scoped to classes this plugin adds (.ipb-header-tuned,
   .ipb-header-row, .ipb-header-nav, .ipb-header-actions). Removing the plugin
   removes the classes and the header returns to exactly what it was.
   Elementor data is never written.
   ========================================================================== */

.ipb-hcta {
    --ipb-hcta-navy: #0a3d62;
    --ipb-hcta-navy-dark: #072c48;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--ipb-hcta-navy) !important;
    border: 2px solid var(--ipb-hcta-navy);
    border-radius: 0;
    padding: 9px 17px 10px;
    font-family: Cabin, "Libre Franklin", sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .2px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .06s ease;
}

.ipb-hcta:hover,
.ipb-hcta:focus { background: var(--ipb-hcta-navy); color: #fff !important; }
.ipb-hcta:active { transform: translateY(1px); }
.ipb-hcta:focus-visible { outline: 3px solid rgba(10, 61, 98, .35); outline-offset: 2px; }
.ipb-hcta svg { width: 17px; height: 17px; flex: none; }
.ipb-hcta[aria-current="page"] { background: var(--ipb-hcta-navy); color: #fff !important; }

.ipb-hcta-wrap { display: inline-flex; align-items: center; }

/* ==========================================================================
   Visibility by width. The site hides its own actions column below 1201px
   (class .hide_menu_1200) while the theme's hamburger only appears at 1024px,
   so between 1025 and 1200 the header has no actions area at all. Each
   placement therefore owns a distinct band:

     >= 1201    desktop pair inside the actions column
     1025-1200  compact button at the end of the nav row
     <= 1024    compact button beside the hamburger + block in the off-canvas
   ========================================================================== */

/* The off-canvas block belongs to the hamburger breakpoint only. */
@media (min-width: 1025px) { .ipb-hcta-panel { display: none !important; } }

/* The desktop pair lives in the column the site hides below 1201. */
@media (max-width: 1200px) { .ipb-hcta-wrap { display: none !important; } }

/* The compact button covers everything below that. */
@media (min-width: 1201px) { .ipb-hcta--bar { display: none !important; } }

/* ----------------------------------------------------------- desktop ---- */

@media (min-width: 1025px) {
    /* Three fixed-percentage columns cannot hold search plus two buttons;
       let the row size to its content instead. */
    .ipb-header-row > .elementor-container {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 20px;
    }

    /* The logo sits in a 33% column, so it grows with the viewport and squeezes
       the menu until the first item slides under the logotype. Capping it to
       the artwork's own width keeps the three groups evenly spaced at every
       screen size. */
    .ipb-header-row > .elementor-container > .elementor-column:first-child {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: 230px;
    }

    .ipb-header-row .ipb-header-nav { flex: 1 1 auto !important; width: auto !important; min-width: 0; }
    .ipb-header-row .ipb-header-actions { flex: 0 0 auto !important; width: auto !important; }

    .ipb-header-actions .elementor-widget-wrap {
        flex-wrap: nowrap !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 10px;
    }

    /* Guaranteed separation between logo, nav and actions. The theme's menu is
       not a flex container by default, so flex-end alone did nothing and the
       first nav item sat hard against the logo. */
    .ipb-header-row > .elementor-container { gap: 30px; }

    /* The theme's menu is not a flex container by default, so flex-end did
       nothing and the items packed left against the logo. */
    .ipb-header-nav .ova_menu_clasic ul.menu {
        display: flex !important;
        align-items: center;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        margin: 0;
        padding: 0;
    }
    .ipb-header-nav .ova_menu_clasic ul.menu > li { display: block; }

    /* Submenus open leftward from their item; for the last few that runs past
       the right edge of the window and gives the whole site a horizontal
       scrollbar. Anchor those to the right instead. */
    .ipb-header-nav .ova_menu_clasic ul.menu > li:nth-last-child(-n+3) > ul.dropdown-menu {
        left: auto !important;
        right: 0 !important;
    }

    /* The existing button becomes the solid primary of the pair. */
    .ipb-header-tuned .elementor-widget-button:not(.ipb-hcta-widget) .elementor-button {
        background-color: #0a3d62 !important;
        color: #fff !important;
        border: 2px solid #0a3d62 !important;
        font-size: 16px !important;
        padding: 9px 17px 10px !important;
        white-space: nowrap;
        transition: background-color .18s ease, border-color .18s ease;
    }
    .ipb-header-tuned .elementor-widget-button:not(.ipb-hcta-widget) .elementor-button:hover {
        background-color: #072c48 !important;
        border-color: #072c48 !important;
        color: #fff !important;
    }

    .ipb-header-tuned .ova_menu_clasic ul.menu > li { white-space: nowrap; }
    .ipb-header-tuned .ova_menu_clasic ul.menu > li > a {
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 18px !important;
        white-space: nowrap;
    }

    .ipb-header-tuned .elementor-widget-button:not(.ipb-hcta-widget) .elementor-button,
    .ipb-hcta {
        font-size: 16px !important;
        padding: 9px 14px 10px !important;
    }
}

/* The theme pins the header row to a hard width:1270px, so a wider monitor
   gives the nav no extra room — it just adds empty margin either side. Letting
   the row use some of that is what makes 18px labels possible at all. The row
   is deliberately a little wider than the page content below it. */
@media (min-width: 1521px) {
    .elementor .ipb-header-row > .elementor-container.elementor-column-gap-default {
        max-width: 1480px !important;
        width: 1480px !important;
    }
}

/* Below 1201 the row loses the actions column but keeps the full menu in a
   narrower container, so the labels have to step down or they slide under the
   logo. Measured: 27px clear at 1030, 91px at 1100. */
@media (min-width: 1025px) and (max-width: 1200px) {
    .ipb-header-tuned .ova_menu_clasic ul.menu > li > a {
        font-size: 15px !important;
        padding-left: 6px !important;
        padding-right: 6px !important;
    }
}

/* Seven nav items plus search plus two buttons only fit above ~1520 — and the
   nav column shrinks as the actions column grows, so below that the menu
   spills left over the logo. Until then only the appointment button shows;
   the apostille flow is also linked in the nav. Measured against the Spanish
   machine translation, whose labels are the longest the header ever carries. */
@media (min-width: 1201px) and (max-width: 1520px) {
    .ipb-header-tuned .elementor-widget-button:not(.ipb-hcta-widget) { display: none !important; }
}

/* ------------------------------------ 1025-1200: no actions column ------ */

@media (min-width: 1025px) and (max-width: 1200px) {
    .ipb-hcta--bar {
        display: inline-flex !important;
        order: 2;
        flex: 0 0 auto;
        margin-left: 14px;
        font-size: 15px;
        padding: 8px 14px 9px;
    }
    .ipb-header-tuned .ova_wrap_nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    .ipb-header-tuned .ova_nav { order: 1; flex: 0 1 auto; }
}

/* ------------------------------------------------ tablet and mobile ---- */

@media (max-width: 1024px) {
    /* The theme stacks the toggle in a block wrapper; make it a row so the
       appointment button sits beside the hamburger instead of above it. */
    .ipb-header-tuned .ova_wrap_nav {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 10px;
        width: 100% !important;
    }
    .ipb-header-tuned .ova_openNav { flex: 0 0 auto; }
    .ipb-hcta--bar { margin: 0 !important; flex: 0 0 auto; order: 0; }
}

.ipb-hcta--bar { font-size: 14px; padding: 8px 13px 9px; gap: 6px; }
.ipb-hcta--bar svg { width: 15px; height: 15px; }

/* Room runs out first on phones: keep the icon, drop the words. */
@media (max-width: 460px) {
    .ipb-hcta--bar .ipb-hcta-text { display: none; }
    .ipb-hcta--bar { padding: 9px 11px; }
    .ipb-hcta--bar svg { width: 18px; height: 18px; }
}

/* Full-width block pinned to the top of the off-canvas menu. */
.ipb-hcta-panel {
    display: block;
    padding: 18px 22px 16px;
    border-bottom: 1px solid rgba(10, 61, 98, .14);
    margin-bottom: 6px;
}

.ipb-hcta-panel .ipb-hcta {
    display: flex;
    width: 100%;
    justify-content: center;
    background: #0a3d62;
    color: #fff !important;
    font-size: 16px;
    padding: 13px 16px;
}
.ipb-hcta-panel .ipb-hcta:hover { background: #072c48; }

.ipb-hcta-panel .ipb-hcta-note {
    display: block;
    margin-top: 9px;
    text-align: center;
    font-family: "Libre Franklin", sans-serif;
    font-size: 12.5px;
    line-height: 1.5;
    color: #5a6472;
}

@media print { .ipb-hcta, .ipb-hcta-panel { display: none !important; } }