/*
 Theme Name:   Velas Child
 Theme URI:    http://velas.bold-themes.com
 Description:  Velas child theme
 Author:       BoldThemes
 Author URI:   http://bold-themes.com
 Template:     velas
 Version:      1.1.5
 Tags:         one-column, right-sidebar, custom-menu, featured-images, sticky-post, theme-options, threaded-comments, translation-ready
 Text Domain:  velas-child
*/


/* Theme customization starts here
-------------------------------------------------------------- */


/* Sticky nav — pale-numerals 1890 logo is invisible on light scroll bar; swap to navy version */
.bt-sticky-header-active .sticky-logo-img,
.bt-sticky-header-active .responsive-sticky-logo-img {
    content: url("/wp-content/uploads/2026/07/kyc-logo-1890-navy.png");
}

/* Desktop sticky bar — 1890 logo fills the 70px bar edge to edge; inset it (mobile is fine) */
.bt-sticky-header-active .sticky-logo-img {
    padding: 8px 0;
    box-sizing: border-box;
}

/* History timeline — mobile: stack rows with gap, reduce image column height */
@media (max-width: 767px) {
    .kyc-timeline-img-col .bt_bb_column_content,
    .kyc-timeline-img-col .bt_bb_column_content_inner,
    .kyc-timeline-img-col .bt_bb_inner_background_image_holder {
        min-height: 280px;
    }
    .kyc-timeline-section {
        margin-bottom: 2rem;
    }
}

/* Mobile menu — narrow panel on small screens so X button stays visible */
@media (max-width: 380px) {
    :root {
        --responsive-menu-max-width: 280px !important;
    }
}

/* Founders portraits — uniform height */
.founders-section .bt_bb_image img {
    width: 180px;
    height: 180px;
    object-fit: cover;
    object-position: top center;
    border-radius: 50%;
}

/* Gallery lightbox — close button dark background */
.mfp-gallery .mfp-close {
    z-index: 1111;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 50%;
    width: 2.75rem !important;
}

/* Gallery lightbox — more visible arrows and close button */
.mfp-gallery .mfp-close:before,
.mfp-gallery button.mfp-arrow:before,
.mfp-gallery button.mfp-arrow:after {
    opacity: 0.7;
}
.mfp-gallery .mfp-close:hover:before,
.mfp-gallery button.mfp-arrow:hover:before,
.mfp-gallery button.mfp-arrow:hover:after {
    opacity: 1;
}

/* History timeline */
.kyc-timeline-section:first-of-type {
    padding-top: 4rem;
}
.kyc-timeline-section:last-of-type {
    padding-bottom: 4rem;
}
.kyc-timeline-section .bt_bb_port {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}
.kyc-timeline-row .bt_bb_row_holder {
    display: flex;
    align-items: stretch;
}
.kyc-timeline-img-col .bt_bb_column_content,
.kyc-timeline-img-col .bt_bb_column_content_inner,
.kyc-timeline-img-col .bt_bb_inner_background_image_holder {
    height: 100%;
    min-height: 400px;
}
/* Portrait images (burgees) — show full image instead of cropping */
.kyc-timeline-img-col .bt_bb_column_content_background_image {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-color: #f5f5f0;
}
/* Text column padding */
.kyc-timeline-txt-col .bt_bb_column_content_inner_inner {
    padding: 3em 3.5em;
}
.kyc-timeline-year p {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    opacity: 0.5;
    margin-bottom: 0.25em;
    font-weight: 600;
}

/* History hero — centre the harbour photo on the yachts (parallax disabled, BPB defaults to top) */
.page-id-2713 .bt_bb_section:first-of-type .bt_bb_background_image_holder {
    background-position: center center !important;
}

/* Mobile headings — the "normal" size (2.5em from the theme) makes long words
   (ESTABLISHED, RECONSTITUTED) overflow the right edge on narrow phones.
   Drop to 2em and let an over-long word break only when it can't fit. */
@media (max-width: 480px) {
    .bt_bb_size_normal.bt_bb_headline h1,
    .bt_bb_size_normal.bt_bb_headline h2,
    .bt_bb_size_normal.bt_bb_headline h3,
    .bt_bb_size_normal.bt_bb_headline h4,
    .bt_bb_size_normal.bt_bb_headline h5,
    .bt_bb_size_normal.bt_bb_headline h6 {
        font-size: 2em;
        line-height: 1.18;
        overflow-wrap: break-word;
    }
}

/* Membership — reposition background images so yachts/dock show, not sky */
.page-id-2734 .bt_bb_section:nth-of-type(1) .bt_bb_background_image_holder {
    background-position: center 65% !important;
}
.page-id-2734 .bt_bb_section:nth-of-type(4) .bt_bb_background_image_holder {
    background-position: center 70% !important;
}

/* Clubhouse hero — marina superyacht shot, keep yacht + skyline centred */
.page-id-2743 .bt_bb_section:first-of-type .bt_bb_background_image_holder {
    background-position: center center !important;
}

/* Boutique hero — pull burgee + Port Tower skyline into the band (parallax disabled, BPB defaults to top) */
.page-id-2764 .bt_bb_section:first-of-type .bt_bb_background_image_holder {
    background-position: center 25% !important;
}

/* Fix black bar between sections — overlay pseudo-element must not bleed outside the section */
[class*="bt_bb_background_overlay"] {
    overflow: hidden;
}

/* Dark overlay on all full-width image sections (BPB overlay class broken by dot in class name) */
[class*="bt_bb_background_overlay"] .bt_bb_background_image_holder_wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 1;
}
[class*="bt_bb_background_overlay"] .bt_bb_port {
    position: relative;
    z-index: 2;
}

/* Honor Roll — commodores table */
.kyc-roll-table-wrap {
    max-width: 900px;
    margin: 0 auto;
    overflow-x: auto;
}
.kyc-roll-table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}
.kyc-roll-table th {
    font-size: 0.75rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 0.9em 1.25em;
    border-bottom: 2px solid rgba(0, 0, 0, 0.35);
}
.kyc-roll-table td {
    padding: 0.65em 1.25em;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.kyc-roll-table tbody tr:hover {
    background: rgba(0, 0, 0, 0.03);
}
.kyc-roll-table .kyc-roll-year {
    font-weight: 600;
    white-space: nowrap;
}

/* Committee page — two-column table, narrower than the roll */
.kyc-committee-table-wrap {
    max-width: 700px;
}

/* Events page — date + event/description table */
.kyc-events-table-wrap {
    max-width: 820px;
}
.kyc-events-table td {
    padding: 1em 1.25em;
    vertical-align: top;
}
.kyc-events-table .kyc-roll-year {
    width: 1%;
    padding-right: 2em;
}
.kyc-events-table td strong {
    font-size: 1.05em;
    letter-spacing: 0.01em;
}
.kyc-events-table td br + * ,
.kyc-events-table td strong + br {
    line-height: 1.5;
}

/* Honor Roll — committee names list */
.kyc-roll-names {
    line-height: 2;
}
.kyc-roll-names .kyc-roll-dot {
    opacity: 0.4;
    padding: 0 0.35em;
}

/* Hero video darkening overlay */
.bt_bb_section.bt_bb_video::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    pointer-events: none;
    z-index: 1;
}
/* Footer — 1890 burgee logo above the club name (Nigel 9 July); img stays inline so it follows column align (center desktop / left mobile) */
.kyc-footer-logo img {
    max-width: 200px;
}

/* Members — clean up the /account/ sidebar. We don't use UM's public profile/directory
   feature; every /user/<slug>/ link led to an empty, unstyled profile page, linked THREE
   ways (the "View profile" text, the avatar image, the member's name). Login now redirects
   to /account/ (UM role setting), so these were the last routes in.
   - Hide the placeholder avatar entirely (we don't use profile photos — it added nothing).
   - Hide the "View profile" text.
   - Keep the member's name as plain text confirming who's logged in, but make its link inert. */
.um-account-meta-img,
.um-account-meta-img-b,
.um-account-profile-link {
    display: none !important;
}
.um-account-name a {
    pointer-events: none !important;
    cursor: default !important;
}

/* Members area — LOGIN / ACCOUNT · LOGOUT link, far right of nav (header_menu_widgets)
   and bottom of the mobile slide-out (menu_responsive_widgets); typography mirrors menu links */
.kyc-account-links {
    font-family: var(--menu-font);
    font-size: var(--menu-font-size);
    font-weight: var(--menu-first-level-font-weight);
    text-transform: var(--menu-first-level-text-transform);
    white-space: nowrap;
}
.kyc-account-links .kyc-account-link {
    text-decoration: none;
    color: inherit;
    transition: color 200ms ease;
}
.kyc-account-links .kyc-account-link:hover {
    color: var(--accent-color);
}
.kyc-account-links .kyc-account-sep {
    opacity: 0.4;
    padding: 0 0.4em;
}
/* Nudge the MEMBER LOGIN link (and logged-in account icon) left off the header's
   right edge (Nigel 17 July tweaks: "move left a little bit"). Desktop slot only —
   the mobile slide-out keeps its full-width menu rhythm. */
.site-navigation-widgets .kyc-account-links {
    margin-right: 24px;
}

/* Compact account icon + dropdown (logged-in). Keeps the nav slot narrow so
   menu items don't collide with the absolutely-positioned account widget. */
.kyc-account-menu {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.kyc-account-toggle {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}
.kyc-account-icon {
    display: block;
    transition: color 200ms ease;
}
.kyc-account-toggle:hover .kyc-account-icon,
.kyc-account-toggle:focus-visible .kyc-account-icon {
    color: var(--accent-color);
}
.kyc-account-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.5em;
    min-width: 8em;
    display: flex;
    flex-direction: column;
    background: rgb(6, 35, 72);
    padding: 0.35em 0;
    border-radius: 2px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
    z-index: 1000;
}
/* Invisible bridge filling the margin gap between icon and menu, so moving the
   cursor from icon to dropdown never crosses un-hovered space (keeps :hover alive). */
.kyc-account-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 0.5em;
}
.kyc-account-menu:hover .kyc-account-dropdown,
.kyc-account-menu:focus-within .kyc-account-dropdown,
.kyc-account-menu.is-open .kyc-account-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.kyc-account-dropdown .kyc-account-link {
    display: block;
    padding: 0.5em 1.1em;
    color: #fff;
    white-space: nowrap;
}
.kyc-account-dropdown .kyc-account-link:hover {
    color: var(--accent-color);
}

/* Tighten top-menu item spacing in the 993–1300px band. With the logged-in nav
   (NINE items since Events was added — TKYC · Membership · History · Honor Roll ·
   Clubhouse | logo | Committee · Events · Boutique · Contact — plus the centred logo
   and the account icon) the theme's default 50px gaps overflow and the account icon,
   which sits in an ABSOLUTELY-positioned .site-navigation-widgets slot at the far right,
   overlaps the last menu item (Contact). The mobile hamburger only kicks in below ~1000px,
   leaving this dead band. Two-part fix:
   1. Drop the inter-item gap to 18px (via --desktop-menu-gap on `body`, the theme's own
      mechanism — must be `body`, not `:root`, since the theme defines the var on body).
   2. Reserve ~30px of right padding on the menu list so items stop BEFORE the absolute
      account-icon slot instead of running under it.
   Verified clear (no overlap, no clipping) across 1024 / 1050 / 1090 / 1250 / 1301px,
   with clean handoff to the hamburger below and to the default 50px gap above 1300. */
@media (min-width: 993px) and (max-width: 1300px) {
    body {
        --desktop-menu-gap: 18px;
    }
    body.logged-in .main-navigation .menu-primary-menu-container {
        padding-right: 30px;
    }
}

/* Mobile slide-out menu: the compact icon+dropdown is a desktop space-saver only.
   In the vertical responsive menu there's room, and the right-anchored floating box
   looks detached/off-centre — so revert to plain stacked Account / Logout links that
   match the other menu items. Scoped to the responsive widget area only. */
.site-menu-responsive-widgets .kyc-account-toggle {
    display: none;
}
.site-menu-responsive-widgets .kyc-account-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}
.site-menu-responsive-widgets .kyc-account-dropdown::before {
    display: none;
}
/* Match the real responsive menu items: left-aligned, same 13.6px vertical padding
   (≈51px tap rows) so Account / Logout sit in the menu rhythm and aren't cramped. */
.site-menu-responsive-widgets .kyc-account-links,
.site-menu-responsive-widgets .kyc-account-menu {
    display: block;
    text-align: left;
    width: 100%;
}
.site-menu-responsive-widgets .kyc-account-dropdown .kyc-account-link {
    display: block;
    padding: 13.6px 0;
    color: inherit;
    text-align: left;
}

/* Members area — UM forms (login/account/password-reset) styled to the site */
.um .um-form input[type="submit"].um-button,
.um .um-form input[type="submit"].um-button:focus,
.um a.um-button,
.um a.um-button.um-alt {
    background: rgb(6, 35, 72);
    color: #fff;
    transition: background 200ms ease;
}
.um .um-form input[type="submit"].um-button:hover,
.um a.um-button:hover,
.um a.um-button.um-alt:hover {
    background: rgb(12, 56, 110);
}
/* Single primary button — full width now the Register button is gone */
.um-login .um-col-alt .um-left.um-half,
.um-login .um-col-alt .um-left {
    float: none;
    width: 100%;
}
.um-login .um-col-alt input[type="submit"].um-button {
    width: 100%;
}
/* Checkbox + label on one line */
.um .um-field-area .um-field-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: 0;
}
.um .um-field-area .um-field-checkbox-option {
    display: inline-block;
    margin: 0;
}
/* Invite-only note under the login form */
.kyc-invite-note {
    text-align: center;
    font-style: italic;
    opacity: 0.6;
    margin-top: 2em;
}

/* No accent line under the selected menu item (Nigel 17 July tweaks). The theme
   draws it as a:before (scaleX(1) on .current-menu-item) in normal + sticky
   headers; hiding the pseudo-element removes it everywhere on desktop. The
   mobile slide-out has no such line. Hover styling untouched. */
.bt-header-responsive-inactive .main-navigation nav > ul.main-navigation-menu > li > a:before {
    display: none;
}

/* Header top breathing room (22 July). The three social icons used to sit in
   `header_right_widgets` above the menu row; removing them (they pointed at the
   theme vendor's own accounts) left Velas with no content there, so the row
   collapsed and the 1890 burgee ended up flush against the top of the viewport.
   Restore the space with padding on the header itself, so it no longer depends
   on widget content being present.

   Scoped to the NON-sticky header only: `.bt-sticky-header-active .site-header`
   is a fixed 70px bar, and padding there would grow it on scroll. Mobile keeps
   a smaller value — the responsive header is already tighter by design. */
.site-header {
    padding-top: 26px;
}
.bt-sticky-header-active .site-header {
    padding-top: 0;
}
@media (max-width: 767px) {
    .site-header {
        padding-top: 14px;
    }
}

/* ── Mobile tweaks (Nigel, 28 July) ─────────────────────────────────────────
   Four items from Nigel's phone screenshots: header burgee off-centre, hero
   title too big, pioneers cramped, footer logo/name not centred. All CSS —
   no page content touched. Verified by measuring rendered geometry (not by
   eye) at 360/375/390/414/480/600/767px, plus a desktop regression pass at
   991/992/1010/1023/1024/1280/1440px. */

/* 1. Mobile header — centre the burgee.
   Velas ships `responsive-logo-position-left` on <body>. TWO things follow
   from that, and both must be undone:
     a) `.responsive-logo-position-left .site-header-responsive-logo-text`
        sets `margin-right: auto` (theme style.css ~2728), which shoves the
        logo hard against the hamburger — this is the actual cause, measured
        as a fixed 80px left edge at every viewport width.
     b) the theme's balancing :after (which reserves a hamburger-sized box on
        the opposite side, so the logo centres against a symmetric bar) is
        display:none outside `-position-center`.
   Zero the auto margin AND enable the spacer, sized to the trigger with no
   extra margin. Doing only (b) leaves the logo pinned left; doing only (a)
   leaves it off-centre by half the hamburger. */
.bt-header-responsive-active.responsive-logo-position-left.responsive-trigger-position-left
.site-header-responsive-inner .site-header-responsive-logo-text {
    margin-right: 0;
}
.bt-header-responsive-active.responsive-logo-position-left.responsive-trigger-position-left
.site-header-responsive-inner:after {
    display: block;
    order: 4;
    width: var(--responsive-trigger-size);
    /* Mirror the trigger's own left inset so the reserved box on the right is
       the exact mirror of the hamburger on the left; without it the logo sits
       half a --content-padding (10px) right of true centre. */
    margin-left: 0;
    margin-right: var(--content-padding);
}

/* 2. Homepage hero — "much smaller" on mobile (Nigel).
   The hero exists TWICE in the markup (one copy hidden xs/ms, one hidden sm+),
   so this must target the class, not a single element.
   !important is REQUIRED, not lazy: Velas' typography-breakpoint block sets
   `.bt_bb_headline.bt_bb_size_extralarge h1 { font-size:3.051875rem!important }`
   under @media (max-width:480px) (theme style.css ~line 35318). A plain
   declaration loses to it and the title stays at 48.8px. */
@media (max-width: 767px) {
    .bt_bb_size_extralarge.bt_bb_headline h1,
    .bt_bb_size_extralarge.bt_bb_headline h2,
    .bt_bb_size_extralarge.bt_bb_headline h3 {
        font-size: 2.4em !important;
        line-height: 1.2;
    }
}
@media (max-width: 480px) {
    .bt_bb_size_extralarge.bt_bb_headline h1,
    .bt_bb_size_extralarge.bt_bb_headline h2,
    .bt_bb_size_extralarge.bt_bb_headline h3 {
        font-size: 2em !important;
    }
}

/* 3. Pioneers — breathing room between stacked founder cards.
   The three col-lg-4 columns become col-xs-12 and stack on mobile, where the
   only separation is the column's own padding, so each portrait sits almost
   against the previous founder's caption. Gap goes between cards only (via
   the adjacent-sibling selector), never after the last one. The extra
   `.bt_bb_row + .bt_bb_row` qualifier keeps this off the section's heading
   row, which is a single full-width column.
   Breakpoint is 1023px, NOT the usual 991px: Velas keeps the founder columns
   STACKED until 1024px (verified — at 992px they are still full-width and
   vertically stacked, only going side-by-side at 1024). A 991px cut would
   leave a 992-1023px dead band, mobile-shaped but unstyled — the same class
   of gap as the documented 993-1300px menu-overlap bug. */
@media (max-width: 1023px) {
    .founders-section .bt_bb_row + .bt_bb_row .bt_bb_column + .bt_bb_column {
        margin-top: 3.5rem;
    }
}

/* 4. Footer — centre the burgee + club name on mobile.
   The column is bt_bb_align_center, but the image and headline are both
   `bt_bb_align_inherit`, which resolves to left once the footer stacks.
   The club name only needs text-align. The LOGO is subtler: the `max-width:
   200px` set further up this file applies to `.kyc-footer-logo img`, but if
   the cap is (re)applied to the DIV, the div's own box shrinks to 200px and
   `margin:auto` then has no slack left to distribute — it computes to 0 and
   the logo stays pinned left. Verified empirically: capping the div leaves it
   67.5px off-centre ((335-200)/2) no matter what centring method is used.
   So keep the div full-width and centre the IMAGE inside it.
   1023px for the same reason as the pioneers rule above: the footer column
   only narrows to its desktop width at 1024px. */
@media (max-width: 1023px) {
    .kyc-footer-logo {
        display: block;
        width: 100%;
        max-width: 100%;
    }
    .kyc-footer-logo img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
    .kyc-footer-logo + .bt_bb_separator_v2 + .bt_bb_headline .bt_bb_headline_tag {
        text-align: center;
    }
}