/* VVL refresh overrides. Linked AFTER bootstrap, site.css and slider.css; those files are untouched (slider.css: one missing semicolon fixed).
   Roll back by removing the <link> to this file. Palette stays navy #11254a + white. */

/* ---- 1. Readability: service blocks (was #494949 background with #bbb text) ---- */
.jumbotron {
    background-color: #f3f5f9;
    color: #222;
    border-bottom: 1px solid #d3d9e4;
}
.jumbotron h2,
.jumbotron h3 {
    color: #11254a;
    font-weight: 600;
    text-shadow: none;
}
.jumbotron p {
    color: #333;
}
.jumbotron .small {
    color: #262626;
    font-size: .95em;
}

/* ---- 1. Readability: slider headline (was weight 300, #bbb, thin 1px shadow) ---- */
#slide-show .slide-hero::before {            /* subtle navy scrim, strongest behind the text on the left */
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: linear-gradient(90deg, rgba(10,22,48,.62) 0%, rgba(10,22,48,.38) 55%, rgba(10,22,48,.12) 100%);
    pointer-events: none;
}
#slide-show .slide-hero h1 {
    z-index: 1;
    top: 50%;
    right: 1em;                              /* lets long titles wrap instead of being clipped */
    width: auto;
    height: auto;
    line-height: 1.15;
    white-space: normal;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 2px 6px rgba(0,0,0,.75), 0 0 2px rgba(0,0,0,.6);
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

/* ---- 6. Phone fixes ---- */
@media screen and (max-width: 480px) {
    #slide-show .slide-hero h1 { font-size: 1.6em; }   /* was 1.2em, ~19px, in a 138px slider */
    .jumbotron p { width: 90%; font-size: 1.15em; }
    .jumbotron .small { width: 90%; }
}
@media screen and (max-width: 330px) {
    #slide-show .slide-hero h1 { font-size: 1.3em; }
}
@media screen and (max-width: 575.98px) {
    /* logo wall was one very large logo per row (~2,000px of scrolling); show two per row */
    .techlogo img { max-width: 42%; height: auto; padding: 8px 10px; }
}
@media screen and (max-width: 767.98px) {
    /* the two service columns stacked with no gap (Project Management ran straight into GIS Services) */
    .section .col-md-6 + .col-md-6 { margin-top: 2em; }
}


/* =====================================================================================================================
   CLEAN-UP PASS. Sections A-D below are new in the .NET project.
   ===================================================================================================================== */

/* ---- A. Bootstrap 4.0 -> 5.3 compatibility: keeps the look identical to the live site ---- */
@media (min-width: 1400px) { .container { max-width: 1140px; } }   /* BS5 adds a wider 1320px container at >=1400px; live tops out at 1140px */
ol, ul { padding-left: 40px; }                                     /* BS5 reboot sets 2rem; BS4 left the browser default of 40px */
h1, h2, h3, h4, h5, h6 { line-height: 1.2; }
h1 { font-size: 2.5rem; } h2 { font-size: 2rem; } h3 { font-size: 1.75rem; } h4 { font-size: 1.5rem; } h5 { font-size: 1.25rem; } h6 { font-size: 1rem; }  /* BS5 shrinks headings with the screen (RFS); BS4 did not */
.form-group { margin-bottom: 1rem; }                               /* .form-group was removed in BS5 */
.btn { --bs-btn-border-radius: .25rem; --bs-btn-focus-box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.btn-lg { --bs-btn-border-radius: .3rem; }
.form-control { border-color: #ced4da; border-radius: .25rem; color: #495057; }
.form-control:focus { color: #495057; border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.form-control::placeholder { color: #6c757d; opacity: 1; }
.container, .container-fluid, .row { --bs-gutter-x: 30px; }       /* BS4 gutter was 30px; BS5 default is 1.5rem (24px) */
.navbar { --bs-navbar-padding-y: .5rem; --bs-navbar-padding-x: 1rem; }
@media (max-width: 991.98px) { .navbar-expand-lg > .container { padding-left: 0; padding-right: 0; } }   /* BS4 dropped the container padding inside the collapsed navbar */
.row > table { width: auto; padding: 0; }                          /* BS5 stretches every direct child of .row to 100% with gutter padding */
.navbar .nav-link { color: rgba(0, 0, 0, .5); transition: none; }   /* live: no transition; BS5 adds a .15s one */
.navbar .nav-link.active { color: rgba(0, 0, 0, .9); }
.navbar-toggler { border-color: rgba(0, 0, 0, .1); border-radius: .25rem; color: rgba(0, 0, 0, .5);
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); }
a { color: #007bff; }                                              /* BS4 link blue, used by the few un-styled links */

/* ---- B. Hover / keyboard-focus / pressed states on every clickable element ---- */
/* Navbar: the live site's hover (red text + 6px red underline, no transition) also applies to keyboard focus and to the pressed state. */
ul.nav li a:hover, ul.nav li a:active, ul.nav li a:focus-visible {
    color: #990000 !important;
    border-bottom: 6px solid #990000;
}
ul.nav li a:focus-visible { outline: 2px solid #11254a; outline-offset: 2px; box-shadow: none; }

/* Learn More (.btn-blue) and Send (.btn-gray): live colours for hover/focus, same states for pressed. The focus ring is the live one. */
.btn-blue, .btn-gray { transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out; }
/* (.btn.btn-x: Bootstrap 5's pressed-state rule is more specific than a bare .btn-x:active, so the colours are repeated with the extra class.) */
.btn.btn-blue:hover, .btn.btn-blue:focus, .btn.btn-blue:focus-visible, .btn.btn-blue:active {
    color: #11254a; background-color: #d6d8d9; border-color: #11254a;
}
.btn.btn-gray:hover, .btn.btn-gray:focus, .btn.btn-gray:focus-visible, .btn.btn-gray:active {
    color: #fff; background-color: #11254a; border-color: #fff;
}
.btn.btn-blue:focus, .btn.btn-blue:focus-visible, .btn.btn-gray:focus, .btn.btn-gray:focus-visible { outline: 0; box-shadow: 0 0 0 .2rem rgba(0, 123, 255, .25); }
.btn.btn-gray:focus, .btn.btn-gray:focus-visible { box-shadow: 0 0 0 .2rem rgba(255, 255, 255, .6); }   /* on the navy band the ring has to be light to show */
.btn.btn-blue:active, .btn.btn-gray:active { transform: translateY(1px); }

/* Logo link: live has no hover; a light dim and a visible focus ring were added. */
.navbar-brand { transition: opacity .15s ease-in-out; }
.navbar-brand:hover, .navbar-brand:active { opacity: .8; }
.navbar-brand:focus-visible { outline: 2px solid #11254a; outline-offset: 4px; }

/* Footer and copyright links: live = grey -> white on hover (footer) and no change (copyright). Both get underline/focus/pressed now. */
footer li a:hover, footer li a:active, footer li a:focus-visible { color: #fff; text-decoration: underline; }
.copyright a:hover, .copyright a:active, .copyright a:focus-visible { color: #fff; text-decoration: underline; }
footer a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.contactform a:active, .contactform a:focus-visible { color: #fff; }

/* ---- C. Service blocks: icon / title / blurb / button line up row by row across the four columns ---- */
/* Phones and tablets (<992px) stack one block per row (as live). Each block is a flex column and its button sits at the bottom. */
.services .row > [class*="col-"] { display: flex; flex-direction: column; align-items: center; }
.services .row > [class*="col-"] > br { display: none; }
.services .row > [class*="col-"] > h3 { align-self: stretch; justify-self: stretch; margin-bottom: 0; }   /* flex/grid items do not collapse margins; the blurb's own margin-top supplies the gap, as before */
.services .row > [class*="col-"] > .btn { margin-top: auto; margin-bottom: 1.5rem; }   /* 1.5rem = the empty line the two <br> left under the button */
.services .row > [class*="col-"] > .small { margin-bottom: 1em; }
/* Desktop (>=992px): one 4-row grid shared by the columns (subgrid), so the four icons, four titles, four blurbs and four buttons each share one row. */
@media (min-width: 992px) {
    @supports (grid-template-rows: subgrid) {
        .services .row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: auto auto 1fr auto; }
        .services .row > [class*="col-"] { width: auto; display: grid; grid-row: span 4; grid-template-rows: subgrid; justify-items: center; align-items: start; }
        .services .row > [class*="col-"] > .btn { margin-top: 0; }
    }
}

/* ---- D. Small pages (thank-you, error, not-found) and the honeypot ---- */
.vvl-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.vvl-band { background-color: #11254a; color: #ccc; padding: 30px 0; }
.vvl-band h2 { color: #fff; }
.vvl-band a { display: inline; color: #fff; text-decoration: underline; padding: 0; }

/* ---- E. Languages and Frameworks: official logos under the logo wall (sources and licences: CHANGES.md section 9) ---- */
.techtiles { margin-top: 1em; }
.techtiles h4 { text-align: center; }
/* Phone: 6-column grid, rows of 3 / 2 / 2 (C, C++, C# / Swift, Flutter / Rust, Zig). One tile height for all seven. */
.techtile-list { --tile-h: 40px; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px 8px; align-items: center; justify-items: center; }
.techtile-list li { grid-column: span 3; margin: 0; padding: 0; }
.techtile-list li:nth-child(-n+3) { grid-column: span 2; }
.techtiles .techtile-list img { display: block; width: auto; height: var(--tile-h); max-width: 100%; padding: 0; }
/* The official C# icon has about 30% empty margin inside its square artboard, so at the common height it looks smaller than the other marks. Same file, scaled up only. */
.techtiles .techtile-list img.tile-csharp { height: calc(var(--tile-h) * 1.35); }
/* Footnote marker in the heading; the matching note is in the footer (see "Footnote" below). */
.techtiles sup { font-size: .75em; line-height: 0; }
.techtiles a.fn-ref { display: inline-block; line-height: 1; padding: .3em .45em; margin: -.3em -.2em; color: #11254a; text-decoration: none; font-weight: 600; }
.techtiles a.fn-ref:hover, .techtiles a.fn-ref:focus-visible { text-decoration: underline; }
/* Tablet and small desktop: rows of 4 / 3 */
@media (min-width: 576px) {
    .techtile-list { --tile-h: 48px; grid-template-columns: repeat(12, 1fr); gap: 20px 8px; }
    .techtile-list li, .techtile-list li:nth-child(-n+3) { grid-column: span 4; }
    .techtile-list li:nth-child(-n+4) { grid-column: span 3; }
}
@media (min-width: 992px) { .techtile-list { --tile-h: 56px; } }
/* Wide desktop: all seven in one centred row */
@media (min-width: 1200px) {
    .techtile-list { display: flex; justify-content: center; align-items: center; gap: 20px 56px; }
    .techtile-list li, .techtile-list li:nth-child(-n+4) { grid-column: auto; }
}

/* ---- F. Logo wall: MySQL and .NET sizing (nothing else on the wall is touched; every logo is vertical-align:middle as before) ---- */
/* Both keep their ORIGINAL layout footprint (box size), so the wall wraps and positions exactly as before; only the drawing inside changes.
   MySQL: the file is 170x88 with the dolphin and read about twice as tall as its neighbours. Drawn at 130px wide (about 67px tall) inside the same 200x108 box (padding makes up the rest),
   then lifted with position:relative so its visible bottom lines up with the logos next to it (the offset is measured from rendered pixels, see tools/logo-boxes.mjs). */
/* Phone: same idea, 110px drawing inside the original 150x83 box (it was 130px wide there and the dolphin crowded the row above once lifted). */
.techlogo img.logo-mysql { box-sizing: content-box; width: 110px; height: auto; padding: 13.27px 20.16px; position: relative; top: -10px; }
@media (min-width: 576px) {
    .techlogo img.logo-mysql  { box-sizing: content-box; width: 130px; height: auto; padding: 20.35px 35px; top: -10px; }
    /* .NET: the 116x43 box (border-box with the 10px/15px padding) left a drawing of only 86x23. Same 116x43 box, drawing now 100px wide (about 37px tall), in line with SQL Server and MongoDB. */
    .techlogo img.logo-dotnet { box-sizing: content-box; width: 100px; height: auto; padding: 2.8px 8px; }
}

/* ---- G. Footnote at the bottom of the page: credits and trademarks for the language logos (marker 1 in the "Languages and Frameworks" heading) ---- */
.footer-note { clear: both; margin: 0 auto; padding: .75em 15px 0; font-size: .5rem; line-height: 1.6; color: #bdbdbd; }
.footer-note a { color: #fff; text-decoration: underline; }
.footer-note a:hover { text-decoration-thickness: 2px; }   /* visible change on hover (the links are already white and underlined) */
.footer-note a.fn-back { display: inline-block; line-height: 1; padding: .3em .45em; margin: -.3em -.2em; font-weight: 600; }
.footer-note a:focus-visible, .techtiles a.fn-ref:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.techtiles h4 { scroll-margin-top: 24px; }   /* the back link lands with a little room above the heading instead of flush with the window edge */
.footer-note:target { color: #e6e6e6; }

/* ---- H. Logo wall: Apache Tomcat, AWS and Java drawn smaller (same technique as MySQL) ----
   Their pictures read bigger than the rest of the wall (visible area 2.3x to 2.5x the median of the other logos). Each keeps its ORIGINAL layout box
   (picture + padding, same as before), only the drawing inside it shrinks, so the rows wrap and every neighbour sits where it did. Scale: Tomcat 0.75, AWS 0.80, Java 0.80.
   Desktop/tablet: natural size x scale, padding makes up the rest of the old box (picture + 15px / 10px). Phones: the old box was min(natural, 42% - 20px) wide plus 10px / 8px padding, so the same is done with calc(). */
@media (min-width: 576px) {
    .techlogo img.logo-tomcat { box-sizing: content-box; width: 142.5px; height: auto; padding: 22.5px 38.75px; }
    .techlogo img.logo-aws    { box-sizing: content-box; width: 136px;   height: auto; padding: 19px 32px; }
    .techlogo img.logo-java   { box-sizing: content-box; width: 136px;   height: auto; padding: 18.4px 32px; }
}
@media (max-width: 575.98px) {
    .techlogo img.logo-tomcat { box-sizing: content-box; max-width: none; height: auto; width: calc(min(190px, 42% - 20px) * .75); padding: calc(8px + min(190px, 42% - 20px) * .0658) calc(10px + min(190px, 42% - 20px) * .125); }
    .techlogo img.logo-aws    { box-sizing: content-box; max-width: none; height: auto; width: calc(min(170px, 42% - 20px) * .8);  padding: calc(8px + min(170px, 42% - 20px) * .0529) calc(10px + min(170px, 42% - 20px) * .1); }
    .techlogo img.logo-java   { box-sizing: content-box; max-width: none; height: auto; width: calc(min(170px, 42% - 20px) * .8);  padding: calc(8px + min(170px, 42% - 20px) * .0494) calc(10px + min(170px, 42% - 20px) * .1); }
}