/* =====================================================================
   Tesslink theme
   ---------------------------------------------------------------------
   Carries the original site's colour identity (dark slate chrome, white
   content cards, muted blue-grey text, yellow accent) onto a modern,
   responsive Bootstrap 5 layout.

   The palette is defined once as CSS custom properties below, then reused
   everywhere so a single change re-themes the whole site.
   ===================================================================== */

:root {
    /* ---- Brand palette (extracted from the original main.css/menu.css) ---- */
    --tl-slate-darkest: #273640; /* outer page background            */
    --tl-slate-dark:    #2c3e4a; /* input / deep panel background    */
    --tl-slate:         #364a56; /* main content panel background    */
    --tl-slate-light:   #3f5563; /* hover / raised surfaces          */
    --tl-text:          #7d8b93; /* default body text                */
    --tl-heading:       #65757f; /* headings on light backgrounds    */
    --tl-label:         #9bafba; /* labels / stronger muted text     */
    --tl-text-soft:     #768692; /* secondary text                   */
    --tl-link:          #8caabb; /* internal links                   */
    --tl-accent:        #ffee67; /* yellow highlight accent          */
    --tl-accent-dim:    #d9c94a; /* accent for hover on light bg     */
    --tl-on-dark:       #cfdbe2; /* light text on dark backgrounds   */
    --tl-white:         #ffffff; /* content card background          */

    /* ---- Derived tokens ---- */
    --tl-card-radius: .5rem;
    --tl-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
    --tl-shadow-sm: 0 .25rem .75rem rgba(0, 0, 0, .18);
    --tl-mono: ui-monospace, "Cascadia Mono", "Consolas", "SFMono-Regular", monospace;

    /* Nudge a few Bootstrap variables so components inherit the accent. */
    --bs-link-color: var(--tl-link);
    --bs-link-hover-color: var(--tl-accent);
    --bs-border-color: rgba(140, 170, 187, .25);
}

/* Base typography keeps the original Trebuchet-led stack. */
html {
    font-size: 15px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    font-family: "Trebuchet MS", "Segoe UI", Arial, Helvetica, sans-serif;
    color: var(--tl-text);
    background-color: var(--tl-slate-darkest);
    /* Subtle vertical gradient echoing the old slate banner. */
    background-image: linear-gradient(180deg, #223038 0%, var(--tl-slate-darkest) 320px);
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

/* ---------- Headings & links ---------- */
h1, h2, h3, h4, h5, h6 {
    color: var(--tl-heading);
    font-weight: 700;
}

a {
    color: var(--tl-link);
    text-decoration: none;
}

a:hover {
    color: var(--tl-accent-dim);
}

/* Terminal-prompt greeting, echoing the original site's literal
   "> Welcome to TESSLINK.com" line. Used deliberately as a retro brand callback
   for an "internet solutions" shop. Kept as-typed (not forced uppercase) so it
   reads as a real command-line echo rather than a generic eyebrow.

   Default colour is a dark teal that meets contrast on the WHITE cards where it
   also appears (login, register, error pages); the hero overrides it to the
   yellow accent for its dark background (see .tl-hero .tl-prompt below). */
.tl-prompt {
    font-family: var(--tl-mono);
    color: #2f6d86;
    font-size: .95rem;
}

.tl-prompt::before {
    content: "> ";
    opacity: .8;
}

/* Blinking cursor after the greeting, completing the terminal feel. */
.tl-prompt::after {
    content: "_";
    margin-left: .15rem;
    animation: tl-blink 1.1s steps(1) infinite;
}

@keyframes tl-blink {
    50% { opacity: 0; }
}

/* Respect reduced-motion preferences: hold the cursor steady. */
@media (prefers-reduced-motion: reduce) {
    .tl-prompt::after { animation: none; }
}

/* ---------- "Link line" motif ---------- */
/* A horizontal thread with node dots that literally visualises "linking your
   business to the web" - the one signature device on the page. Robust at any
   width (plain flex row) and the single spot the accent yellow lights a node. */
.tl-linkline {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 0 auto;
    max-width: 420px;
    opacity: .9;
}

.tl-linkline .seg {
    flex: 1 1 auto;
    height: 1px;
    background: linear-gradient(90deg, rgba(140, 170, 187, .1), rgba(140, 170, 187, .55));
}

.tl-linkline .node {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--tl-link);
    flex: 0 0 auto;
}

/* One node carries the accent - the deliberate splash of yellow. */
.tl-linkline .node.on {
    background: var(--tl-accent);
    box-shadow: 0 0 0 4px rgba(255, 238, 103, .18);
}

/* ============================ Navbar ============================ */
.tl-navbar {
    background-color: rgba(30, 42, 50, .96);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid rgba(140, 170, 187, .18);
}

.tl-navbar .navbar-brand {
    display: inline-flex;
    align-items: center;
    padding: 0;
}

/* Control the logo's rendered size via CSS (overrides the img width/height
   attributes) so it scales down on small screens. */
.tl-navbar .navbar-brand img {
    height: 42px;
    width: auto;
    display: block;
}

@media (max-width: 575.98px) {
    .tl-navbar .navbar-brand img {
        height: 34px;
    }
}

.tl-navbar .nav-link {
    color: var(--tl-on-dark);
    font-size: .95rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 2px solid transparent;
}

.tl-navbar .nav-link:hover,
.tl-navbar .nav-link:focus {
    color: var(--tl-white);
}

/* Current-page indicator: a thin accent underline. */
.tl-navbar .nav-link.active {
    color: var(--tl-white);
    border-bottom-color: var(--tl-accent);
}

.tl-navbar .dropdown-menu {
    background-color: var(--tl-slate);
    border: 1px solid rgba(140, 170, 187, .2);
}

.tl-navbar .dropdown-item {
    color: var(--tl-on-dark);
}

.tl-navbar .dropdown-item:hover,
.tl-navbar .dropdown-item:focus {
    background-color: var(--tl-slate-light);
    color: var(--tl-white);
}

/* Custom hamburger icon tinted to match the light-on-dark navbar. */
.tl-navbar .navbar-toggler {
    border-color: rgba(140, 170, 187, .4);
}

.tl-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23cfdbe2' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ============================ Buttons ============================ */
/* Primary call-to-action uses the yellow accent on dark text. */
.btn-accent {
    background-color: var(--tl-accent);
    border-color: var(--tl-accent);
    color: #1e2a30;
    font-weight: 600;
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: #fff28a;
    border-color: #fff28a;
    color: #1e2a30;
}

/* Secondary outline button for use on dark backgrounds. */
.btn-outline-slate {
    border-color: var(--tl-link);
    color: var(--tl-on-dark);
}

.btn-outline-slate:hover,
.btn-outline-slate:focus {
    background-color: var(--tl-link);
    color: #1e2a30;
}

/* ============================ Hero ============================ */
.tl-hero {
    color: var(--tl-on-dark);
    padding: 4rem 0 3.5rem;
}

/* On the dark hero the prompt uses the yellow accent. */
.tl-hero .tl-prompt {
    color: var(--tl-accent);
}

.tl-hero h1 {
    color: var(--tl-white);
    font-size: clamp(2rem, 4.5vw, 3.15rem);
    line-height: 1.08;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
    max-width: 16ch; /* keep the headline to a tight, punchy measure */
}

.tl-hero p.lead {
    color: var(--tl-label);
    max-width: 40rem;
}

/* ============================ Cards / panels ============================ */
/* White content card that sits on the slate background, echoing the old
   white content area but with modern rounding and shadow. */
.tl-card {
    background-color: var(--tl-white);
    color: #4a5860;
    border: none;
    border-radius: var(--tl-card-radius);
    box-shadow: var(--tl-shadow);
}

.tl-card h1, .tl-card h2, .tl-card h3, .tl-card h4 {
    color: var(--tl-heading);
}

/* Text links inside a card. Buttons are excluded so link-styled calls to
   action (e.g. "Contact us") keep their own .btn-* colours instead of
   picking up link-blue and the pale accent hover, which is unreadable on
   the yellow accent fill. */
.tl-card a:not(.btn) {
    color: #2f6d86;
}

.tl-card a:not(.btn):hover {
    color: var(--tl-accent-dim);
}

/* Section heading with a short accent rule underneath, replacing the old
   sliced-image divider (index25.gif). */
.tl-section-title {
    position: relative;
    padding-bottom: .6rem;
    margin-bottom: 1.5rem;
}

.tl-section-title::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 3rem;
    height: 3px;
    background-color: var(--tl-accent);
    border-radius: 2px;
}

/* ---------- Service cards (Software / Hardware / Network) ---------- */
.tl-service-card {
    background-color: var(--tl-white);
    border: 1px solid rgba(0, 0, 0, .05);
    border-radius: var(--tl-card-radius);
    box-shadow: var(--tl-shadow-sm);
    height: 100%;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* Lift + accent border on hover, replacing the old image rollover effect. */
.tl-service-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tl-shadow);
    border-color: var(--tl-accent);
}

/* Base icon size. Without this, the inline SVG has no intrinsic size outside a
   card and renders far too large (e.g. on the service detail pages). */
.tl-service-icon {
    width: 40px;
    height: 40px;
    color: var(--tl-slate);
    flex: 0 0 auto;
}

/* Larger on the overview / home teaser cards. */
.tl-service-card .tl-service-icon {
    width: 56px;
    height: 56px;
}

.tl-service-card:hover .tl-service-icon {
    color: #2f6d86;
}

.tl-service-card h3 {
    font-size: 1.15rem;
}

/* Service detail page header: modest icon beside a larger category title. */
.tl-service-head .tl-service-icon {
    width: 38px;
    height: 38px;
}

.tl-service-head h1 {
    font-size: clamp(2rem, 4vw, 2.6rem);
    margin-bottom: 0;
}

/* ============================ Forms ============================ */
.tl-card .form-label {
    color: var(--tl-heading);
    font-weight: 600;
}

.tl-card .form-control:focus {
    border-color: var(--tl-link);
    box-shadow: 0 0 0 .2rem rgba(140, 170, 187, .3);
}

/* Honeypot field: visually hidden but present in the DOM for bots to fill.
   (The server-side check that rejects filled honeypots is added in Phase 2.) */
.tl-hp {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* ============================ Footer ============================ */
.tl-footer {
    flex-shrink: 0;
    background-color: rgba(30, 42, 50, .96);
    border-top: 1px solid rgba(140, 170, 187, .18);
    color: var(--tl-text-soft);
    padding: 1.75rem 0;
    font-size: .9rem;
}

.tl-footer a {
    color: var(--tl-link);
}

.tl-footer a:hover {
    color: var(--tl-accent);
}

/* ============================ Accessibility ============================ */
/* Readable muted text on the dark background (replaces low-contrast
   .text-white-50 in the intro paragraphs). ~6:1 on the slate background. */
.tl-ondark-muted {
    color: #aab8c1;
}

/* Clear keyboard focus indicator everywhere. Uses the accent so it stands out
   on both the dark chrome and the white cards. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-check-input:focus-visible,
.nav-link:focus-visible,
.dropdown-item:focus-visible {
    outline: 3px solid var(--tl-accent);
    outline-offset: 2px;
    box-shadow: none;
}

/* Skip-to-content link: hidden until focused, then visible at the top-left so
   keyboard users can jump past the navbar. */
.tl-skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    z-index: 1080;
    background: var(--tl-accent);
    color: #1e2a30;
    padding: .5rem 1rem;
    border-radius: 0 0 .35rem .35rem;
    font-weight: 600;
    transition: top .15s ease;
}

.tl-skip-link:focus {
    top: 0;
    color: #1e2a30;
}

@media (prefers-reduced-motion: reduce) {
    .tl-skip-link { transition: none; }
}