/* 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;
}

/* DB-274 responsive: main.css sets `overflow-x:hidden` on <body> only. On mobile
 * that isn't enough — the root <html> remains the horizontal scroller, so the
 * template's decorative shapes (and any full-bleed section) that intentionally
 * spill past the viewport edge cause sideways scrolling. Clip on the root too
 * and cap widths so nothing forces the page wider than the screen. */
html,
body {
    overflow-x: hidden;
    max-width: 100%;
}

/* 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: 98px; width: auto; }
.footer-section .single-footer-widget .widget-head img { max-height: 120px; 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.). */

/* DB-274: mobile nav open/close.
 * main.css forces `.mean-container .mean-nav>ul { display:block!important }`
 * (a leftover from the template's un-ported offcanvas panel), which overrides
 * the inline `display:none` meanmenu's slide-up sets on the <ul> — so the menu
 * can't be hidden by toggling the list's display. Instead we hide the whole
 * `.mean-nav` container (not the <ul>) and let daltech-init.js slideDown/slideUp
 * it — a content-height animation, so no max-height jank. Hidden by default; the
 * hamburger tap slides it open. */
/* meanmenu's .mean-bar is position:relative, which would anchor the drawer to
   that tiny bar inside the header's flex row. Neutralise it so the drawer anchors
   to .header-section-1 (position:relative) instead and can drop below the header. */
.mean-container .mean-bar {
    position: static;
}

/* The drawer is an absolute panel that drops BELOW the header (top:100%), so
   opening it doesn't stretch the header row or move the logo/hamburger — the
   hamburger stays put and tappable. Hidden by default; daltech-init.js
   slideDown/slideUp animates it to its real content height (no max-height jank). */
.mean-container .mean-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    background: var(--white, #fff);
    border-top: 1px solid #eee;
    box-shadow: 0 12px 28px rgba(0, 0, 0, .10);
    max-height: 80vh;      /* long menus scroll inside the panel, not off-screen */
    overflow-y: auto;
    padding: 6px 24px 16px;
}

/* Submenu expanders (Services/Projects/Pages/Blog on mobile). The theme's Font
   Awesome renders fa-plus/fa-xmark blank, so the FA-icon expander looked missing
   and sub-menus couldn't be opened. meanmenu is configured with EMPTY expander
   content (daltech-init.js); we draw the +/- here with CSS so it can never render
   blank. meanmenu toggles `.mean-clicked` on the expander when the sub-menu opens,
   which flips the glyph to a minus. */
.mean-container .mean-nav .mean-expand::after {
    content: "+";
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--header, #1a1830);
}

.mean-container .mean-nav .mean-expand.mean-clicked::after {
    content: "\2212"; /* minus sign */
}

/* DB-367. Careers layout: the project card's circular "+" becomes a labelled Apply
   link, so the affordance reads as "apply for this job" rather than "enlarge image".
   .icon is sized for a single glyph in main.css, so widen it and drop the fixed
   width; everything else (position, colour, hover) is inherited from .project-image .icon. */
.project-image .apply-icon {
    width: auto;
    min-width: 0;
    padding: 0 22px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 600;
    line-height: 50px;
    white-space: nowrap;
    text-align: center;
}

/* DB-367. Chip multi-select — see daltech-init.js section 14. The markup is built
   client-side over an authored checkbox group, so these rules only ever apply
   after the upgrade runs; without JS the plain checkboxes render untouched. */
.chipbox {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 7px 8px;
    border: 1px solid #d5dbe4;
    border-radius: 6px;
    background: #fff;
    cursor: text;
}

.chipbox .chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 4px 3px 10px;
    border-radius: 4px;
    background: #eef3fd;
    color: #14448f;
    font-size: 14px;
    line-height: 1.4;
}

.chipbox .chip-remove {
    padding: 2px 5px;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: inherit;
    line-height: 1;
    cursor: pointer;
    opacity: .65;
}

.chipbox .chip-remove:hover { opacity: 1; background: rgba(20, 68, 143, .14); }

.chipbox .chipbox-input {
    flex: 1 1 140px;
    min-width: 140px;
    padding: 4px 2px;
    border: 0;
    outline: 0;
    background: transparent;
}

.chip-suggests { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.chip-suggest {
    padding: 3px 9px;
    border: 1px dashed #d5dbe4;
    border-radius: 4px;
    background: transparent;
    color: #5a6577;
    font-size: 13px;
    cursor: pointer;
}

.chip-suggest:hover { border-style: solid; border-color: #14448f; color: #14448f; }

/* DB-367. The job application form is an OrchardCore Form widget dropped straight into a
   LandingPage FlowPart, so it arrives with no section wrapper and no field styling at all.
   Scoped to the form's own id (set by careers-apply.recipe.json) so nothing here can reach
   the contact form, which gets its container from Widget-ContactWidget.liquid instead. */
#job-application-form {
    max-width: 860px;
    margin: 70px auto 90px;
    padding: 0 20px;
}

#job-application-form .form-group,
#job-application-form > .row > div {
    margin-bottom: 20px;
}

#job-application-form label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1a1830;
}

#job-application-form input[type="text"],
#job-application-form input[type="email"],
#job-application-form input[type="tel"],
#job-application-form input[type="url"],
#job-application-form input[type="date"],
#job-application-form input[type="file"],
#job-application-form select,
#job-application-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid #d5dbe4;
    border-radius: 6px;
    font-size: 15px;
    background: #fff;
}

#job-application-form input:focus,
#job-application-form select:focus,
#job-application-form textarea:focus {
    outline: 2px solid #1657c8;
    outline-offset: 1px;
    border-color: #1657c8;
}

/* Radio and checkbox groups read as a row of choices rather than a stacked list. */
#job-application-form .form-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 18px 8px 0;
}

#job-application-form .form-check-input { margin: 0; }
#job-application-form .form-check-label { margin: 0; font-weight: 400; }

/* The consent paragraph is a label, so it must not inherit the bold short-label style. */
#job-application-form .form-check-label:only-child,
#job-application-form label[for$="consent"] {
    font-weight: 400;
    line-height: 1.55;
}

#job-application-form .validation-summary-errors,
#job-application-form .field-validation-error {
    display: block;
    margin-top: 6px;
    color: #b42318;
    font-size: 14px;
}

/* Space above the submit button so it is not crowded against the consent box — the last
   thing an applicant reads before committing should not sit flush against the button. */
#job-application-form .theme-btn,
#job-application-form [type="submit"] {
    margin-top: 24px;
}

/* The consent checkbox renders AFTER its paragraph (OrchardCore emits label then input),
   so it lands orphaned on its own line below the text. Reorder it beside the paragraph and
   give the block a surround, so it reads as one thing to agree to rather than a stray box.
   :has() is used deliberately — the markup has no class to hook; where it is unsupported
   the field simply keeps its current stacked layout, which still works. */
#job-application-form .widget-body:has(> input[name="consent"]) {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    /* Separated from the resume hint above it — without this the consent box reads as part
       of the upload field rather than as its own thing to agree to. */
    margin-top: 22px;
    background: #f4f6fa;
    border: 1px solid #e2e7ef;
    border-radius: 6px;
}

#job-application-form .widget-body:has(> input[name="consent"]) > input[name="consent"] {
    order: -1;
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 3px;
}

#job-application-form .widget-body:has(> input[name="consent"]) > label {
    flex: 1 1 auto;
    margin: 0;
    font-weight: 400;
    font-size: 14.5px;
    line-height: 1.55;
}

/* Hide the browser's "No file chosen" status text. It lives in the file input's shadow DOM
   and is only reachable through the input's own colour, which also hides the chosen
   filename — so daltech-init.js section 16 renders the filename itself instead. */
#job-application-form input[type="file"] {
    color: transparent;
}

#job-application-form input[type="file"]::file-selector-button {
    margin-right: 14px;
    padding: 8px 16px;
    border: 1px solid #d5dbe4;
    border-radius: 6px;
    background: #f4f6fa;
    color: #1a1830;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#job-application-form input[type="file"]::file-selector-button:hover {
    border-color: #1657c8;
    color: #1657c8;
}

#job-application-form .daltech-file-name {
    margin-top: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0a7350;
}

/* Required-field asterisk, added by daltech-init.js section 17 from the rendered
   "required" attribute. aria-hidden on the span: screen readers already announce the
   field as required, so voicing "star" as well is noise. */
#job-application-form .req-star {
    color: #b42318;
    font-weight: 700;
}

/* Submit gate (daltech-init.js section 18). The disabled state must look disabled —
   a greyed button that still looks clickable is worse than no gate at all. */
#job-application-form .theme-btn:disabled,
#job-application-form [type="submit"]:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: grayscale(100%);
}



/* Phone country-code combo (daltech-init.js section 19). Built as one control: the select
   and the input share a border so they read as a single field, the way the design shows. */
#job-application-form .phone-combo {
    display: flex;
    align-items: stretch;
    border: 1px solid #d5dbe4;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

#job-application-form .phone-combo:focus-within {
    outline: 2px solid #1657c8;
    outline-offset: 1px;
    border-color: #1657c8;
}

#job-application-form .phone-combo .phone-code {
    width: auto;
    flex: none;
    border: 0;
    border-right: 1px solid #e2e7ef;
    border-radius: 0;
    background: #f4f6fa;
    padding: 11px 10px;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

#job-application-form .phone-combo input[type="tel"] {
    flex: 1 1 auto;
    border: 0;
    border-radius: 0;
    outline: 0;
}

#job-application-form .phone-combo .phone-code:focus,
#job-application-form .phone-combo input[type="tel"]:focus {
    outline: 0;
}


/* Apply page heading (careers-apply.recipe.json, HtmlWidget above the form). Matched to the
   form's own column so the title, subtitle and first field share one left edge — the
   HtmlWidget renders in the theme's wide Bootstrap container, which would otherwise start
   the heading well left of the form. */
.apply-intro {
    max-width: 860px;
    margin: 0 auto;
    padding: 70px 20px 0;
}

.apply-intro h1 {
    margin: 0 0 8px;
    font-size: 34px;
    line-height: 1.2;
}

.apply-intro p {
    margin: 0;
    font-size: 16px;
    color: #4a5768;
}

/* The form supplies the gap below the heading, so drop its own top margin. */
.apply-intro + * #job-application-form,
#job-application-form {
    margin-top: 26px;
}

/* The HtmlWidget carrying the heading renders inside .html-section, which has the theme's
   full section-padding — that bottom padding is what leaves a large gap between the
   subtitle and the first field. The form supplies its own spacing, so drop it. */
.html-section:has(.apply-intro) {
    padding-bottom: 0;
}

.html-section:has(.apply-intro) .container {
    padding-bottom: 0;
}

/* Helper text under a field (daltech-init.js section 20). OrchardCore form elements have a
   placeholder but no hint, so these are rendered client-side. */
#job-application-form .field-hint {
    margin-top: 6px;
    font-size: 13.5px;
    line-height: 1.5;
    color: #78849a;
}

/* A locked Position field (daltech-init.js section 15): it reads as a confirmation of the
   role applied for, not as something to fill in, so it is flatter than an editable input
   and shows the not-allowed cursor. */
#job-application-form input.is-locked {
    background: #f4f6fa;
    color: #4a5768;
    cursor: not-allowed;
}

/* ---------------------------------------------------------------------------
   FAQs footer link — hidden, not deleted.

   The item is still seeded in itm.recipe.json (footer-menu > LinkMenuItem "FAQs",
   ContentItemId 4tsm989n4k55w3tpmyqa5h0gw7) so the page can be built later and the
   link brought back by deleting this rule alone. Right now ~/faq has no content
   item and no AutoroutePartIndex row, so the link 404s.

   Scoped to body.itm-site so a DalTech tenant that does have an FAQ page keeps its
   link. display:none also takes it out of the tab order, not just out of sight.
   --------------------------------------------------------------------------- */
body.itm-site .footer-menu li:has(> a[href$="/faq"]) {
    display: none !important;
}