/* Hand-written overrides for the site shell. Loaded on EVERY page, right after the generated
   shell-om.css. Shell fixes must live here, not in design-om-extras.css, which only loads on
   pages using the OM page design. */

/* .om-mega-menu is a fixed 212px tall, sized for a description under each item. Production's
   descriptions are Lorem Ipsum so they were left blank; until real copy lands, collapse the
   panel instead of showing a large void. Remove this once descriptions are written. */
.om-mega-menu.om-mega-menu--nodesc{height:auto;padding-bottom:30px}

/* ---- Mobile drawer -------------------------------------------------------------------------
   The generated rule is `position:absolute; left:50%; width:320px; transform:translateX(-50%)`,
   which is a centred 320px panel. At a 390px viewport that leaves a ~35px gutter down each side
   showing the page underneath -- the logo appeared to the left of the drawer and the hamburger
   to the right of it -- and because the panel is only min-height:536px the hero showed below it
   too. It read as a broken overlay rather than a drawer.

   Fixed rather than absolute so it keeps covering the page if the drawer is opened after a
   scroll; dvh where supported, because 100vh on mobile Safari is taller than the visible area. */
@media (max-width: 767px) {
    .om-mobile-menu {
        position: fixed;
        inset: 0;
        width: auto;
        max-width: none;
        height: 100vh;
        height: 100dvh;
        min-height: 0;
        transform: none;
        border-radius: 0;
        padding: 0 20px;
        overflow-y: auto;
    }
}

/* ---- Mega menu ----------------------------------------------------------------------------
   "BNTouch White Glove Service" wraps to two lines while its three siblings fit on one, so its
   "Read more" sat a line lower than the rest. Push the link to the bottom of each column so the
   row of links aligns regardless of how the title wraps. */
.om-mega-item {
    display: flex;
    flex-direction: column;
}
.om-mega-item .om-mega-more {
    margin-top: auto;
}

/* ---- Header type: Opportunity Mining is the reference --------------------------------------
   The shell was pinned to Arial to match the live OM page, which loads NO webfont -- no Google
   Fonts link, no @font-face -- so its stack `'Open Sans', Arial, sans-serif` resolves to Arial.
   We self-host Open Sans, and at the same weight its larger x-height and thicker stems read as
   bold beside that reference.

   That pin is gone: the site standardises on Open Sans (Yuri, 2026-09-18). The reference being
   matched is a page this redesign replaces, so matching it was always a temporary constraint,
   and a self-hosted face renders the same for every visitor where a system font is a guess about
   their machine -- which is what produced two headings in visibly different fonts on the CRM
   page. The shell now inherits 'Open Sans' from shell-om.css, which always asked for it.

   Expect the shell to read very slightly heavier than the OM reference. That is the x-height
   difference described above, not a weight bug: three earlier attempts to fix it by changing
   font-weight failed for exactly that reason. If it needs tuning, tune it here in weight, not by
   reaching back for Arial. */

/* The demo button is left at OM's own values: #f9b233 on #052e5f, 117x42, 4px radius.
   An override here previously pushed it to the CRM comp's brand orange with white text at
   115x38. Reverted -- OM is the reference for the shell, and the comp PDFs only govern the
   page bodies they describe. */

/* ==========================================================================================
   Footer link tap targets on mobile.

   The generated sheet sets .om-footer-column a to line-height:27px below 768px. Thirteen links
   stacked at 27px with no gap, on a phone, is a mis-tap every time: WCAG 2.5.8 wants 24px
   minimum and the platform guidance for a thumb is 44. 27 passes the letter and fails the
   thumb.

   The fix is padding rather than line-height, so the text keeps its own leading and only the
   hit area grows. The negative inline margin puts the enlarged box back on the column's left
   edge -- the padding would otherwise indent every link by 12px.
   ========================================================================================== */
@media (max-width: 767px) {
    .om-site-footer .om-footer-column a {
        min-height: 44px;
        display: flex;
        align-items: center;
        padding: 0 12px;
        margin: 0 -12px;
        line-height: 20px;
    }
    /* The legal links sit inline after the copyright line, so they cannot be boxed the same way
       without breaking the sentence. Padding on the vertical axis only. */
    .om-site-footer .om-footer-bottom a {
        display: inline-block;
        padding: 12px 4px;
        /* Negative on the inline axis too, or the padding indents the link when it wraps onto
           its own line under the copyright. */
        margin: -12px -4px;
    }
}

/* ==========================================================================================
   Second nav panel: a plain list, for a parent that is not Products.

   .om-mega-menu is a 1110px-wide, 212px-high, four-column grid built for four product cards with
   icons and descriptions. Company is six text links; in that grid they sit in a near-empty band
   the width of the page. The --list variant keeps the panel mechanics (absolute, hidden, same
   shadow and radius) and replaces the geometry with a column that fits its contents.

   It anchors under its own trigger rather than centring on the page, so the panel points at the
   word that opened it. That `left` is measured in shell.js: the panel is a child of <header>,
   not of the nav item, so CSS cannot know where a trigger sits in a flex row whose widths come
   from the menu labels -- and a hardcoded offset works until someone renames an item.
   ========================================================================================== */
.om-mega-menu.om-mega-menu--list {
    left: auto;
    width: max-content;
    min-width: 220px;
    height: auto;
    transform: none;
    padding: 14px 0;
    border-radius: 0 0 7px 7px;
}
.om-mega-menu.om-mega-menu--list:not([hidden]) { display: block; }
.om-mega-menu--list a {
    display: block;
    padding: 9px 26px;
    color: #172d49;
    font-size: 15px;
    line-height: 1.3;
    text-decoration: none;
    white-space: nowrap;
}
.om-mega-menu--list a:hover { background: #f6f7f9; color: #032d60; }


/* The footer grid is left exactly as generated: four fixed tracks, 256px 255px 255px 1fr. With
   the Customers column gone the fourth track is simply empty, and Company slides up into the
   slot Customers held -- which keeps the 285px rhythm the comp set and leaves Products where it
   has always been.
   
   Two overrides were tried here and both are worse. `256px repeat(auto-fit, 1fr)` let the two
   remaining link columns split the leftover width, so the steps came out 428px and 639px.
   `repeat(auto-fit, 1fr)` across every column evened those out at 379px but moved Products right
   as well, which is not what was asked for: the request was to move Company the same way, not to
   redistribute the row. */

/* The address block is a widget, so it renders <p> elements. The generated sheet sizes
   `.om-footer-brand address` and direct-child links -- neither of which a block widget emits --
   so the contact lines fell through to the body's 16px and sat a size larger than every link
   beside them. Same 14px/20px as the columns. */
.om-site-footer .om-footer-brand p {
    margin: 0 0 13px;
    color: #4d5660;
    font-size: 14px;
    line-height: 20px;
}
.om-site-footer .om-footer-brand p:last-child { margin-bottom: 0; }

/* ==========================================================================================
   The dropdown trigger became a link, and a link is not a button.

   .om-products-trigger is 80px tall so its bottom border draws the full height of the header. A
   <button> centres its label in that box for free; an <a> does not -- the text sits at the top,
   so "Products" and "Company" rode up against the top edge of the header while "Pricing", which
   has always been a plain link with no height, stayed centred. That is the broken header Yuri
   photographed on the homepage.

   inline-flex rather than line-height:80px: the label has to stay on one line and centre without
   the border-bottom moving with it.
   ========================================================================================== */
.om-site-nav a.om-products-trigger {
    display: inline-flex;
    align-items: center;
}

/* The homepage's generated sheet carries `nav a { font-size: 13px; font-weight: 700 }` from the
   comp's own header, which the shell's `.om-site-nav a` outscores on size but not on weight --
   it never set one. So the homepage nav has always been bold while every other page's was not,
   and turning the two triggers into links made all three bold instead of one. Weight is stated
   here so the comp's rule cannot reach it. */
.om-site-nav a,
.om-site-nav a.om-products-trigger { font-weight: 400; }

/* ==========================================================================================
   Mega-menu cards: the whole card is the link.

   The "Read more ->" anchor is gone from the markup. It pointed at the same page as the heading
   above it, so the panel offered eight targets for four destinations and a screen reader heard
   "Read more" four times with no way to tell them apart.

   The heading's own anchor is stretched over the card with a pseudo-element, which keeps the
   accessible name as the product title and needs no extra element. Nothing moves and nothing
   resizes: the geometry below is hover feedback only.
   ========================================================================================== */
/* Padding with matching negative margins: the tint gets even breathing room on all four sides
   while the text stays exactly where the comp put it and the grid cell keeps its size. Tinting
   the bare cell instead put the grey hard against the icon and the first line of copy on two
   sides and left a wide margin on the other two, which is what read as broken. */
/* Three arrangements were tried here; this is the one with the fewest faults, and the two
   rejected ones are worth knowing so they are not tried again:
   
   - Cells sized to their own content (align-items:start) gives four highlight boxes of four
     different heights, so the grey jumps in size as the pointer crosses the panel.
   - Content centred in a stretched cell (justify-content:center) pushes a two-line heading in a
     short card below a one-line heading in a tall one, so the four headings stop sharing a line.
   - Stretched cells, content at the top: boxes are identical, headings are level, and the only
     cost is some empty space under whichever card has the shortest description.
   
   That last cost is a copy-length difference, not a layout fault -- Opportunity Mining runs two
   lines against Mortgage AI's four. Evening up the four descriptions closes it; no CSS can. */
/* The panel is a fixed 212px in the generated sheet, which leaves the grid row taller than its
   tallest card and puts dead space inside every highlight box, under even the longest
   description. Height released so the row hugs the tallest content; the panel then sizes itself
   and the boxes end where the copy does. */
.om-mega-menu { height: auto; }
/* The description's 12px bottom margin was the gap to the "Read more" link. That link is gone,
   so the margin is just dead space at the foot of every card -- and it sets the row height, so
   it showed up inside the highlight box under even the longest description. */
.om-mega-menu .om-mega-item p { margin-bottom: 0; }
.om-mega-menu .om-mega-item {
    position: relative;
    padding: 12px 16px 10px;
    margin: -12px -16px -10px;
    border-radius: 10px;
    transition: background-color .15s ease;
}
/* The hit area is the tinted box, to the pixel. Anything else and the card highlights without
   being clickable, or the reverse. */
.om-mega-heading a::after {
    content: '';
    position: absolute;
    inset: 0;
}
.om-mega-menu .om-mega-item:hover { background: #f6f7f9; }
.om-mega-menu .om-mega-item:hover .om-mega-heading a { color: #032d60 !important; }
/* The icon is the only thing that moves, and only slightly: the panel is a menu, not a page. */
.om-mega-heading span { transition: transform .15s ease; }
.om-mega-menu .om-mega-item:hover .om-mega-heading span { transform: translateX(2px); }
/* Keyboard users get the same card, outlined rather than tinted. */
.om-mega-menu .om-mega-item:focus-within { background: #f6f7f9; outline: 2px solid #dd8210; }
.om-mega-heading a:focus-visible { outline: none; }

/* --- The header's demo button: the label sat high ---------------------------------------------
   The button is a 42px flex box centring a 20px line box, and Open Sans's em box at 16px is
   about 21.8px tall -- taller than the line it is centred in, which pushes the glyphs up. With
   a label that has no descenders ("Live Demo") the result is visible: measured at 4x, the ink
   sat 12.25px from the top and 18px from the bottom.

   The page button does not have this problem because it sets line-height to its own height, so
   nothing is being centred. Matching that here changes nothing -- the flex centring wins -- so
   this is an optical correction instead, and it is the measured 6px rather than a guess: with
   it the ink sits 15.25/15.

   box-sizing, or the padding would add to the declared 42px height. */
.om-site-actions .om-site-demo {
    box-sizing: border-box;
    padding-top: 6px;
}

/* --- Products panel: smaller, muted icons (2026-09-21) -----------------------------------------
   The panel spent a day without icons and read as four plain text blocks -- nothing anchored the
   left edge of a card. The icons are back at 18px instead of 24px and grey until the card is
   hovered, so they mark the card without competing with the product name for it.

   Grey comes from a filter, not a second set of files: these are flat orange PNGs, so
   grayscale() is the whole colour, and opacity keeps the grey off black. The hover rule is
   filter:none, which returns the original orange.

   The 38px indent under the heading was 24px of icon plus the 13px gap; at 18px it is 31px. It
   is set here rather than in shell-om.css so the base panel keeps its own geometry.

   The class and this block are a pair: drop .om-mega-menu--smicon from header.php and this rule
   together, or the descriptions hang off their heading. */
.om-mega-menu--smicon .om-mega-heading span { font-size: 18px; line-height: 18px; }
/* height, not width: the four PNGs are 25x22, 25x24, 25x24 and 28x24 -- squaring them would
   squash the first and stretch the last. Capping the height scales each on its own ratio. */
.om-mega-menu--smicon .om-mega-heading span img { height: 18px; width: auto; }
.om-mega-menu--smicon .om-mega-heading span { filter: grayscale(1) opacity(.5); transition: transform .15s ease, filter .15s ease; }
.om-mega-menu--smicon .om-mega-item:hover .om-mega-heading span,
.om-mega-menu--smicon .om-mega-item:focus-within .om-mega-heading span { filter: none; }
.om-mega-menu--smicon .om-mega-item p,
.om-mega-menu--smicon .om-mega-more { padding-left: 31px; }

/* --- The header's demo button: the same hover as every other button ----------------------------
   It had none. Every .om-btn on the site dips and lifts -- `filter: brightness(.94);
   transform: translateY(-1px)` in design-om.css -- and the header CTA, which is the most
   clicked button on the site, just sat there. It is not an .om-btn (it is a nav item the menu
   marks with a class), so it never picked the rule up, and theme.css deliberately excludes it
   from the nav's orange text hover, which left it with nothing at all.

   The values are not re-invented here: they are the .om-btn ones, read from design-om.css, so
   the two stay the same gesture. The transition is declared on the resting state so the lift
   eases both ways rather than snapping back.

   color is pinned because a bare `a:hover:hover` in theme.css mixes orange into any link's
   currentColor, and on a button that is already orange that greys the navy label. */
.om-site-actions .om-site-demo,
.om-mobile-demo {
    transition: filter .15s ease, transform .15s ease;
}
.om-site-actions .om-site-demo:hover,
.om-site-actions .om-site-demo:focus-visible,
.om-mobile-demo:hover,
.om-mobile-demo:focus-visible {
    filter: brightness(.94);
    transform: translateY(-1px);
}
/* Each keeps its own resting label colour: the header button is navy on orange, the mobile one
   is near-black. One shared value here would have recoloured whichever it was not written for. */
.om-site-actions .om-site-demo:hover,
.om-site-actions .om-site-demo:focus-visible { color: #052e5f !important; }
.om-mobile-main .om-mobile-demo:hover,
.om-mobile-main .om-mobile-demo:focus-visible { color: #111 !important; }

/* --- Header labels sat 3px high ---------------------------------------------------------------
   Yuri, 2026-09-21: "header elements are not on the same line." Measured at 1440: every label's
   text box centred on y=37 while the logo and the Live Demo button's label centred on y=40.

   The cause is the 6px transparent bottom border the nav and utility links carry to reserve room
   for their hover underline. The header centres each link's BORDER box, so six pixels hanging
   below the text push the text three pixels up - and the logo, an image with no such border, and
   the demo button, which carries its own optical correction, stayed where they were.

   Balancing the reserve with an equal transparent border above centres the text without moving
   the underline: the bottom border is where it was, the box is 6px taller, and the flex centring
   takes the 3px back. box-sizing is border-box globally, so the 80px products trigger keeps its
   height. */
.om-site-nav a,
.om-site-nav button,
.om-site-actions a:not(.om-site-demo) {
    border-top: 6px solid transparent;
}