/* ==========================================================================
   ef-marketing.css
   The three public marketing pages: Home/Features, Home/Integration,
   Home/Contact.

   WHY THIS FILE EXISTS
   Those three views used to be complete standalone XHTML documents that
   _ViewStart nested inside _Layout, and they styled themselves with classes
   (.title30, .text14, .bg-features, .bg-45per-gray, .bg-solutions) that live
   ONLY in wwwroot/css/styles.css - a file _Layout has never loaded. The only
   references to styles.css anywhere in the Views tree were inside
   commented-out @section head blocks. So those pages rendered with no styling
   at all for as long as the application has been on ASP.NET Core.

   Rather than wire up the 12KB legacy styles.css (most of which targets markup
   that no longer exists), the three rewritten views share this file.

   WHY IT IS NOT LINKED FROM _Layout
   ef-layout.css is in _Layout because every page needs the sticky footer.
   Nothing here is needed by the ~40 authenticated application pages, so each
   marketing view pulls this file in itself through @section head. _Layout
   already renders that section - see @RenderSection("head", required: false).

   LOAD ORDER
   @section head renders at the END of <head>, after screen.css, so these rules
   win over screen.css on equal specificity without needing !important.

   COLOURS - all taken from the existing design, none invented:
     #bb234a  brand crimson       styles.css .title30 / .title24 / .title36
     #a0002a  brand crimson dark  screen.css nav.ef-top-nav a:hover
     #666666  body copy           styles.css .text14
     #333333  feature headings
     #e8e8e8  hairline rules      Contact.cshtml's original <hr color>
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Page shell
   --------------------------------------------------------------------------
   #ef-body-container already carries .container from _Layout, which screen.css
   sizes at width:950px with auto margins. So these pages are handed a 950px
   column and do not create their own.

   .ef-mkt only sets vertical rhythm. Note the padding-bottom: ef-layout.css
   grows #ef-body-container to push the footer down, so without this the last
   feature row can sit flush against the footer on a tall window.
   -------------------------------------------------------------------------- */
.ef-mkt {
    padding: 30px 0 50px;
    text-align: left;
}

/* The legacy pages wrapped everything in <center>, which inherited
   text-align:center into every descendant. Nothing does that any more, but
   screen.css still applies its own alignment to some elements, so the headings
   and copy below are explicit about it. */


/* --------------------------------------------------------------------------
   2. Headings
   --------------------------------------------------------------------------
   Titillium Web at weight 300 is the face styles.css always specified for
   .title30 / .title36. It was never actually loaded - no view links it from
   Google Fonts - so those headings silently fell back to Helvetica. The three
   marketing views now request the font explicitly in their @section head, and
   the stack below still degrades sensibly if it fails to load.
   -------------------------------------------------------------------------- */
.ef-mkt-title {
    font-family: 'Titillium Web', 'Segoe UI', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 30px;
    line-height: 32px;
    color: #bb234a;
    margin: 0 0 10px;
    padding: 0;
    letter-spacing: 0;
    text-align: left;
    text-transform: uppercase;
}

.ef-mkt-rule {
    border: 0;
    border-top: 1px solid #e8e8e8;
    margin: 0 0 26px;
    padding: 0;
    width: 100%;
}

/* Standfirst under the page title. Slightly larger than body copy and capped
   at 68 characters so the line length stays readable inside the 950px column
   instead of running the full width. */
.ef-mkt-lede {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 23px;
    color: #666666;
    margin: 0 0 34px;
    max-width: 68ch;
    text-align: left;
}


/* --------------------------------------------------------------------------
   3. Feature rows (Features page)
   --------------------------------------------------------------------------
   The original used a Dreamweaver layout table with hand-measured spacer rows
   ("<td height=56>") to separate the eight features. Any copy edit that
   changed a paragraph's height broke that spacing, which is why the old page
   drifted out of alignment.

   A two-column grid replaces it: a fixed icon gutter and a flexible text
   column, with row spacing from `gap`. The rows now space themselves whatever
   the copy does.

   IMPORTANT - screen.css puts `float:left` on .column and every .span-*
   class. Grid and flex items ignore float, but these are plain divs with our
   own class names, so no float is inherited here in the first place.
   -------------------------------------------------------------------------- */
.ef-mkt-features {
    display: grid;
    grid-template-columns: 58px 1fr;
    column-gap: 22px;
    row-gap: 26px;
    align-items: start;
    max-width: 780px;
}

.ef-mkt-icon {
    color: #bb234a;
    padding-top: 2px;
}

/* stroke:currentColor lets the single set of icon paths in _FeatureIcon.cshtml
   serve both the white-on-dark application nav and this crimson-on-white page.
   The stroke-* properties match _Layout's a.ef-nav-btn svg rule so the shapes
   render identically in both places. */
.ef-mkt-icon svg {
    display: block;
    width: 38px;
    height: 38px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    overflow: visible;
}

.ef-mkt-feature h2 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 5px;
    padding: 0;
    line-height: 20px;
    text-align: left;
}

.ef-mkt-feature p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    margin: 0;
    padding: 0;
    text-align: left;
}


/* --------------------------------------------------------------------------
   4. Prose and lists (Integrated Solutions page)
   -------------------------------------------------------------------------- */
.ef-mkt-prose {
    max-width: 640px;
}

.ef-mkt-prose p {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    margin: 0 0 16px;
    text-align: left;
}

.ef-mkt-prose p:last-child {
    margin-bottom: 0;
}

/* Opening line on Integrated Solutions. One step up from body copy so the page
   leads with its proposition rather than with a bulleted list. Not a heading -
   it is a sentence, so it must not be marked up as one.

   SELECTOR SPECIFICITY MATTERS HERE. A bare ".ef-mkt-standout" scores 0,1,0
   and LOSES to ".ef-mkt-prose p" above it, which scores 0,1,1 - the class plus
   the type selector. Written that way the font-size and colour below silently
   did nothing. Qualifying it with the parent class takes it to 0,2,1 so it
   wins on merit rather than on source order. */
.ef-mkt-prose p.ef-mkt-standout {
    font-size: 16px;
    line-height: 24px;
    color: #333333;
    margin: 0 0 20px;
}

/* Links in marketing prose. Nothing in the loaded stylesheets styles <a> in
   the page body, so these were rendering in the browser default blue
   (#0000EE) - jarring next to the crimson. styles.css did define ".text14 a"
   in this colour, but that file is never loaded; this is the replacement.

   The underline is kept rather than removed. screen.css strips underlines from
   the chrome navigation, which is right for a button bar, but an inline link in
   a sentence needs a second visual cue besides colour - otherwise it is
   invisible to a reader who cannot distinguish crimson from grey. */
.ef-mkt-prose a:link,
.ef-mkt-prose a:visited,
.ef-mkt-list a:link,
.ef-mkt-list a:visited {
    color: #bb234a;
    text-decoration: underline;
}

.ef-mkt-prose a:hover,
.ef-mkt-prose a:active,
.ef-mkt-list a:hover,
.ef-mkt-list a:active {
    color: #a0002a;
    text-decoration: underline;
}

.ef-mkt-prose a:focus-visible,
.ef-mkt-list a:focus-visible {
    outline: 2px solid #bb234a;
    outline-offset: 2px;
}

/* screen.css line ~130 zeroes list padding globally as part of its reset, so
   the indent has to be restored here or the bullets sit outside the text. */
.ef-mkt-list {
    margin: 0 0 20px;
    padding-left: 22px;
    list-style: disc outside;
}

.ef-mkt-list li {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #666666;
    margin: 0 0 9px;
    padding: 0;
    text-align: left;
}

.ef-mkt-list li::marker {
    color: #bb234a;
}


/* --------------------------------------------------------------------------
   5. Lead form (Contact page)
   --------------------------------------------------------------------------
   The form still posts to the same Salesforce Web-to-Lead endpoint with the
   same field names - see the comment block in Contact.cshtml. Only the
   presentation is new: the original used <br /> tags between every label and
   input and an <input type="image"> for submit.
   -------------------------------------------------------------------------- */
.ef-mkt-form {
    max-width: 380px;
}

.ef-mkt-field {
    margin: 0 0 16px;
}

.ef-mkt-field label {
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    color: #333333;
    margin: 0 0 4px;
    text-align: left;
}

/* The .req marker is decorative - aria-hidden in the markup - because each
   required control already carries the `required` attribute, which is what
   assistive technology actually announces. */
.ef-mkt-field .req {
    color: #bb234a;
    font-weight: normal;
}

.ef-mkt-field input,
.ef-mkt-field select {
    display: block;
    width: 100%;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: #333333;
    padding: 7px 9px;
    border: 1px solid #cccccc;
    border-radius: 3px;
    background: #ffffff;
}

.ef-mkt-field input:focus,
.ef-mkt-field select:focus {
    outline: 2px solid #bb234a;
    outline-offset: 1px;
    border-color: #bb234a;
}

/* :invalid alone would flag every empty required field on first paint, before
   the visitor has typed anything. :user-invalid only matches after the control
   has been interacted with or a submit was attempted, which is the behaviour
   the old alert() dialog had. */
.ef-mkt-field input:user-invalid,
.ef-mkt-field select:user-invalid {
    border-color: #a0002a;
    background: #fdf6f7;
}

.ef-mkt-note {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    line-height: 17px;
    color: #888888;
    margin: 0 0 20px;
    text-align: left;
}

.ef-mkt-submit {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: bold;
    color: #ffffff;
    background: #bb234a;
    border: 0;
    border-radius: 4px;
    padding: 11px 30px;
    cursor: pointer;
    transition: background-color 0.15s;
}

.ef-mkt-submit:hover,
.ef-mkt-submit:focus {
    background: #a0002a;
}

.ef-mkt-submit:focus-visible {
    outline: 2px solid #333333;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ef-mkt-submit { transition: none; }
}


/* --------------------------------------------------------------------------
   6. Making these three pages work on a phone
   --------------------------------------------------------------------------
   THE PROBLEM, MEASURED
   _Layout declares no <meta name="viewport">. Without one a mobile browser
   assumes a ~980px desktop layout viewport and scales the whole page down to
   fit the screen. Measured in headless Chromium at a 390px iPhone viewport
   BEFORE this section existed:

       layout viewport   980px
       visual scale      0.398
       14px body copy    ~5.6 effective px

   i.e. legible only by pinch-zooming. That did not matter while every page was
   behind a login on an office desktop. It matters now that Features, Contact
   and Integration are public and prospects reach them from phones and email.

   THE FIX IS IN THREE PARTS - all three are needed, none is optional:
     1. each of the three views emits the viewport meta in its @section head
     2. each sets ViewBag.BodyClass = "ef-marketing-page", which _Layout renders
        onto <body> (the same mechanism the AG Grid pages use for
        "ef-viewport-lock")
     3. the rules below, every one scoped to body.ef-marketing-page

   WHY SCOPED RATHER THAN PUT IN _Layout
   A viewport meta in _Layout would reach all ~40 authenticated pages. The four
   AG Grid pages are built around a fixed 950px .container; with a real viewport
   they would be CLIPPED on a narrow screen instead of scaled to fit, which is
   worse than today. Making the whole site responsive is its own piece of work.

   The container rule is unconditional - at 950px and wider "width:auto;
   max-width:950px" behaves exactly as screen.css's "width:950px" did, and below
   950px it shrinks instead of overflowing. The header rules are inside the
   media query so desktop rendering is provably unchanged.
   -------------------------------------------------------------------------- */

/* screen.css:98 sets .container{width:950px} - a hard width that cannot shrink.
   #ef-body-container carries that class, so on a 390px screen the page was
   951px wide and scrolled sideways. Overriding width (not max-width) is what
   releases it. */
body.ef-marketing-page #ef-body-container.container {
    width: auto;
    max-width: 950px;
    padding-left: 16px;
    padding-right: 16px;
    box-sizing: border-box;
}

@media (max-width: 760px) {

    /* Two FIXED HEIGHTS in screen.css both have to be released, and missing
       either one puts the wrapped nav on top of the page heading:
           screen.css:436  div#headernavcontainer       { height: 80px }
           screen.css:868  div#headernavcontainer > div { height: 61px }
       Found the hard way - the first attempt released only the outer one and
       the nav still overflowed, because the inner flex row was still pinned to
       61px while its wrapped content needed 162px. */
    body.ef-marketing-page div#headernavcontainer {
        height: auto;
    }
    body.ef-marketing-page div#headernavcontainer > div {
        height: auto;
        flex-wrap: wrap;
        row-gap: 6px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* The four nav links plus the 182px logo cannot fit on one phone row, so
       the row is allowed to wrap. height:auto replaces the fixed 44px from
       screen.css:830, which would otherwise clip the second row. */
    body.ef-marketing-page nav.ef-top-nav {
        flex-wrap: wrap;
        height: auto;
        padding: 4px 6px;
    }
    body.ef-marketing-page nav.ef-top-nav a {
        height: 36px;
        padding: 0 14px;
    }

    /* Keep the icon gutter from eating the text column. Same breakpoint as the
       header rules above deliberately - two breakpoints 60px apart would
       restyle the nav and the content at different widths. */
    .ef-mkt-features {
        grid-template-columns: 42px 1fr;
        column-gap: 14px;
    }
    .ef-mkt-icon svg {
        width: 30px;
        height: 30px;
    }
}