/* ==========================================================
   The Hacker Studio — Custom Fixes
   Equal-height service / pricing cards, contact spacing.
   Loaded after style.css so these rules take priority.
   ========================================================== */

/* ---------- Services grid: equal height, aligned content ---------- */
#service .row.g-5 {
    display: flex;
    flex-wrap: wrap;
}
#service .row.g-5 > [class*="col-"] {
    display: flex;
}
#service .service.service-style-2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#service .service.service-style-2 .content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    width: 100%;
}
#service .service.service-style-2 .content p.text-small {
    flex-grow: 1;
    margin-bottom: 0;
}
#service .service.service-style-2 .content a.h4 {
    min-height: 3.2em;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* ---------- Pricing grid: equal height, buttons aligned to bottom ---------- */
#pricing .row.g-5 {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch !important;
}
#pricing .row.g-5 > [class*="col-"] {
    display: flex;
}
#pricing .price-plan-card {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}
#pricing .price-plan-card .check-box {
    flex-grow: 1;
}
#pricing .price-plan-card .tmp-button-here {
    margin-top: auto;
    padding-top: 20px;
}

/* ---------- Home page contact section: balanced columns, no social row ---------- */
#contact .invers-arrange-item {
    display: flex;
}
#contact .contact-form-style-1,
#contact .contact-address-style-2 {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}
#contact .contact-address-style-2 .d-flex.flex-column.gap-5 {
    justify-content: center;
    flex-grow: 1;
}

/* ==========================================================
   Fix pack — section spacing, hero background, nav offset
   ========================================================== */

/* ---------- Inner-page section spacing (about / service / contact) ----------
   These rts-* gap utilities are referenced in the inner-page markup but were
   never defined anywhere, so the founder block, the services grid and the
   "Ready to build your studio" CTA collided into each other. Define them to
   match the theme's own 120px rhythm, with sensible responsive step-downs. */
.rts-section-gapTop { padding-top: 120px; }
.rts-section-gapBottom { padding-bottom: 120px; }
@media only screen and (max-width: 1199px) {
    .rts-section-gapTop { padding-top: 100px; }
    .rts-section-gapBottom { padding-bottom: 100px; }
}
@media only screen and (max-width: 991px) {
    .rts-section-gapTop { padding-top: 80px; }
    .rts-section-gapBottom { padding-bottom: 80px; }
}
@media only screen and (max-width: 767px) {
    .rts-section-gapTop { padding-top: 60px; }
    .rts-section-gapBottom { padding-bottom: 60px; }
}

/* ---------- Eyebrow label above inner-page section titles ----------
   .pre-title was used on about/service/contact but had no styling, so it
   rendered as plain body text. Give it the small pink uppercase treatment. */
.pre-title {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-primary);
}

/* ---------- Founder stat counters (About page) ---------- */
.single-counter { margin-bottom: 10px; }
.single-counter .title { margin-bottom: 6px; line-height: 1.1; }
.single-counter p { margin-bottom: 0; opacity: 0.85; }

/* ---------- Home hero: remove the box + glow behind the founder cutout ----------
   The portrait is a clean transparent cutout, so the decorative blurred box
   and gradient glow read as a stray "background" behind him. Hide both so the
   founder sits cleanly on the page background. */
.banner-image .banner-image-shape,
.banner-image .banner-image-shape-2 {
    display: none !important;
}

/* ---------- Home: separate the packages grid from Recent Videos ----------
   The pricing block only had top padding, so its cards ran up against the
   Recent Videos section below. Add matching bottom spacing. */
.tmp-pricing-area-start { padding-bottom: 120px; }
@media only screen and (max-width: 991px) {
    .tmp-pricing-area-start { padding-bottom: 80px; }
}

/* ---------- In-page anchor offset ----------
   Keep section headings clear of the fixed/sticky header when the nav jumps
   to an in-page anchor (native scroll + scrollIntoView). */
html { scroll-padding-top: 100px; }

/* ==========================================================
   Nav fix pack 2 — dropdown on tap, guaranteed clickable nav
   ========================================================== */

/* ---------- Desktop "Pages" dropdown: open on click/tap, not only hover ----------
   The theme revealed the submenu solely on CSS :hover, so on touchscreens and
   trackpad taps "Pages" did nothing at all. main.js (desktopDropdown) now
   toggles .submenu-open on click; mirror the theme's hover reveal for it.
   Hover still works for mouse users. */
.tmp-mainmenu-nav .tmp-mainmenu > li.has-dropdown.submenu-open .submenu {
    opacity: 1;
    visibility: visible;
    top: 100%;
    transform: scaleY(1);
    overflow: inherit;
}
.tmp-mainmenu-nav .tmp-mainmenu > li.has-dropdown.submenu-open::after {
    content: "\f077";
    color: var(--color-primary) !important;
}

/* ---------- Guarantee the header/nav always sit above page content ----------
   On the inner pages (about/service/contact) the entire nav read as dead. The
   markup and JS are clean native links, so the only remaining class of cause
   is a sibling layer painting over the header and swallowing clicks. Lift the
   (absolutely-positioned) transparent header above any decorative shape, GSAP
   pin-spacer or breadcrumb band, and give the nav links their own stacking. */
.header-one.header--transparent { z-index: 1010; }
.tmp-header-area { position: relative; }
.tmp-header-area .tmp-mainmenu-nav,
.tmp-header-area .tmp-mainmenu li a { position: relative; z-index: 2; }

/* ---------- Preloader must never block interaction once loaded ----------
   The preloader is a full-viewport fixed layer at z-index:100000000. The theme
   set pointer-events:none only on .is-loaded; also force it invisible AND
   non-interactive the instant it is marked loaded, so it can never eat clicks
   even if the fade-out is interrupted or delayed. main.js reliably adds
   .is-loaded on DOM-ready, window load, and a 2s hard-timeout fallback. */
.ths-preloader.is-loaded {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}