/* DalTech theme overrides
 * OrchardCore-specific markup fixes that must win over main.css.
 * Loaded LAST via the "DalTech" style resource (depends on DalTech-style).
 */

/* OC renders a LandingPage's FlowPart inside <section class="flow">. DalTech's
 * CSS applies large section-padding to every <section>, which pushes the hero
 * down and breaks a transparent/overlay header. Zero it out for the FlowPart
 * wrapper. (See SolariaTheme/CLAUDE.md gotcha #6.) */
section.flow {
    padding: 0;
}

/* Header logo: the DalTech header (.header-section-1) is solid white in BOTH its
 * normal and sticky states (background-color: var(--white)), so always show the
 * DARK logo — matching the template's single dark logo.svg. The earlier white/dark
 * swap assumed a transparent-over-hero header this theme doesn't use, which left the
 * white logo (white-logo.svg is fill="white") rendering white-on-white and invisible. */
.header-1 .logo-white,
#header-sticky.sticky .logo-white { display: none; }
.header-1 .logo-dark,
#header-sticky.sticky .logo-dark { display: inline-block; }

/* Logo sizing: cap the header + footer logo height so a non-SVG client logo (e.g. ITM's
 * square raster mark) renders at a sensible size instead of its full intrinsic dimensions.
 * Wide/SVG logos already under the cap are unaffected (max-height only shrinks). */
.header-logo img { max-height: 52px; width: auto; }
.footer-section .single-footer-widget .widget-head img { max-height: 60px; width: auto; }

/* Feature-card icon: keep it a perfect circle. The .icon is a flex item inside
 * .single-feature-items (flex row); main.css sets width/height:100px but no
 * flex-shrink, so when the CMS card text wraps wider than the template's hard-
 * <br> copy, the flex row squishes the icon's width (~70px) into an oval.
 * flex-shrink:0 pins it to its 100px box regardless of the heading length. */
.single-feature-items .icon { flex-shrink: 0; }

/* Search overlay: main.css ships .search-wrap as display:none with no open state
 * (the React build toggled inline display). daltech-init.js toggles .open, so
 * map that to display:block. */
.search-wrap.open { display: block; }

/* Service grid (not carousel): flex column so the image strip is always pinned
 * to the bottom of each card cell, keeping it aligned across cards in the same
 * row even when description text lengths differ. Scoped to .row so the slick
 * carousel (.service-carousel-active > .service-card-items) is unaffected. */
.row .service-card-items {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.row .service-card-items .service-content {
    flex: 1;
}
.row .service-card-items .service-image {
    height: 200px;
    flex-shrink: 0;
}

/* Service detail page: full-width img (w-100) on a landscape photo looks like a
 * banner. Cap height and keep the crop centred. */
.service-details-items .details-image img {
    max-height: 420px;
    object-fit: cover;
    object-position: center;
}

/* M2+: add chrome fixes here (mobile meanmenu container, etc.). */