/* technikPR — custom.css
 *
 * Late-stage override layer for theme + plugin defaults. Loaded after
 * fonts → tokens → components in the child-theme enqueue chain so
 * everything here wins on equal specificity.
 *
 * Conventions:
 *   - One block per override target, with a short comment explaining
 *     WHY (what default it's replacing, where that default lives).
 *   - Avoid !important unless the override is fighting another
 *     !important rule — clean specificity is preferred.
 *   - Use design tokens (var(--…)) from tokens.css where possible
 *     instead of inlining hex values, so brand changes propagate.
 *
 * @since 1.1.3
 */

/* =========================================================================
   Cleversoft icon-with-text — circle/square holder default color
   -------------------------------------------------------------------------
   The CleverSoftCoreIconWithTextShortcode widget delegates its
   `icon_background_color` control to a sub-shortcode whose render
   pipeline does NOT resolve Elementor's Global Color refs — selecting
   "Primary" via the Globe never lands in the rendered inline-style.
   cleversoft-core.min.css ships a hardcoded background of #1A2942
   (Cleversoft demo brand) on `.qodef-icon-holder.qodef-layout--circle`
   / `--square`. We replace it with the technikPR brand primary so
   every Icon-with-Text widget on the site is brand-correct by default.

   Per-widget override (where another color is genuinely needed):
   Elementor → Advanced → Custom CSS with
   `selector .qodef-icon-holder { background-color: …; }`.
   ========================================================================= */

.qodef-icon-holder.qodef-layout--circle,
.qodef-icon-holder.qodef-layout--square {
    background-color: #8EBF1D; /* technikPR CI primary */
}

/* =========================================================================
   Case CPT — doubled .qodef-page-inner padding
   -------------------------------------------------------------------------
   Case-Single-Pages render with a nested structure where BOTH the
   outer <div> and the inner <main> carry id="qodef-page-inner"
   (theme convention adopted by our single-case.php template). The
   site-wide rule  `#technikpr #qodef-page-inner { padding: 48px 0 }`
   in components.css matches both — total padding doubles to 96px.

   We target the inner <main> via its unique tprc-case-single class
   (added by 20140-technikpr-cases) and zero its padding. !important
   is required because the competing rule has specificity (0,2,0,0)
   from the two IDs; our selector (0,0,2,2) loses on cascade without
   it. Cleansolution-Follow-up: drop the duplicate id from the case
   template — but until then, this override keeps the visual right.
   ========================================================================= */

body.single-case main.tprc-case-single {
    padding: 0 !important;
}

/* =========================================================================
   Branded list bullets — Elementor content + theme entry-content
   -------------------------------------------------------------------------
   Site-wide pattern: any <ul> inside an Elementor text-editor widget
   (or the theme's main post-content wrapper / classic .entry-content)
   gets a green primary-color bullet, sized slightly larger than the
   text and bold-weighted for optical balance. Items are indented so
   wrapped lines align under the text start, not under the bullet.

   Explicitly scoped — does NOT affect navigation menus, admin-bar
   submenus, breadcrumbs, or any non-content list.
   ========================================================================= */

.elementor-widget-text-editor ul,
.elementor-widget-theme-post-content ul,
.entry-content ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 1em;
}

.elementor-widget-text-editor ul > li,
.elementor-widget-theme-post-content ul > li,
.entry-content ul > li {
    position: relative;
    padding-left: 1.4em;
    margin-bottom: 0.25em;
}

.elementor-widget-text-editor ul > li::before,
.elementor-widget-theme-post-content ul > li::before,
.entry-content ul > li::before {
    content: "•";
    color: #8EBF1D;
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.2em;
    line-height: inherit;
    font-weight: 700;
}

.elementor-widget-text-editor ul > li:last-child,
.elementor-widget-theme-post-content ul > li:last-child,
.entry-content ul > li:last-child {
    margin-bottom: 0;
}

/* =========================================================================
   Image gallery — branded corner radius
   -------------------------------------------------------------------------
   24px rounded corners on every image inside an Elementor Image-Gallery
   widget. Wraps the <img> directly so hover overlays / captions are
   unaffected; pair `overflow:hidden` on the item to clip any future
   hover surface to the same radius.
   ========================================================================= */

.elementor-image-gallery .gallery-item {
    overflow: hidden;
    border-radius: 24px;
}

.elementor-image-gallery .gallery-item img {
    border-radius: 24px;
    display: block;
}

/* Modula Gallery — same 24px corner radius treatment */
.elementor-widget-modula_elementor_gallery .modula-item {
    border-radius: 24px;
}

.elementor-widget-modula_elementor_gallery .modula-item-content {
    border-radius: 24px;
    overflow: hidden;
}

.elementor-widget-modula_elementor_gallery .modula-item-content img {
    border-radius: 24px;
    display: block;
}

.elementor-widget-modula_elementor_gallery .modula-item-overlay {
    border-radius: 24px;
}

/* =========================================================================
   Elementor Video widget — same 24px corner radius treatment
   -------------------------------------------------------------------------
   Wraps both the iframe (YouTube/Vimeo embed) and the Elementor wrapper
   div (which also holds the privacy-mode click-to-play overlay image
   when "Lazy Load" / privacy is enabled). overflow:hidden on the wrapper
   clips the iframe corners — iframes themselves don't always respect
   border-radius on every browser, hence the belt-and-braces dual rule.
   ========================================================================= */

.elementor-widget-video .elementor-wrapper {
    border-radius: 24px;
    overflow: hidden;
}

.elementor-widget-video .elementor-wrapper iframe,
.elementor-widget-video .elementor-wrapper video,
.elementor-widget-video .elementor-custom-embed-image-overlay {
    border-radius: 24px;
}

/* =========================================================================
   Cases grid — uniform logo-badge sizing
   -------------------------------------------------------------------------
   The portfolio-item logo badge (.tprc-e-logo-badge, rendered in the
   top-right of each case card) takes its size from the inner <img>'s
   intrinsic dimensions. This breaks in two ways:

     1. SVGs without explicit width/height attributes (only viewBox)
        collapse to 0×0 inside the flex container — they're invisible.
        Observed: be-quiet-1.svg, technikpr.svg.
     2. Logos with very different aspect ratios produce wildly different
        badge widths (cherry 123×88, synology 256×83, netgear 201×76,
        broken-SVG badges 36×76) — visually inconsistent across the grid.

   Fix: lock every badge to a uniform 110×40 box and use object-fit:contain
   so each logo scales proportionally inside. Explicit width/height on the
   <img> forces the SVG renderer to use the badge dimensions even when the
   file itself has no intrinsic size, rescuing the collapsed SVGs.
   ========================================================================= */

.tprc-e-logo-badge {
    width: 110px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.tprc-e-logo-badge img {
    width: 100% !important;
    height: 100% !important;
    max-width: 110px !important;
    max-height: 40px !important;
    object-fit: contain !important;
}

/* =========================================================================
   Elementor Testimonial — decorative quotation marks
   -------------------------------------------------------------------------
   Renders large green "smart" quotation marks above (opening, U+201C)
   and below (closing, U+201D) the standard Elementor Testimonial widget
   used at the bottom of each Case-Single page (client quote block).

   Implementation: position:relative on the wrapper, ::before and ::after
   absolutely positioned at 50%-translateX(-50%) so they sit centered above
   and below the quote text regardless of testimonial content length.

   Vertical spacing — tuned 2026-05-25:
     - padding-top: 90px gives the opening " room above the quote text
       without crowding the section above.
     - padding-bottom: 280px = 16px buffer above glyph + 140px glyph
       height + 124px breathing room beneath. The 124px below the closing
       quote is the visually agreed spacing — enough air to read as a
       deliberate section break, but not so much that it leaves a void
       before the footer.
     - ::after bottom: 124px floats the closing glyph 124px above the
       wrapper edge.

   pointer-events are disabled so the decorative marks never interfere with
   text selection or link interactions inside the testimonial.
   ========================================================================= */

.elementor-widget-testimonial .elementor-testimonial-wrapper {
    position: relative;
    padding-top: 90px;
    padding-bottom: 280px;
}

.elementor-widget-testimonial .elementor-testimonial-wrapper::before,
.elementor-widget-testimonial .elementor-testimonial-wrapper::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: Georgia, "Times New Roman", serif;
    font-size: 140px;
    line-height: 1;
    color: #8EBF1D; /* technikPR CI primary */
    font-weight: 700;
    pointer-events: none;
}

.elementor-widget-testimonial .elementor-testimonial-wrapper::before {
    content: "\201C"; /* left double quotation mark */
    top: 0;
}

.elementor-widget-testimonial .elementor-testimonial-wrapper::after {
    content: "\201D"; /* right double quotation mark */
    bottom: 124px;
}

/* =========================================================================
   Elementor Heading widget — linked headline color (site-wide)
   -------------------------------------------------------------------------
   Any <a> inside an Elementor Heading widget gets the technikPR CI
   primary green. Covers the "Our client's latest press releases" link
   on Home + any future linked heading anywhere on the site.

   Default cascade landed the link at #333 — inherited from
   `#technikpr h1..h6 { color: var(--grey-80) }` in components.css via
   widget-heading.min.css's `color: inherit` on the `<a>`.

   Specificity: #technikpr + 2 classes + 1 type = (1,0,3,1) — beats
   components.css's `#technikpr h2` (1,0,0,1) on class count.

   Per-widget override (where a heading link should stay dark):
   Elementor → Advanced → Custom CSS with
   `selector .elementor-heading-title a { color: inherit; }`.
   ========================================================================= */

#technikpr .elementor-widget-heading .elementor-heading-title a {
    color: var(--technikpr-green, #8ebf1d);
    text-decoration: none;
    transition: color 0.2s ease;
}

#technikpr .elementor-widget-heading .elementor-heading-title a:hover {
    color: #7BA819;
}

/* =========================================================================
   Mobile Header — logo sizing, burger touch-target, nav item padding
   -------------------------------------------------------------------------
   The Qode mobile header renders broken in default state:
     1. Logo collapses to 0×0px. The <a class="qodef-mobile-header-logo-link">
        is display:flex with no explicit width — the <img> inside has
        max-width:100% from main.min.css (`.wp-caption, img`) which evaluates
        to 0 inside a 0-width flex parent. Theme also sets the link's height
        to 25px which doesn't help.
     2. Burger renders at 23×23px — font-size:20px on a span. Way below
        Apple HIG (44px) / Material (48px) touch-target minimums.
     3. Menu items are 19px tall with 0px padding — same touch-target issue.

   Fix:
     - Force link + img to height:40px with width:auto so the SVG renders
       at its proportional intrinsic width (~165px for technikpr.svg).
     - Bump burger to 44×44 with 28px icon.
     - Menu items get min-height:48 + 12px/20px padding + bottom-border
       dividers for clear tap surfaces.

   IMPORTANT: do NOT add padding to `#qodef-page-mobile-header .qodef-content-grid`.
   The theme's default `.qodef-content-grid { margin: 0 14px }` aligns the
   header content with the body content below. We achieve the visual 24px
   inset via column wrap-padding (see "Mobile Side-Inset" block at the
   bottom of this file), not via header-grid margin — that breaks the
   theme's calc(100vw - 48px) width math by exceeding the body width.

   All selectors scoped to `#qodef-page-mobile-header` so desktop is
   untouched — the theme only renders that container below its
   1024px-ish mobile breakpoint (which we then extend below).
   ========================================================================= */

#qodef-page-mobile-header .qodef-mobile-header-logo-link {
    width: auto !important;
    height: 40px !important;
    max-height: none !important;
    display: flex;
    align-items: center;
    flex: 0 0 auto;
}

#qodef-page-mobile-header .qodef-mobile-header-logo-link img {
    width: auto !important;
    height: 40px !important;
    max-height: none !important;
    max-width: none !important;
    display: block;
}

#qodef-page-mobile-header .qodef-mobile-header-opener {
    font-size: 28px !important;
    min-width: 44px;
    min-height: 44px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

#qodef-page-mobile-header .qodef-mobile-header-navigation .menu-item > a,
#qodef-page-mobile-header nav .menu-item > a {
    display: flex !important;
    align-items: center;
    min-height: 48px;
    padding: 12px 20px !important;
    font-size: 18px;
    line-height: 1.3;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

#qodef-page-mobile-header .qodef-mobile-header-navigation .menu-item:last-child > a,
#qodef-page-mobile-header nav .menu-item:last-child > a {
    border-bottom: none;
}

/* =========================================================================
   Mobile Header — extend trigger range to <1200px
   -------------------------------------------------------------------------
   Qode theme's native breakpoint switches to mobile-header around
   ~1024px. Between ~1024 and ~1180 the desktop header is technically
   "alive" but cramped:
     - 5 menu items (About, Services, Clients, Cases, Press Releases) don't
       fit horizontally in the ~590px available between logo + widgets —
       the navigation wraps onto 2-3 lines, growing the header to 144px tall.
     - The Header-Sticky variant is duplicated in the DOM. With the main
       nav wrapped, the sticky version (sitting at top:-70px with its own
       240px wrapped height) bleeds visibly below the main header.
     - The Social-Icons widget in `.qodef-widget-holder qodef--one` stretches
       vertically (flex-align) to match the inflated nav row → icons get
       weird vertical spacing.

   Fix: force the mobile-header layout for the whole range up to 1199px,
   hide the desktop-header + sticky-clone. !important needed because the
   theme uses its own inline display rules on these IDs.

   If specific viewports look fine on desktop layout above 1024 in future
   redesigns, tighten the max-width here.
   ========================================================================= */

@media (max-width: 1199px) {
    #qodef-page-header,
    .qodef-header-sticky,
    .qodef-header-sticky-inner {
        display: none !important;
    }

    #qodef-page-mobile-header {
        display: block !important;
    }
}

/* =========================================================================
   Desktop Header — tighter nav-item spacing
   -------------------------------------------------------------------------
   Theme default: every `<li>` in the main menu has `margin: 0 30px`
   (declared in main.min.css), so the visible gap between adjacent items
   is 60px (30 + 30). At desktop widths above the mobile breakpoint that
   leaves the 5 menu items strung very wide across the available space.

   Reduce to 24px each side → 48px gap between items. Theme already nulls
   the outer side of first/last on its own, but we mirror the override
   explicitly so the first/last items stay flush with the edges of the
   nav container (`first-child`: no left margin; `last-child`: no right).
   ========================================================================= */

#qodef-page-header .qodef-header-navigation > ul > li {
    margin-left: 24px !important;
    margin-right: 24px !important;
}

#qodef-page-header .qodef-header-navigation > ul > li:first-child {
    margin-left: 0 !important;
}

#qodef-page-header .qodef-header-navigation > ul > li:last-child {
    margin-right: 0 !important;
}

/* =========================================================================
   Desktop Sticky-Header — height bump for centered 75px logo
   -------------------------------------------------------------------------
   cleversoft-core.min.css sets `.qodef-header-sticky { height: 70px }`
   while components.css forces `a.qodef-header-logo-link.qodef-height--set
   { height: 75px !important }` for both the normal AND the sticky logo
   variants (same class on both `<a>` elements). The 75px logo therefore
   overflows the 70px sticky container by 5px on the bottom edge, giving
   visually 0px top-gap + 0px bottom-gap (logo flush at sticky top,
   bleeding 5px below).

   Bumping the sticky-header to 95px gives the 75px logo a clean 10px /
   10px breathing space top + bottom — symmetric and balanced, while
   keeping the original logo size unchanged (matches the non-sticky
   header above, no awkward shrink-on-scroll mismatch).

   Scope: min-width 1200px. Below 1200px the mobile-header layout
   takes over (see "Mobile Header — extend trigger range") and the
   desktop sticky is `display: none`.

   @since 1.2.7
   ========================================================================= */

@media (min-width: 1200px) {
    .qodef-header-sticky {
        height: 95px !important;
    }
}

/* =========================================================================
   Mobile Side-Inset + Banner Gap — uniform 24px via column padding
   -------------------------------------------------------------------------
   Visual goal on Tablet/Mobile (≤1024px):
     - Every section's content sits 24px from the left and right viewport
       edges (Hero, body-text, banners, page-grid, world-map, …).
     - Stacked Cleversoft-banners on the home page have 24px vertical gap
       between cards (was uneven 9/21 — column 0 had top:50/bot:0, cols
       1+2 had top:10/bot:10).

   Tried-and-rejected: bumping `#qodef-page-inner` margin and
   `.qodef-content-grid` margin from theme-default 14px → 24px.
   That breaks the theme's `width: calc(100vw - 2 * --gridstrength)` math:
   100vw on Windows/Chrome includes the 20px vertical scrollbar, body
   width does not. So 24 + (100vw - 48) + 24 = 100vw, but body = 100vw - 20.
   Result: container overflows the body rightward by 20px, the right
   margin gets eaten by the scrollbar gutter, content effectively sits
   24px from the left but 4px from the right. Asymmetric again.

   Working approach: keep theme-default 14px margins (math stays valid),
   normalize the top-level column wrap-padding to `12px 10px`. The 10px
   side gives 14 + 10 = 24 effective viewport inset. The 12px top+bottom
   gives 12 + 12 = 24 vertical gap between any two stacked top-level
   columns (Banner-Stack on Home is the visible case), replacing the
   un-even per-column paddings that Elementor stored per-section.

   Scope: ≤1024px only. Desktop layout (≥1025px) is untouched — at that
   width --gridstrength is 48px and the theme grid math works.

   @since 1.2.6
   ========================================================================= */

@media (max-width: 1024px) {
    #technikpr .elementor-top-section
        > .elementor-container
        > .elementor-top-column
        > .elementor-widget-wrap {
        padding: 12px 10px !important;
    }
}

/* =========================================================================
   Mobile Footer-Bottom — Logo + Nav side-by-side (≥481px)
   -------------------------------------------------------------------------
   The footer-bottom area is a 2-column qode-grid (logo left, nav right
   on Desktop). Theme's mobile breakpoint collapses both columns to
   100% width → Logo on row 1, Nav on row 2 (90px+ wasted vertical
   space). At 667px viewport there's ample room for both side-by-side.

   Fix: re-flow the grid-inner as a horizontal flex row on the
   481-1024 range. Logo gets a max-width of 160px so wide SVGs don't
   crowd the nav. Below 481px (small phones) the theme's native
   block-stack takes over again — logo gets centered, nav stacks below,
   no horizontal squeeze.

   @since 1.2.5
   ========================================================================= */

@media (max-width: 1024px) and (min-width: 481px) {
    #technikpr #qodef-page-footer-bottom-area .qodef-grid.qodef-col-num--2 .qodef-grid-inner {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
    }

    #technikpr #qodef-page-footer-bottom-area .qodef-grid-item {
        width: auto !important;
        float: none !important;
        flex: 0 1 auto;
    }

    #technikpr #qodef-page-footer-bottom-area .qodef-grid-item:first-child .wp-block-image.logo img {
        max-width: 160px !important;
        height: auto !important;
    }
}
