/* ==========================================================================
   Public site theme: Modern
   ---------------------------------------------------------------------------
   The design language of solutions.evotechgd.com brought to the storefront:
   a light canvas, the hub's brand blue, Inter with restrained weights, soft
   two-layer shadows, and generous whitespace instead of heavy contrast.

   The biggest change is the hero. The old one was a full-bleed dark navy slab
   with a photo behind it — a 2018 pattern that fights the light, airy feel of
   the newer sites and buries the call to action under a wall of colour. Here
   the hero sits on the page background like everything else, the photograph
   becomes a framed panel beside the words rather than a backdrop behind them,
   and the eyebrow becomes the same pill the hub uses.

   Loaded after style.css, so it overrides rather than replaces. Opt-in:
   $site['public_theme'] = 'modern' in config.php, or ?theme=modern to preview.
   ========================================================================== */

:root {
    --evp-primary:       #1769ff;
    --evp-primary-hover: #0f52d1;
    --evp-primary-soft:  #eaf1ff;

    --evp-ink:        #0d1b2e;
    --evp-ink-soft:   #3e4c60;
    --evp-muted:      #5c6b7f;
    --evp-bg:         #f6f8fb;
    --evp-surface:    #ffffff;
    --evp-border:     #e3e9f0;

    --evp-radius:    14px;
    --evp-radius-lg: 20px;

    --evp-shadow-sm: 0 1px 2px rgba(13, 27, 46, .05);
    --evp-shadow-md: 0 1px 2px rgba(13, 27, 46, .04), 0 8px 20px -8px rgba(13, 27, 46, .12);
    --evp-shadow-lg: 0 2px 4px rgba(13, 27, 46, .05), 0 20px 40px -16px rgba(13, 27, 46, .20);

    --evp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

body {
    background: var(--evp-bg);
    color: var(--evp-ink);
    font-family: var(--evp-font);
    -webkit-font-smoothing: antialiased;
}

/* -------------------------------------------------------------- typography */

h1, h2, h3, h4 {
    font-family: var(--evp-font);
    color: var(--evp-ink);
    letter-spacing: -0.022em;
    font-weight: 700;
}

h1 { line-height: 1.06; }
h2 { line-height: 1.15; letter-spacing: -0.018em; }

p { color: var(--evp-ink-soft); }

/* ------------------------------------------------------------------- hero */

/*
 * No dark slab, no photo backdrop, no overlay. The hero is a two-column band
 * on the page background: words on the left, the photograph framed on the
 * right where it reads as product rather than wallpaper.
 */
.hero,
.page-hero {
    color: var(--evp-ink);
    background:
        radial-gradient(900px 420px at 12% -10%, rgba(23, 105, 255, .10), transparent 60%),
        radial-gradient(760px 380px at 88% 0%, rgba(14, 165, 233, .08), transparent 62%),
        var(--evp-bg);
    border-bottom: 1px solid var(--evp-border);
    overflow: visible;
}

/*
 * The darkening layer is what made the blue wall, so it goes. The photograph
 * stays, but promoted from wallpaper to a framed panel on the right — done by
 * restyling the existing element rather than hiding it and re-adding the image
 * in CSS, so every page keeps its own picture without naming any of them here.
 *
 * Right edge and width are derived from --container so the panel lines up with
 * the text column at any width.
 */
.hero-overlay { display: none; }

/* The backdrop and its darkening layer are what made the blue wall. */
.hero-bg, .hero-overlay { display: none; }

.hero-content { position: relative; z-index: 1; }

/* Inner-page heroes: drop the backdrop rather than reframe it. */

.home-hero {
    min-height: 0;
    padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 80px);
}

/*
 * Two columns without a grid.
 *
 * A grid deals these siblings into alternating cells, and once the image spans
 * every row it stretches them - the heading ended up 300px below its own
 * eyebrow. Reserving space on the right and pinning the image into it lets the
 * text keep its natural rhythm and its own margins.
 */
.home-hero .hero-content {
    position: relative;
    max-width: none;
    padding: 0 calc(46% + clamp(24px, 3vw, 48px)) 0 0;
    min-height: clamp(260px, 30vw, 400px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*
 * The photograph, reframed as a panel beside the words rather than a backdrop
 * behind them. Pinned to the text column, which is the container, so it lines
 * up at any width.
 */
.home-hero .hero-content::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 46%;
    border-radius: var(--evp-radius-lg);
    border: 1px solid var(--evp-border);
    box-shadow: var(--evp-shadow-lg);
    background-image: url("../images/hero-tech.jpg");
    background-size: cover;
    background-position: center;
}

/*
 * The photograph, reintroduced as a framed panel. It is decorative, so it is
 * built from the same file the old hero used via a CSS background — no markup
 * change, which keeps this a pure theme layer.
 */
/* Every existing child is text and belongs in the left column; without this
   the grid deals them alternately into both columns. */
.home-hero .hero-content > * { grid-column: 1; }

.hero h1,
.page-hero h1 {
    color: var(--evp-ink);
    font-size: clamp(2.1rem, 4.6vw, 3.4rem);
    margin-bottom: 16px;
}

.hero p,
.page-hero p {
    color: var(--evp-muted);
    font-size: 1.04rem;
    line-height: 1.65;
    max-width: 56ch;
}

/* The eyebrow becomes the hub's pill. */
.hero .eyebrow,
.page-hero .eyebrow,
.section-heading .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 6px 14px;
    border: 1px solid var(--evp-border);
    border-radius: 999px;
    background: var(--evp-surface);
    box-shadow: var(--evp-shadow-sm);
    color: var(--evp-primary);
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.hero .eyebrow::before,
.page-hero .eyebrow::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #16a34a;
}

.page-hero { padding: clamp(40px, 5vw, 72px) 0; }
.page-hero .hero-content { max-width: 720px; }

/* ---------------------------------------------------------------- buttons */

.btn {
    border-radius: 10px;
    font-weight: 600;
    letter-spacing: 0;
    box-shadow: none;
    transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}

.btn-primary {
    background: var(--evp-primary);
    border-color: var(--evp-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(23, 105, 255, .24), 0 8px 18px -8px rgba(23, 105, 255, .55);
}

.btn-primary:hover { background: var(--evp-primary-hover); border-color: var(--evp-primary-hover); }

.btn-secondary {
    background: var(--evp-surface);
    border: 1px solid var(--evp-border);
    color: var(--evp-ink);
    box-shadow: var(--evp-shadow-sm);
}

.btn-secondary:hover { border-color: var(--evp-primary); color: var(--evp-primary); }

/* The old hero needed a third, ghosted button to stay legible on the dark
   slab. On a light hero two solid choices read better than three. */
.hero .btn-ghost,
.page-hero .btn-ghost {
    background: transparent;
    border: 0;
    color: var(--evp-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    box-shadow: none;
}

.btn:not(:disabled):hover { transform: translateY(-1px); }

/* --------------------------------------------------------------- sections */

.section { padding: clamp(48px, 6vw, 88px) 0; }
.section-muted { background: var(--evp-surface); }

.section-heading { max-width: 680px; margin-bottom: clamp(24px, 3vw, 40px); }
.section-heading h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 12px; }
.section-heading p { color: var(--evp-muted); }

/* ------------------------------------------------------------------ cards */

.card,
.feature-card,
.product-card,
.service-card,
.category-card {
    border: 1px solid var(--evp-border);
    border-radius: var(--evp-radius);
    background: var(--evp-surface);
    box-shadow: var(--evp-shadow-sm);
    transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}

.card:hover,
.feature-card:hover,
.product-card:hover,
.service-card:hover,
.category-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--evp-primary) 30%, var(--evp-border));
    box-shadow: var(--evp-shadow-md);
}

.card h3, .feature-card h3, .service-card h3, .category-card h3 { font-size: 1.04rem; }
.card p, .feature-card p, .service-card p, .category-card p { color: var(--evp-muted); font-size: .94rem; }

/* ------------------------------------------------------------------- nav */

.site-header {
    background: rgba(255, 255, 255, .86);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--evp-border);
    box-shadow: none;
}

.site-nav a {
    border-radius: 8px;
    white-space: nowrap;   /* "Custom Apps" split over two lines and doubled the header height */
    color: var(--evp-ink-soft);
    font-weight: 500;
}

.site-nav a:hover { background: var(--evp-primary-soft); color: var(--evp-primary); }
.site-nav a.active { background: var(--evp-ink); color: #fff; }

/* -------------------------------------------------------------- CTA band */

/*
 * Kept dark, but as a contained card rather than a full-bleed slab — one
 * deliberate moment of contrast near the end of the page instead of a wall
 * of colour at the start of it.
 */
.cta-band {
    background: transparent;
    padding: 0 0 clamp(48px, 6vw, 88px);
}

.cta-band .container {
    padding: clamp(32px, 4.5vw, 56px);
    border-radius: var(--evp-radius-lg);
    background: linear-gradient(135deg, #0b1524, #15253d 55%, #1b366d);
    color: #fff;
    box-shadow: var(--evp-shadow-lg);
}

.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(226, 234, 245, .78); }
.cta-band .btn-secondary { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .28); color: #fff; }

/* ----------------------------------------------------------------- footer */

.site-footer {
    background: var(--evp-surface);
    border-top: 1px solid var(--evp-border);
    color: var(--evp-muted);
}

/* ---------------------------------------------------------- narrow screens */

@media (max-width: 900px) {
    /* align-items:stretch matters: the base rule centres them, which in a
       column flex container shrinks the picture to nothing. */
    .home-hero .hero-content { order: 1; padding-right: 0; min-height: 0; }
    /* The photo drops below the words, and shorter, so the call to action is
       still on screen without scrolling on a phone. */
    .home-hero .hero-content::after { position: static; width: auto; height: 200px; margin-top: 28px; }
}

/* ---------------------------------------------------------------- nav fit */

/*
 * Nine items is one more than the header comfortably fits between about 960px
 * and 1100px, where it wrapped to two rows and pushed the hero down. Tighten
 * the spacing across that band rather than dropping to the burger early —
 * the links are still comfortably above the 44px touch target.
 */
@media (min-width: 900px) and (max-width: 1140px) {
    .site-nav { gap: 2px; }
    .site-nav a {
        padding-left: 9px;
        padding-right: 9px;
        font-size: .9rem;
        letter-spacing: -0.01em;
    }
}