/*
Theme Name: 	   Corvine Maxwell
Text Domain: 	   corvine
Template: 			corpiva
Version:            1.0.44.01-maxwell
Tested up to:       7.1
Requires at least:  4.7
Requires PHP:       5.6
Author:             Maxwell Innovations, Inc. (based on Corvine by DesertThemes)
Author URI:         https://maxwell.com.ph/
Theme URI:          https://desertthemes.com/themes/corvine-free/
Description:        Corvine recolored for Maxwell Innovations, Inc. (navy #071f50 primary, gray #7f8080 for buttons/links/icons), with a light blue #00a0e8 accent kept for badges and hover/highlight states. Requires the Corpiva parent theme. latest version-lance.
Tags:               one-column, two-columns ,right-sidebar, flexible-header, custom-background, custom-header, custom-menu, editor-style, featured-images, footer-widgets, post-formats, theme-options, threaded-comments, translation-ready, full-width-template, custom-logo, blog, e-commerce, portfolio
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned
with others.

Maxwell Innovations brand palette:
  Primary (navy):   #071f50  - header logo badge, mobile nav, dark cards,
                                footer background, headings
  Secondary (gray):  #7f8080  - buttons, links, main icons, topbar
                                background (was the theme's vivid pink/red)
  Accent:            #00a0e8 - badges & hover/highlight states
*/

:root {
    --dt-main-rgb: 127, 128, 128;  /* Maxwell gray #7f8080 - buttons, links, icons, topbar */
    --dt-secondary-color: #071f50; /* Maxwell brand navy - header logo badge, footer, dark sections, headings */
    --mx-accent-color: #00a0e8;    /* accent - badges & hover/highlight states */
}

/* Corpiva sets the footer background via a Customizer default (#0F0D1D) that
   bypasses the --dt-secondary-color variable entirely - override it directly
   so the footer matches the brand navy. */
.dt_footer--one {
    background-color: var(--dt-secondary-color) !important;
}

/* Route product sale badges to the light-blue accent per the brand palette
   (badges & hover/highlight states use the accent color, not the gray). */
.wc-block-components-product-badge {
    background: var(--mx-accent-color) !important;
}

/* Header Six */

.header--six {
    background: #fefbfa;
}

.header--six .dt_header-inner .dt_header-topbar .dt-container,
.header--six .dt_header-inner .dt_navbar-wrapper .dt-container {
    max-width: 1670px;
}

.header--six .dt_header-inner .dt_header-topbar {
    background-color: var(--dt-secondary-color);
    color: #fff;
}

.header--six .dt_header-inner .widget.widget_social li a {
    width: 2.98rem;  /* 3.5rem * 85% */
    height: 2.98rem;
    color: #fff;
    background: var(--dt-main-color);
}

/* Parent theme's .widget_social ul defaults to flex-wrap: wrap, which is
   why all 5 icons were dropping to a second row inside the narrow
   dt-col-3 - force them onto one line and tighten the gap between them
   (parent's default li margin-left is 1rem) so all 5 comfortably fit. */
.header--six .dt_header-inner .dt_header-topbar .widget_social ul {
    flex-wrap: nowrap;
}

.header--six .dt_header-inner .dt_header-topbar .widget_social li {
    margin-left: 0.6rem;
}

.header--six .dt_header-inner .dt_header-topbar .widget_social li:first-child {
    margin-left: 0;
}

.header--six .dt_header-inner .widget.widget_social li a:after {
    background: #000;
}

.header--six .dt_mobilenav .dt_navbar-list-right .dt_navbar-user-item .dt_user_btn,
.header--six .dt_mobilenav .dt_navbar-list-right .dt_navbar-cart-item .dt_navbar-cart-icon,
.header--six .dt_mobilenav .dt_navbar-list-right .dt_navbar-search-item button.dt_navbar-search-toggle,
.header--six .dt_header-inner .widget.widget_social li a:hover i:before,
.header--six .dt_header-inner .widget.widget_social li a:focus i:before,
.header--six .dt_header-inner .dt_header-topbar .contact__body a:hover,
.header--six .dt_header-inner .dt_header-topbar .contact__body a:focus {
    color: #fff;
}

/* Topbar diagonal wedge: white (icons) on the left cutting diagonally into
   navy (email) on the right - the exact mirror of the logo wedge below
   (which cuts navy-into-white), so the two rows form one continuous
   diagonal line.

   White fill on the left comes from .dt-col-3's own background now
   (below), not a bleed-off-screen ::before - a 9999999px-wide
   pseudo-element was leaving a stray vertical seam artifact in some
   browsers. .dt-col-3 is a real, bounded box (Corpiva's own grid
   column), so giving IT the white background is both simpler and
   doesn't have that failure mode. (This rule was accidentally set to
   #000 instead of #fff - fixed below, since it contradicted this
   comment and would have shown a black box instead of white.)

   This column (and the logo row's matching column below) was
   originally .dt-col-2/.dt-col-10, briefly widened to
   .dt-col-4/.dt-col-8 to give the (then 7rem-tall) logo more room on
   narrow browsers, then moved back - widening shifted the diagonal
   further right than wanted at the time. Now that the logo is 9rem
   tall (proportionally wider), its own rectangular edge was reaching
   the .site--logo-inner clip boundary before the diagonal cut did,
   showing a hard corner instead of a clean point - so the columns
   were widened again, this time to .dt-col-3/.dt-col-9, deliberately
   moving the cut right to give the bigger logo room. Reclaiming the
   grid's default left/right gutter on this same .dt-col-3 (below)
   adds a bit more width on top of that without changing the
   diagonal's position further, and the clip guard on
   .site--logo-inner remains as a safety net for narrow browsers.

   padding-right on .widget--left shifts the wedge's start point
   further right (past where the icons end), so the cut clears the
   logo box's top corner in the row below instead of exposing it right
   at the seam. Brought down from 10rem now that the reclaimed gutter
   below already contributes some of that clearance on its own - nudge
   this value up/down if the corner still peeks through, or if there's
   too big a gap between the icons and the diagonal. */
.header--six .dt_header-inner .dt_header-topbar .dt-row > .dt-col-3 {
    background: #fff;
}

/* Reclaims the grid's default 1.2rem-per-side gutter (Corpiva's
   .dt-row > * rule in themes.css) on the two matched .dt-col-3 columns
   - this one (topbar icons) and the logo row's one below - so the navy
   background gets an extra ~2.4rem of width to work with as the
   browser narrows. Applied to both columns identically so the topbar
   and logo row still line up as one continuous cut.

   The columns themselves were widened from 2/12 to 3/12 (dt-col-2 ->
   dt-col-3, with dt-col-10 -> dt-col-9 on their matching siblings in
   functions.php and site-header.php) to push the whole diagonal
   further right - the 9rem-tall logo is proportionally wider than the
   old 7rem one, and at 2/12 its own rectangular edge reached the
   .site--logo-inner overflow-hidden clip boundary before the diagonal
   cut did, showing a hard vertical corner instead of a clean point.
   Widening the column moves that clip boundary right along with the
   cut, giving the bigger logo room to sit fully inside the navy
   wedge. If a corner still peeks through, go to dt-col-4/dt-col-8
   next (already tried once before, see note below on why it was
   reverted - that reasoning no longer applies now that more room is
   the actual goal). */
.header--six .dt_header-inner .dt_header-topbar .dt-row > .dt-col-3,
.header--six .dt_header-navwrapper .dt-row > .dt-col-3 {
    padding-left: 0;
    padding-right: 0;
}

.header--six .dt_header-inner .dt_header-topbar .widget--left {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    color: var(--dt-secondary-color);
    height: 100%;
    padding-right: 6rem;
}

/* Wedge width is derived from a 60deg angle (measured from horizontal)
   against this row's own height: width = height / tan(60deg) =
   height * 0.5774. At 4.5rem tall that's 4.5 * 0.5774 ~= 2.6rem. The
   logo wedge below uses the exact same formula against its own 9rem
   height, so both cuts sit at the same 60deg angle and read as one
   continuous line rather than bending at the seam. If either row's
   height changes again, recompute with the same formula:
   new_width = new_height * 0.5774 (for 60deg - use
   height / tan(desired_angle) for any other angle). */
.header--six .dt_header-inner .dt_header-topbar .widget--left::after {
    content: "";
    position: absolute;
    top: 0;
    right: -2.6rem;
    bottom: 0;
    width: 2.6rem;
    height: 100%;
    background: #fff;
    clip-path: polygon(0% 0%, 100% 0%, 0% 100%, 0% 100%);
    z-index: -1;
}

@media (min-width: 62em) {
    .header--six .dt_header-inner .dt_header-topbar .widget--left .widget {
        line-height: 4.5rem;
    }

    .header--six .dt_header-inner .dt_header-topbar .widget--left > .widget+.widget {
        padding-left: 5rem;
        padding-right: 8rem;
    }

    .header--six .dt_header-navwrapper .dt_navbar-right,
    .header--six .dt_header-navwrapper .site--logo,
    .header--six .dt_header-navwrapper {
        position: relative;
        z-index: 0;
    }

    .header--six .dt_header-navwrapper .site--logo {
        background: var(--dt-secondary-color);
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        /* Overrides the dt-py-3 class in the HTML (padding-top/bottom:
           1.6rem each, 3.2rem total) - with a 9rem-tall logo image that
           pushed this box's real content height taller than the 9rem
           the wedge math below assumes, which is why the two wedges'
           angles didn't actually match on screen. Removing it lets the
           row settle at the real 9rem and the logo fill it. */
        padding-top: 0;
        padding-bottom: 0;
    }

    .header--six .dt_header-navwrapper .site--logo::before {
        content: "";
        background: var(--dt-secondary-color);
        width: 9999999px;
        height: 100%;
        position: absolute;
        top: 0;
        right: 99%;
        z-index: -1;
    }

    .header--six .dt_header-navwrapper .site--logo::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        width: 5.2rem;
        height: 100%;
        background: #fff;
        /* This is deliberately NOT a mirror of .widget--left::after above -
           a mirrored wedge only meets the topbar's line at a single point,
           which still reads as a "V" bend rather than one straight line
           (the direction reverses right at the seam). A true straight line
           has to keep receding in the SAME direction the topbar's line was
           already going - i.e. this cuts INTO .site--logo's own navy
           background (revealing white, growing wider toward the bottom)
           rather than adding MORE navy outward like the topbar's wedge did.
           Width uses the same 60deg-angle formula as the topbar wedge
           above (width = height * 0.5774), against this row's own 9rem
           height: 9 * 0.5774 ~= 5.2rem. */
        clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
        z-index: -1;
    }
    
    .header--six .dt_header-navwrapper .dt_navbar-right .dt_navbar-list-right {
        min-height: 9rem;
    }
}

.header--six .dt_header-inner .dt_navbar-menu .dt_navbar-nav {
    padding-left: 5.1rem;
}

/* "Get A Quote" header button (Corpiva's own .dt-btn-primary, rendered
   via corpiva_header_button() in the parent theme) - defaults to the
   parent theme's own accent color on hover, which doesn't match
   Maxwell's brand navy. Scoped to .header--six so it only affects this
   button in the header, not any other .dt-btn-primary elsewhere on the
   site (e.g. in page content). */
.header--six .dt_header-inner .dt-btn-primary:hover,
.header--six .dt_header-inner .dt-btn-primary:focus {
    background-color: var(--dt-secondary-color);
    border-color: var(--dt-secondary-color);
    color: #fff;
}

.header--six .dt_header-inner .dt_header-topbar .widget--left,
.header--six .dt_header-inner .dt_header-topbar .widget--right,
.header--six .dt_header-inner .dt_header-topbar .widget--center {
    min-height: 4.5rem;
}

.header--six .dt_header-inner .dt_header-topbar .contact__list i,
.header--six .dt_header-inner .dt_header-topbar .contact__body a,
.header--six .dt_header-inner .dt_header-topbar .contact__body span {
    color: #fff;
}

/* .widget--right (hours/email/location) has no explicit background - it
   just shows the navy .dt_header-topbar background behind it. The three
   .widget_contact asides are spaced apart by Corpiva's own
   .widget--right .widget rule in themes.css (padding: 0 1.5rem) - no
   extra spacing needed here. */

/* Corpiva's own (unscoped) base CSS gives .dt_navbar-menu its own
   min-height: 9rem, completely separate from .dt_navbar-list-right's
   min-height (also set to 9rem above) - this floor otherwise wins on
   its own regardless of the .dt_navbar-list-right value, which is what
   throws off the logo wedge's angle match if the two ever drift apart.
   Kept in lockstep here (both at 9rem) so that never happens. */
.header--six .dt_header-inner .dt_navbar-menu {
    justify-content: space-between;
    min-height: 9rem;
}

/* Same floor, one level up: Corpiva's base CSS also gives
   .dt_header-navwrapperinner (the column-flex wrapper around the whole
   logo+nav row) its own separate min-height: 9rem, with
   justify-content: center. If this wrapper's value ever drifts from
   .dt_navbar-menu above, the wrapper forces itself taller than the row's
   real content and centers that shorter content inside itself, adding
   the header's own off-white background (#fefbfa) above AND below the
   navy logo box instead of letting navy fill the full row, and pushing
   the whole row down from where the topbar directly above it ends -
   which is what breaks the logo wedge's alignment with the topbar
   wedge as one continuous diagonal cut. Matching this to the same
   9rem as .dt_navbar-menu keeps both the full-height navy fill and the
   wedge alignment intact. */
.header--six .dt_header-navwrapperinner {
    min-height: 9rem;
}

.header--six .dt_mobilenav {
    background-color: var(--dt-secondary-color);
}

.header--six .hamburger span {
    background-color: #ffff;
}

/* Slider Dots */
@media (min-width: 62em) {
    .header--six + .site-content .dt_slider .dt_owl_carousel.owl-carousel .owl-nav {
        display: none;
    }
    .header--six + .site-content .dt_slider .dt_owl_carousel.owl-carousel .owl-dots {
        bottom: 0;
        top: 0;
        margin: auto 0;
        left: auto;
        right: 0;
        width: 4.8rem;
        padding: 0 !important;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .header--six + .site-content .dt_slider .dt_owl_carousel.owl-carousel .owl-dots button {
        margin: 1.2rem 0;
    }
    .header--six + .site-content .dt_slider .dt_owl_carousel.owl-carousel .owl-dots button:last-child:before,
    .header--six + .site-content .dt_slider .dt_owl_carousel.owl-carousel .owl-dots button:after {
        content: "";
        width: 0.2rem;
        height: 2.3rem;
        position: absolute;
        left: 0.55rem;
        background-color: #818181;
        top: -2.3rem;
    }
    .header--six + .site-content .dt_slider .dt_owl_carousel.owl-carousel .owl-dots button:last-child:before {
        bottom: -2.3rem;
        top: unset;
    }
}

.header--six + .site-content .dt_slider .dt_slider-content .subtitle {
    color: #fff;
    border-radius: 2rem;
    border: 2px solid rgba(189, 189, 189, 0.3);
    padding: 6px 28px;
    position: relative;
    z-index: 0;
    margin-bottom: 2.5rem;
    line-height: 2.5rem;
    -webkit-backdrop-filter: blur(1.5rem);
    backdrop-filter: blur(1.5rem);
}

/* Service Eleven ( Information 6 ) */

.dt_service--eleven {
    background-color: #eff3f6;
}

.dt_slider + .dt_service--eleven .dt-row:after {
    display: none;
}

.dt_service--eleven .item-inner {
    background: #fff;
    padding: 40px 30px;
    position: relative;
    z-index: 0;
    border-radius: 20px;
}

.dt_service--eleven .item-inner::before {
    border-radius: 20px;
    transform: scale(0);
    background: var(--dt-secondary-color);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: -1;
    transition: all 0.5s ease-in-out 0s;
}

.dt_service--eleven .item-inner::after {
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	width: 95px;
	height: 94px;
	z-index: 1;
	-webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTUiIGhlaWdodD0iMTE0IiB2aWV3Qm94PSIwIDAgMTE1IDExNCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNzUgMzVjMzAuNTk3LTEuNzQ4IDM4LjUtMjQgNDAtMzV2MTE0SDBjMjkuNS03IDMzLTIzIDM0LTM0LjVTNDAgMzcgNzUgMzVaIi8+PC9zdmc+");
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMTUiIGhlaWdodD0iMTE0IiB2aWV3Qm94PSIwIDAgMTE1IDExNCI+PHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNzUgMzVjMzAuNTk3LTEuNzQ4IDM4LjUtMjQgNDAtMzV2MTE0SDBjMjkuNS03IDMzLTIzIDM0LTM0LjVTNDAgMzcgNzUgMzVaIi8+PC9zdmc+");
	--webkit-size: 100%;
	mask-size: 100%;
	background-color: #eff3f6;
}

.dt_service--eleven .item-inner:hover::before,
.dt_service--eleven .item-inner:focus-within::before {
    transform: scale(1);
}

.dt_service--eleven .item-inner .item-content-inner,
.dt_service--eleven .item-inner .item-content-head {
    position: relative;
    z-index: 1;
}

.dt_service--eleven .item-inner .item-content-head {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 2.2rem;
    margin-bottom: 2.2rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(189, 189, 189, 0.35);
}

.dt_service--eleven .item-inner .item-icon {
    display: inline-block;
    height: 75px;
    width: 75px;
    text-align: center;
    line-height: 75px;
    color: var(--dt-main-color);
    background-color: rgba(var(--dt-main-rgb), 0.1);
    border-radius: 50%;
    font-size: 38px;
    flex-shrink: 0;
    transition: all 0.35s ease-in-out;
}

.dt_service--eleven .item-inner:hover .item-icon,
.dt_service--eleven .item-inner:focus-within .item-icon {
    color: #fff;
    background-color: rgba(var(--dt-main-rgb), 1);
}

.dt_service--eleven .item-inner .item-title {
    font-size: 2rem;
    line-height: 1.17;
    flex: 1;
    color: var(--dt-secondary-color);
    transition: all 0.5s ease-in-out 0s;
}

.dt_service--eleven .item-inner .item-title {
    color: currentColor;
}

.dt_service--eleven .item-inner .desc {
    transition: all 0.5s ease-in-out 0s;
}

.dt_service--eleven .item-inner:hover .desc,
.dt_service--eleven .item-inner:focus-within .desc,
.dt_service--eleven .item-inner:hover .item-title,
.dt_service--eleven .item-inner:focus-within .item-title,
.dt_service--eleven .item-inner:hover .item-title,
.dt_service--eleven .item-inner:focus-within .item-title {
    color: #fff;
}

.dt_service--eleven .item-inner .dt-more {
    color: #fff;
    background-color: var(--dt-secondary-color);
    width: 50px;
    height: 50px;
    line-height: 46px;
    text-align: center;
    font-size: 2.2rem;
    border-radius: 50%;
    display: inline-block;
    margin-top: 2rem;
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 2;
    transition: all .4s ease;
}

.dt_service--eleven .item-inner .dt-more:before {
    content: "";
    position: absolute;
    top: -3px;
    right: -3px;
    bottom: -3px;
    left: -3px;
    border-radius: 50%;
    border: 1px dashed var(--dt-secondary-color);
}

.dt_service--eleven .item-inner .dt-more:focus:before,
.dt_service--eleven .item-inner .dt-more:hover:before {
    animation: floating--rotate 8s infinite linear;
    border-color: var(--dt-main-color);
}

.dt_service--eleven .item-inner .dt-more:focus,
.dt_service--eleven .item-inner .dt-more:hover {
    background-color: var(--dt-main-color);
    color: #fff;
    box-shadow: 0 0 0 rgb(255, 255, 255, 0.2);
}

.dt_service--eleven .item-inner .dt-more i {
    transform: rotate(320deg);
    transition: all 0.5s ease-in-out;
}

.dt_service--eleven .item-inner .dt-more:focus i,
.dt_service--eleven .item-inner .dt-more:hover i {
    transform: rotate(360deg);
}

/* Information Four */

.dt_service--four .services-item {
    background: #fff;
    border-radius: 1.6rem;
    padding: 4.5rem 3.5rem 4.2rem;
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.dt_service--four .services-item .services-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    -webkit-clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
    clip-path: polygon(50% 0, 50% 0, 50% 50%, 50% 100%, 50% 100%, 50% 50%);
    transition: .4s;
}

.dt_service--four .services-item:focus-within .services-image,
.dt_service--four .services-item:hover .services-image {
    -webkit-clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
    clip-path: polygon(25% -70%, 75% -70%, 120% 50%, 75% 170%, 25% 170%, -20% 50%);
}

.dt_service--four .services-item .services-image:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--dt-main-color);
    opacity: 0.7;
    z-index: -1;
}

.dt_service--four .services-item .services-icon {
    margin-bottom: 3rem;
    font-size: 5rem;
    color: var(--dt-main-color);
    transition: .5s;
}

.dt_service--four .services-item .title {
    color: var(--dt-secondary-color);
    margin-bottom: 1rem;
    transition: .5s;
}

.dt_service--four .services-item .title a {
    color: var(--dt-secondary-color);
    text-decoration: none;
    transition: .5s;
}

.dt_service--four .services-item p {
    transition: .5s;
}

.dt_service--four .services-item .link-btn {
    background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0 100% / 0 1px no-repeat;
    color: var(--dt-secondary-color);
    text-decoration: none;
    font-weight: 600;
    transition: .5s;
}

.dt_service--four .services-item .link-btn:focus,
.dt_service--four .services-item .link-btn:hover {
    background-size: 100% 1px;
}

.dt_service--four .services-item .link-btn i {
    margin-left: 0.5rem;
}

.dt_service--four .services-item:focus-within .link-btn,
.dt_service--four .services-item:hover .link-btn,
.dt_service--four .services-item:focus-within p,
.dt_service--four .services-item:hover p,
.dt_service--four .services-item:focus-within .title,
.dt_service--four .services-item:hover .title,
.dt_service--four .services-item:focus-within .title a,
.dt_service--four .services-item:hover .title a,
.dt_service--four .services-item:focus-within .services-icon,
.dt_service--four .services-item:hover .services-icon {
    color: #fff;
}

.wp-block-archives {
    list-style: none;
    padding: 0;
}

.wc-block-components-product-badge {
    background: var(--dt-main-color);
    color: #fff;
}

.wp-block-archives-list a {
    font-weight: 600;
    color: var(--dt-secondary-color);
}

.wp-block-archives-list a:hover, 
.wp-block-archives-list a:focus {
    color: var(--dt-main-color);
}

.wp-block-page-list.has-background {
    padding: 1rem;
}

a.wp-block-button__link:hover, 
a.wp-block-button__link:focus {
    color: #fff;
    text-decoration: none;
}

.wp-block-button.is-style-outline a.wp-block-button__link {
    color: var(--dt-main-color);
}

.wp-block-latest-comments {
    padding-left: 0;
}

.wp-block-latest-comments li a:not(:hover, :focus) {
    color: var(--dt-secondary-color);
}

.dt_footer .wp-block-latest-comments li a:not(:hover, :focus) {
    color: inherit;
}

.dt_footer ul.product_list_widget li .woocommerce-Price-amount {
    color: #fff;
}

.dt_footer ul.product_list_widget li {
    border-bottom: none;
}

.dt_footer .widget_shopping_cart .button:not(.checkout):not(.add_to_cart_button) {
    background-color: var(--dt-main-color);
}

.dt_footer .widget_shopping_cart .button:not(.checkout):not(.add_to_cart_button):hover,
.dt_footer .widget_shopping_cart .button:not(.checkout):not(.add_to_cart_button):focus {
    background-color: var(--dt-main-color) !important;
}

.dt_footer .widget_shopping_cart a.checkout:hover, 
.dt_footer .widget_shopping_cart a.checkout:focus {
        background-color: var(--dt-main-color) !important;
}

.dt_footer .widget_shopping_cart span.amount {
    color: #fff;
}

.dt_footer .widget_shopping_cart li img {
   object-fit: contain !important;
   padding-right: 10px;
}

.dt_footer .widget .wc-block-cart-link {
    color:#fff;
    background: var(--dt-main-color);
}

.dt_footer .widget .wc-block-cart-link:hover, 
.dt_footer .widget .wc-block-cart-link:focus {
    text-decoration: none;
}

.woocommerce-account .woocommerce-Address-title h2 {
    font-size: 4rem;
}

.wp-block-button.is-style-outline a.wp-block-button__link {
    border-color: inherit;
    background: transparent
}

.wp-block-categories-list.has-background {
    padding: 1rem;
}

.wp-block-latest-comments.has-background {
    padding: 1rem;
}

.wp-block-file a {
    text-decoration: none;
}

.wp-block-file.has-background {
    padding: 1rem;
}

.woocommerce .summary .product_meta>span a {
    text-decoration: none;
}

table.wc-block-cart-items .wc-block-cart-items__header th {
    font-size: 1.6rem;
    font-weight: 700;
}

.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title {
    font-weight: 700;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label, 
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-weight: 600;
}

.wp-block-woocommerce-customer-account.has-background {
    padding: 1rem;
}

.wp-block-woocommerce-customer-account a:focus {
    text-decoration: underline !important;
}

.wc-block-customer-account__link {
    text-decoration: none;
}

.dt_footer .widget.widget_products ins .woocommerce-Price-amount.amount {
    color:#fff;
}

.woocommerce ul.products li.product a:focus .woocommerce-loop-product__title {
    color: var(--dt-main-color);
}

.wp-block-list li a:not(:hover):not(:focus) {
    text-decoration: none;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
    background-color: var(--dt-main-color);
}
/* ==========================================================================
   Maxwell Innovations - homepage hero content inside the page-title banner
   (overrides the default plain "Home" title on the front page only - see
   the matching template-parts/site-breadcrumb.php override)

   EASY ADJUSTMENT: everything below reads from these variables. To resize
   or reposition the hero text box, change ONLY the values in this :root
   block - nothing else needs to be touched. Easiest way to test values
   live: paste this whole variable block into Appearance -> Customize ->
   Additional CSS, tweak the numbers, and watch the preview update.
   ========================================================================== */
:root {
    --mx-hero-banner-height: 55vh;  /* height of the whole photo banner on the front page */
    --mx-hero-left: 26%;            /* box left edge, as % of banner width */
    --mx-hero-top: 12%;             /* box top edge, as % of banner height */
    --mx-hero-width: 30%;           /* box width, as % of banner width */
    --mx-hero-align: left;          /* text alignment inside the box: left / center / right */
    --mx-hero-heading-size: 2.6rem; /* heading font size (desktop) */
    --mx-hero-heading-size-sm: 2.1rem; /* heading font size (mobile, under ~991px) */
    --mx-hero-text-size: 1.3rem;    /* paragraph font size */
    --mx-hero-gap: 1rem;            /* space below the heading, between paragraphs */
    --mx-hero-btn-padding: 1.2rem 2.8rem; /* button size: "vertical horizontal" */
    --mx-hero-btn-size: 1.3rem;     /* button text size */
    --mx-hero-text-color: #c7cbd0;  /* heading + paragraph color - clearly gray, not just off-white */
    /* Shadow uses em so it scales with font-size (stays proportional at any
       screen size/zoom) instead of washing out against the photo's bright
       bokeh spots or getting lost on its darker areas. Slightly stronger
       than before since this gray has less inherent contrast than white. */
    --mx-hero-text-shadow: 0 0.08em 0.4em rgba(0, 0, 0, 0.75);
}

/* Fixed height on the front page only, so the percentage positions below
   have something real to measure against (percentages don't resolve
   reliably against an "auto" height). */
.mx_hero_banner {
    height: var(--mx-hero-banner-height);
}

.mx_hero_banner .dt-container {
    height: 100%;
    position: relative;
}

.mx_hero_banner .dt_pagetitle_content {
    height: 100%;
    position: relative;
}

.mx_hero_content {
    position: absolute;
    left: var(--mx-hero-left);
    top: var(--mx-hero-top);
    width: var(--mx-hero-width);
    text-align: var(--mx-hero-align);
    z-index: 1;
}

#dt_pagetitle .mx_hero_content h1 {
    color: var(--mx-hero-text-color) !important;
    text-shadow: var(--mx-hero-text-shadow);
    font-size: var(--mx-hero-heading-size);
    line-height: 1.2;
    margin-bottom: var(--mx-hero-gap);
    letter-spacing: 0.02em;
}

@media (max-width: 61.95em) {
    #dt_pagetitle .mx_hero_content h1 {
        font-size: var(--mx-hero-heading-size-sm);
        line-height: 1.25;
    }

    /* 30% of a phone/tablet screen is too narrow for real text - widen
       the box and pull it back to the left edge on smaller screens. */
    .mx_hero_content {
        left: 5%;
        width: 90%;
        top: 8%;
    }

    .mx_hero_banner {
        height: 45vh;
    }
}

#dt_pagetitle .mx_hero_content p {
    color: var(--mx-hero-text-color) !important;
    text-shadow: var(--mx-hero-text-shadow);
    font-size: var(--mx-hero-text-size);
    line-height: 1.5;
    margin-bottom: calc(var(--mx-hero-gap) / 2);
}

.mx_hero_btn {
    display: inline-block;
    margin-top: var(--mx-hero-gap);
    padding: var(--mx-hero-btn-padding);
    background-color: var(--dt-secondary-color);
    color: #fff !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: var(--mx-hero-btn-size);
    border-radius: 50rem;
    text-decoration: none !important;
    transition: background-color 0.3s ease;
}

.mx_hero_btn:hover,
.mx_hero_btn:focus {
    background-color: var(--dt-main-color);
    color: #fff !important;
}

/* ==========================================================================
   Maxwell Innovations - logo size
   Corpiva's default caps the logo at max-height: 4rem, which was too small
   inside the navy header wedge. Bumped up so the logo fills more of that
   space; width: auto keeps it proportional instead of stretching.
   ========================================================================== */
.site--logo img {
    max-height: 9rem;
    width: auto;
}

/* Safety net for narrow browsers: .site--logo's own width shrinks with
   its grid column (a percentage of the page width), but the logo image
   above keeps a fixed 9rem height regardless - so on a narrow enough
   window the image can end up wider than the shrinking navy box. Since
   .site--logo itself can't have overflow:hidden (its ::before/::after
   wedge effects are deliberately positioned outside its own box - see
   the "Header Six" section above), it's set here instead on
   .site--logo-inner, the plain wrapper directly around just the <img>,
   so if that does happen the logo's edges are clipped at the navy
   box's boundary rather than visibly spilling past it onto the white
   background beyond. */
.site--logo-inner {
    overflow: hidden;
    max-width: 100%;
    padding-left: 1.5rem;
    /* Fixes a stray 1px vertical line right where this clip boundary
       meets .site--logo::after's diagonal clip-path cut. Both are
       geometrically flush, but some browsers paint overflow:hidden and
       clip-path in separate compositing layers, leaving a hairline seam
       between them instead of blending cleanly. Forcing this onto its
       own GPU layer resolves the two into one paint pass. */
    transform: translateZ(0);
}

/* ==========================================================================
   Maxwell Innovations - header topbar strip
   Desktop layout/colors come from Corpiva's own grid + widget--left /
   widget--right classes scoped under .header--six .dt_header-topbar (see
   corvine_site_topbar() in functions.php and the "Header Six" block above)
   - .dt-col-3 (icons) + .dt-col-9 (email) is the same split the nav row
   uses for .site--logo.

   corvine_site_topbar() is also reused for the mobile slide-out menu's
   topbar, but there it renders inside .dt_mobilenav-topbar instead of
   .dt_header-topbar, so none of those .header--six-scoped rules reach it.
   .dt_mobilenav already has a navy background of its own, so this just
   makes sure the icons/email read correctly against it (no wedge - that's
   a desktop-only effect) and centers the two columns since they no longer
   need to line up with anything else on a stacked mobile menu.
   ========================================================================== */
.dt_mobilenav-topbar .widget--left,
.dt_mobilenav-topbar .widget--right {
    justify-content: center;
    color: #fff;
}

/* ==========================================================================
   Maxwell Innovations - "What We Offer at Maxwell" grid row spacing
   Corpiva's .dt-g-5 utility class sets both --dt-gutter-x and
   --dt-gutter-y to 4.8rem (themes.css), which becomes the vertical gap
   between wrapped rows of cards here via .dt-row's negative-margin
   gutter system. Scoped to just this section's .dt-row.dt-g-5 (not a
   bare .dt-g-5 override) so no other .dt-g-5 grid elsewhere on the site
   is affected - only the row-to-row gap shrinks; the gap between
   columns in the same row (--dt-gutter-x) is untouched. */
.dt_posts.dt-py-default .dt-row.dt-g-5 {
    --dt-gutter-y: 2.4rem;
}

.dt_mobilenav-topbar .contact__list i,
.dt_mobilenav-topbar .contact__body a,
.dt_mobilenav-topbar .contact__body span {
    color: #fff;
}