/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.11
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

.pasa-btn {
    display: inline-block;
    padding: 5px;
    border: 2px solid #1A3476;
    background: transparent;
    color: #1A3476;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4em;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

.pasa-btn a {
    border-radius: 0px;
    background: linear-gradient(311.31deg, #1A3476 45.18%, #1F3879 54.07%, #FFFFFF 116.91%);
    color: #FFFFFF;
}

/* Solid navy button — homepage primary CTAs (Become a Member, Learn More, View All) */
.pasa-btn-solid {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #1A3476;
    background: linear-gradient(311.31deg, #1A3476 45.18%, #1F3879 54.07%, #1A3476 116.91%);
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4em;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

/* Outline button for use on photo/dark backgrounds — white border/text */
.pasa-btn-outline-light {
    display: inline-block;
    padding: 12px 28px;
    border: 2px solid #FFFFFF;
    background: transparent;
    color: #FFFFFF;
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4em;
    letter-spacing: 0;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
}

/* Gravity Forms submit buttons — same two-layer treatment as the Loop
   Grid "Load More" button (outer = white bg/navy border/navy text,
   inner = the gradient/white-text layer), matching .pasa-btn's own
   structure. Targets the .gform_button class rather than a specific
   #gform_submit_button_N id: the Home page's newsletter form is
   gform_2, not gform_1, so an id-only rule wouldn't match it. Class-
   based also means any other Gravity Form added to the site picks up
   the same styling automatically.
   Gravity Forms renders this as a plain <button>SUBMIT</button> with
   no inner span to style separately (unlike Elementor's button
   widget) — the inline script below (functions.php) wraps the
   button's own text in a `.gform-button-text` span once on page load
   so the same two-layer CSS pattern can target it. */
.gform_button {
    display: inline-block !important;
    padding: 5px !important;
    border: 2px solid #1A3476 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    color: #1A3476 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4em !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.gform_button .gform-button-text {
    display: flow;
    border-radius: 0px;
    background: linear-gradient(311.31deg, #1A3476 45.18%, #1F3879 54.07%, #FFFFFF 116.91%);
    color: #FFFFFF;
    padding: 5px 20px;
}

/* Loop Grid's native "Load More" button (News/Resources/Archive
   Material/Copyright document grids). Chad's spec: matches .pasa-btn's
   own two-layer structure exactly (outer = white bg/navy border/navy
   text, inner = the gradient/white-text layer) but built on the real
   Elementor markup for this button
   (a.elementor-button.elementor-size-sm > .elementor-button-content-wrapper
   > span.elementor-button-text) instead of a custom wrapper+anchor.
   Scoped under .e-loop__load-more so it doesn't reskin every small
   Elementor button site-wide — only this one. */
.e-loop__load-more a.elementor-button.elementor-size-sm {
    display: inline-block !important;
    padding: 5px !important;
    border: 2px solid #1A3476 !important;
    border-radius: 0 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    color: #1A3476 !important;
    font-family: 'Poppins', sans-serif !important;
    font-weight: 400 !important;
    font-size: 16px !important;
    line-height: 1.4em !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    vertical-align: middle !important;
    cursor: pointer !important;
}

.e-loop__load-more span.elementor-button-text {
    display: inline-block;
    border-radius: 0px;
    background: linear-gradient(311.31deg, #1A3476 45.18%, #1F3879 54.07%, #FFFFFF 116.91%);
    color: #FFFFFF;
    padding: 5px 20px;
}

/* Spinner sits outside .elementor-button-text, directly against the
   button's own background — that's now white (see above), so the
   spinner needs to be navy to stay visible, not white. */
.e-loop__load-more .elementor-button svg {
    fill: #1A3476 !important;
}

/* Hover state for .pasa-btn, .pasa-btn-solid and the Gravity Forms
   submit button — replaces the earlier lift/glow/brighten treatment
   with a shimmer: each of these already has a 3-stop diagonal
   gradient (see the `background` declarations above), so widening it
   to a 200%-wide backdrop and sliding `background-position` from left
   to right on hover reads as the gradient sweeping across the button,
   using PASA's own navy palette rather than swapping in new colours.
   Text stays white throughout, same as before.
   .pasa-btn-outline-light has no gradient to shimmer (transparent
   background), so it keeps a plain solid-navy hover fill instead —
   no lift/shadow animation on it either now. */
.pasa-btn a,
.pasa-btn-solid,
.gform_button .gform-button-text,
.e-loop__load-more span.elementor-button-text {
    background-size: 200% auto !important;
    transition: background-position 0.5s ease !important;
}

.pasa-btn:hover a,
.pasa-btn:active a,
.pasa-btn-solid:hover,
.pasa-btn-solid:active,
.gform_button:hover .gform-button-text,
.gform_button:active .gform-button-text,
.e-loop__load-more a.elementor-button:hover span.elementor-button-text,
.e-loop__load-more a.elementor-button:active span.elementor-button-text {
    background-position: right center !important;
    color: #FFFFFF !important;
}

.pasa-btn-outline-light {
    transition: background 0.2s ease, color 0.2s ease;
}

.pasa-btn-outline-light:hover,
.pasa-btn-outline-light:active {
    background: #1A3476;
    color: #FFFFFF;
}

.gfield input[type="text"],
.gfield input[type="email"],
.gfield input[type="tel"],
.gfield input[type="number"],
.gfield input[type="url"],
.gfield input[type="password"] {
    border: 2px solid #1a3476 !important;
    border-radius: 0px !important;
    font-size: 16px !important;
    color: #777777 !important;
    font-weight: 400 !important;
    font-family: 'Poppins' !important;
}

.gfield textarea {
    border: 2px solid #1a3476 !important;
    border-radius: 0px !important;
    font-size: 16px !important;
    color: #777777 !important;
    font-weight: 400 !important;
    font-family: 'Poppins' !important;
}

.gform_heading {
    display: none;
}

button#country_selector_button_3 {
    border: 2px solid #1a3476 !important;
    border-radius: 0px !important;
    font-size: 16px !important;
    color: #777777 !important;
    font-weight: 400 !important;
    font-family: 'Poppins' !important;
}

b, strong {
    font-weight: 700;
}

/* Home hero carousel — reskins the Nested Carousel's Progress Bar
   pagination into a compact, centered, on-brand indicator. Not a
   swap to real per-slide dots (that's the widget's Pagination Style
   setting, only editable in the Elementor editor) — just a CSS
   restyle of the same progress-bar element. */
.elementor-pagination-type-progressbar .swiper-pagination {
    position: absolute;
    bottom: 24px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    z-index: 2;
}

.elementor-pagination-type-progressbar .swiper-pagination-progressbar-fill {
    background: #CFA24A;
    border-radius: 4px;
}

/* Superseded by the Bullets version below once Pagination Style is
   switched from Progress Bar to Bullets in the carousel widget — the
   block above simply stops matching at that point (Elementor swaps
   the wrapper class), safe to delete later, left in for now in case
   you want to switch back. */

/* Home hero carousel — outlined circle + solid dot + animated loading
   ring for the active slide, matching the reference design. Requires
   the carousel's Pagination Style set to Bullets (Elementor editor,
   Content tab) — this only styles the bullets Swiper renders once
   that's on; it can't create them from Progress Bar mode. */
@property --pasa-pagination-progress {
    syntax: '<percentage>';
    inherits: false;
    initial-value: 0%;
}

.elementor-pagination-type-bullets .swiper-pagination {
    position: absolute;
    bottom: 55px !important;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 2;
}

.elementor-pagination-type-bullets .swiper-pagination-bullet {
    position: relative;
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.7);
    opacity: 1;
    cursor: pointer;
}

.elementor-pagination-type-bullets .swiper-pagination-bullet::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #FFFFFF;
    transform: translate(-50%, -50%);
}

/* Active bullet: solid white ring, plus an animated conic-gradient
   "loading" arc timed to the carousel's autoplay speed (5s — matches
   the widget's Autoplay Speed setting; update both together if that
   ever changes). */
.elementor-pagination-type-bullets .swiper-pagination-bullet-active {
    border-color: #FFFFFF;
}

.elementor-pagination-type-bullets .swiper-pagination-bullet-active::before {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    background: conic-gradient(#FFFFFF var(--pasa-pagination-progress, 0%), transparent 0%);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    animation: pasa-pagination-loading 5s linear infinite;
}

@keyframes pasa-pagination-loading {
    from {
        --pasa-pagination-progress: 0%;
    }
    to {
        --pasa-pagination-progress: 100%;
    }
}

/* Home hero carousel crossfade: moved to the pasa-content-types
   plugin (includes/home-hero-fade.php) — it needs JS as well as CSS
   (Swiper's own completion tracking can't be satisfied by CSS alone;
   see that file's comment for why), so it doesn't fit as a
   theme-CSS-only file. See CHANGELOG.md 1.11.1 for the full story of
   why the first CSS-only attempt broke the carousel. */

/* Nav menu dropdown items (e.g. Industry Development > Programmes /
   Qualification Development) — white by default, blue fill on hover
   and on the current page, per Chad's reference mockup. #54AACB
   matches the light-blue heading colour already used on PASA's own
   live pages (e.g. "PASA — Types of Membership"), not a guessed
   colour — it's also the exact colour Chad already has set as this
   widget's own Hover background in Elementor, just left at 0%
   opacity there (`#54AACB00` in the generated CSS), which is why
   nothing showed up until now.
   !important beats Elementor's own generated widget CSS, same
   reasoning as the Gravity Forms overrides above.

   Two follow-up bugs fixed here (Chad flagged with a screenshot):
   1. The hover fill only covered the text, not the full row — the
      dropdown anchor (Elementor Pro's `ul.elementor-nav-menu--dropdown
      a` rule) has a built-in 8px transparent `border-inline-start`
      and no explicit width, so it only ever sized to its own text.
      Fixed by zeroing that border and forcing the anchor to block +
      100% width.
   2. "Qualification Development" was clipped — the dropdown
      container's width was locked to roughly the trigger link's
      width. Fixed by letting the dropdown grow to fit its widest
      item (`width: max-content`) with a sensible minimum, and
      keeping item text on one line. */
/* Selector fixed 2026-08-28: the rendered dropdown <ul> only ever
   carries `.sub-menu.elementor-nav-menu--dropdown.sm-nowrap` (SmartMenus'
   own class, added by its JS at runtime) — never
   `.elementor-nav-menu__container`, so the old selector requiring both
   classes never matched anything and this rule (including the drop
   shadow) silently did nothing. SmartMenus also sets inline
   width/min-width/max-width on this element via JS, which is why
   `!important` is still needed here. */
ul.elementor-nav-menu--dropdown {
    width: max-content !important;
    min-width: 220px !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18) !important;
}

.elementor-nav-menu--dropdown li {
    width: 100% !important;
}

.elementor-nav-menu--dropdown .elementor-sub-item,
ul.elementor-nav-menu--dropdown a {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-inline-start: 0 !important;
    white-space: nowrap !important;
    padding: 5px !important;
    text-transform: uppercase;
    background-color: #FFFFFF !important;
    color: #1A3476 !important;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.elementor-nav-menu--dropdown .elementor-sub-item:hover,
.elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active,
.elementor-nav-menu--dropdown li.current-menu-item > .elementor-sub-item,
.elementor-nav-menu--dropdown li.current_page_item > .elementor-sub-item {
    background-color: #54AACB !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 0 0 3px #FFFFFF;
}

/* Top-level parent items that only open a dropdown (About Us,
   Industry Development, Resources) render as href="#" with Elementor
   Pro's own `elementor-item-anchor` class — they don't go anywhere
   themselves, the submenu is the point. They were still showing the
   widget's own Hover text-colour setting (an ID-scoped rule in
   post-89.css: `--e-global-color-secondary`, configured directly in
   Elementor's Style panel) and the browser's default pointer cursor,
   both implying a real clickable destination that doesn't exist.
   `!important` needed — the ID-scoped Elementor rule chains 4+
   classes, more specific than this. */
.elementor-nav-menu .elementor-item-anchor {
    cursor: default !important;
}

.elementor-nav-menu .elementor-item-anchor:hover,
.elementor-nav-menu .elementor-item-anchor:focus {
    color: var( --e-global-color-primary ) !important;
}

.pasa-back-to-top {
    position: fixed;
    right: 24px;
    bottom: 24px;
    width: 48px;
    height: 48px;
    /* Elementor's kit CSS gives every <button> 15px/30px padding by
       default, at higher specificity than a single class — with
       box-sizing:border-box that 60px of horizontal padding alone was
       forcing this button wider than its own width setting, since the
       content box can't go negative. !important needed to actually win. */
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: #1A3476;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background-color 0.2s ease;
    z-index: 998;
}

.pasa-back-to-top svg,
.pasa-back-to-top svg path {
    fill: #FFFFFF !important;
}

.pasa-back-to-top svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: block;
}

.pasa-back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

button.pasa-back-to-top.is-visible {
    height: 54px !important;
    width: 54px !important;
}

.pasa-back-to-top:hover,
.pasa-back-to-top:focus-visible {
    background: #12245A;
}

@media (max-width: 767px) {
    .pasa-back-to-top {
        right: 16px;
        bottom: 16px;
        width: 42px;
        height: 42px;
    }

    .elementor-nav-menu__align-start .elementor-nav-menu--layout-vertical > ul > li > a {
        justify-content: center;
    }
}