/* ============================================================
   Synergy Geeks — Main Stylesheet

   Compact, continuous-flow layout for the single-page consulting
   site. Content flows tightly from header to footer with minimal
   padding gaps — visual hierarchy is handled through typography,
   surface colors, and subtle accents rather than whitespace.

   Values come from docs/DESIGN_TOKENS.md.

   Structure:
     1. Design tokens (CSS custom properties)
     2. Reset and base styles
     3. Layout utilities
     4. Typography
     5. Accessibility (skip-to-content)
     6. Site header and nav bar
     7. Tagline strip
     8. Section shared styles
     9. Services section
    10. About section
    11. Contact form section
    12. Footer
    13. Responsive breakpoints
   ============================================================ */


/* ------------------------------------------------------------
   0. Self-Hosted Font — Inter

   Loaded from local files instead of Google Fonts to avoid
   sending visitor data to Google's servers. Four weights
   used across the site: 400 (body), 500 (labels/subheadings),
   600 (headings), 700 (hero headline).
   ------------------------------------------------------------ */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/inter-400.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('assets/fonts/inter-500.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/inter-600.woff2') format('woff2');
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/inter-700.woff2') format('woff2');
}


/* ------------------------------------------------------------
   1. Design Tokens

   Every visual value the site uses lives here. Changing a
   token updates every element that references it.
   Source: docs/DESIGN_TOKENS.md
   ------------------------------------------------------------ */
:root {
    /* Brand palette */
    --color-bg: #15101F;
    --color-brand: #6820B0;
    --color-interactive: #F07000;
    --color-accent: #00D0D0;

    /* Text colors — light values tuned for readability on dark backgrounds */
    --color-text-primary: #F0ECF5;
    --color-text-secondary: #A099AD;
    --color-text-tertiary: #6B6478;

    /* Surface colors — slightly elevated layers above the page background */
    --color-surface: #1E1730;
    --color-surface-hover: #261E3A;
    --color-border: #2A2240;

    /* Interactive state colors for buttons and links */
    --color-interactive-hover: #FF8C1A;
    --color-interactive-active: #D06000;

    /* Typography — Inter with system fallbacks */
    --font-family: 'Inter', system-ui, -apple-system, sans-serif;

    /* Spacing scale — 4px base unit per design tokens */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 32px;
    --space-xl: 48px;

    /* Layout constraint */
    --max-content-width: 1100px;
}


/* ------------------------------------------------------------
   2. Reset and Base Styles

   Strips browser defaults for consistent cross-browser
   rendering. Sets the dark background and base text color.
   ------------------------------------------------------------ */

/* Remove default margins and use border-box sizing so padding
   doesn't add to element widths */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Page-level defaults: dark background, light text, Inter font */
html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove default list styling */
ul, ol {
    list-style: none;
}

/* Make images responsive by default */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Remove default link underlines — styled individually per context */
a {
    color: var(--color-interactive);
    text-decoration: none;
}

a:hover {
    color: var(--color-interactive-hover);
}


/* ------------------------------------------------------------
   3. Layout Utilities

   Centered content container.
   ------------------------------------------------------------ */

/* Centers content and constrains width for readability */
.container {
    max-width: var(--max-content-width);
    margin-inline: auto;
    padding-inline: var(--space-lg);
}


/* ------------------------------------------------------------
   4. Typography

   Heading and body text styles from the design token scale.
   All heading text uses the primary text color for WCAG AA
   compliance. Brand purple appears as decorative accents
   (underlines, borders) rather than text color, because
   #6820B0 on #15101F does not meet contrast requirements.
   ------------------------------------------------------------ */

h1, h2, h3 {
    color: var(--color-text-primary);
}

/* Section headings: compact with a short purple accent bar */
.section-heading {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-sm);
    border-bottom: 3px solid var(--color-brand);
    display: inline-block;
}


/* ------------------------------------------------------------
   5. Accessibility — Skip-to-Content Link

   Hidden by default, becomes visible when focused via keyboard.
   Lets keyboard and screen reader users jump past the header
   straight to the main content.
   ------------------------------------------------------------ */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: var(--space-md);
    background: var(--color-interactive);
    color: var(--color-bg);
    padding: var(--space-sm) var(--space-md);
    border-radius: 4px;
    font-weight: 600;
    z-index: 1000;
    transition: top 0.2s;
}

/* When the user tabs to this link, slide it into view */
.skip-to-content:focus {
    top: var(--space-md);
    color: var(--color-bg);
}


/* ------------------------------------------------------------
   6. Site Header and Nav Bar

   Logo centered at the top, followed by a thin nav bar with
   a purple-to-cyan gradient accent on its bottom edge. The
   nav bar is shaped like a navigation bar (thin rectangle)
   and ready to hold links when the site expands.
   ------------------------------------------------------------ */
.site-header {
    padding-top: var(--space-lg);
}

/* Logo — compact header size, blend mode knocks out the black
   PNG background against our dark page background */
.header-brand {
    text-align: center;
    padding-bottom: var(--space-lg);
}

.header-logo {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-inline: auto;
    mix-blend-mode: screen;
}

/* Nav bar — thin bordered rectangle with a gradient bottom edge.
   The top/bottom borders define the bar shape; the gradient
   overlays the bottom border as a brand accent. */
.site-nav {
    display: flex;
    align-items: center;
    height: 40px;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    position: relative;
}

/* Purple-to-cyan gradient accent — overlays the bottom border
   of the nav bar with a smooth brand-colored gradient. Cyan is
   used here in its proper decorative role. */
.site-nav::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-brand), var(--color-accent));
}


/* ------------------------------------------------------------
   7. Tagline Strip

   Compact value proposition between the nav bar and the first
   content section. Not a full hero splash — just the headline
   and subtitle in a tight centered block.
   ------------------------------------------------------------ */
.tagline {
    text-align: center;
    padding: var(--space-xl) 0 var(--space-lg);
}

.tagline-headline {
    font-size: 2.25rem;
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: var(--space-sm);
}

.tagline-subtitle {
    font-size: 1.0625rem;
    font-weight: 400;
    line-height: 1.5;
    color: var(--color-text-secondary);
    max-width: 550px;
    margin-inline: auto;
}


/* ------------------------------------------------------------
   8. Section Shared Styles

   Tight vertical padding for a continuous-flow feel. Sections
   are distinguished by content hierarchy and subtle background
   alternation rather than large gaps.
   ------------------------------------------------------------ */
.section {
    padding-block: var(--space-xl);
}

/* Alternate background — used on the About section to create
   visual separation without padding gaps */
.section-alt {
    background-color: var(--color-surface);
}


/* ------------------------------------------------------------
   9. Services Section

   Intro prose, three-card grid, and a closing statement.
   ------------------------------------------------------------ */

/* Intro paragraphs — constrained width for comfortable reading */
.services-intro {
    max-width: 700px;
    margin-bottom: var(--space-lg);
}

.services-intro p {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
}

.services-intro p:last-child {
    color: var(--color-text-primary);
    font-weight: 500;
}

/* Card grid — single column on mobile, three columns on desktop */
.services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

/* Individual service card — elevated surface with a purple top accent */
.service-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-brand);
    border-radius: 8px;
    padding: var(--space-lg);
    transition: background-color 0.2s, transform 0.2s;
}

.service-card:hover {
    background-color: var(--color-surface-hover);
    transform: translateY(-2px);
}

.service-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: var(--space-sm);
}

.service-card p {
    color: var(--color-text-secondary);
    font-size: 0.9375rem;
    line-height: 1.6;
}

/* Broader value statement — centered, slightly emphasized */
.services-broader {
    max-width: 650px;
    margin-inline: auto;
    text-align: center;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    font-style: italic;
}


/* ------------------------------------------------------------
   10. About Section

   First-person narrative. Constrained width for readability.
   The "reduced rates" paragraph gets a subtle visual callout.
   Sits on the alternate background to distinguish from services.
   ------------------------------------------------------------ */
.about-content {
    max-width: 700px;
}

.about-content p {
    margin-bottom: var(--space-md);
    color: var(--color-text-secondary);
}

/* Highlight paragraph for the reduced-rates callout —
   uses a left border in brand purple to draw attention */
.about-highlight {
    border-left: 3px solid var(--color-brand);
    padding-left: var(--space-lg);
    margin-top: var(--space-lg);
    color: var(--color-text-primary) !important;
    font-weight: 500;
}


/* ------------------------------------------------------------
   11. Contact Form Section

   Form wrapped in a card with visual depth — background,
   border, rounded corners, and a subtle shadow give it shape
   and containment so it feels like a cohesive UI element
   rather than fields floating on the page.
   ------------------------------------------------------------ */

/* The card wraps the heading, intro text, and entire form */
.contact-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: var(--space-xl);
    max-width: 720px;
    margin-inline: auto;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(104, 32, 176, 0.1);
}

.contact-card .section-heading {
    margin-bottom: var(--space-md);
}

.contact-intro {
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
    font-size: 0.9375rem;
}

.contact-form {
    width: 100%;
}

/* Two-column row for grouping related fields side by side
   on wider screens (name+email, phone+contact method) */
.form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--space-md);
}

/* Each label + input + error message group */
.form-group {
    margin-bottom: var(--space-md);
}

/* Labels */
.form-group label,
.form-group legend {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.5;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

/* Fieldset reset — remove default browser border/padding */
fieldset.form-group {
    border: none;
}

/* Hint text next to labels (e.g., "(optional)") */
.label-hint {
    font-weight: 400;
    color: var(--color-text-tertiary);
}

/* Text inputs and textarea — darker than the card surface
   so they're visually recessed into the card */
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
    width: 100%;
    padding: 10px var(--space-md);
    font-family: var(--font-family);
    font-size: 0.9375rem;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Placeholder text */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* Focus state — orange border and glow for visibility */
.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--color-interactive);
    box-shadow: 0 0 0 3px rgba(240, 112, 0, 0.15);
}

/* Error state — red border for invalid fields */
.form-group input.input-error,
.form-group textarea.input-error {
    border-color: #E04040;
    box-shadow: 0 0 0 3px rgba(224, 64, 64, 0.15);
}

/* Textarea-specific sizing */
.form-group textarea {
    resize: vertical;
    min-height: 100px;
}

/* Inline error messages below fields */
.form-error {
    display: block;
    font-size: 0.75rem;
    color: #E04040;
    min-height: 1rem;
    margin-top: var(--space-xs);
}

/* Radio button group — horizontal layout */
.radio-group {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
    padding-top: 2px;
}

/* Custom radio button labels */
.radio-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    cursor: pointer;
    font-size: 0.9375rem;
    color: var(--color-text-primary);
}

/* Custom radio button appearance — circle with orange fill when selected */
.radio-label input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-border);
    border-radius: 50%;
    background-color: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.radio-label input[type="radio"]:hover {
    border-color: var(--color-interactive);
}

.radio-label input[type="radio"]:checked {
    border-color: var(--color-interactive);
    background: radial-gradient(
        var(--color-interactive) 40%,
        var(--color-bg) 45%
    );
}

.radio-label input[type="radio"]:focus-visible {
    outline: 2px solid var(--color-interactive);
    outline-offset: 2px;
}

/* Honeypot field — positioned completely off-screen so human
   users never see it, but automated bots will find and fill it */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Phone + extension row — phone takes most of the width,
   extension gets a compact fixed-width input. Both inputs
   inherit base styling from the .form-group input rules.
   The .form-group prefix is required here to match the
   specificity of .form-group input[type="..."] (0,2,1)
   so that width overrides actually take effect. */
.phone-row {
    display: flex;
    gap: var(--space-sm);
    align-items: flex-start;
}

/* Phone input fills the remaining space after extension.
   width: auto overrides the width: 100% from the base rule. */
.form-group .phone-row .phone-input {
    flex: 1;
    min-width: 0;
    width: auto;
}

/* Extension field — narrow, fixed width beside the phone */
.form-group .phone-row .extension-input {
    width: 80px;
    flex-shrink: 0;
    text-align: center;
}

/* Message metadata row — error on the left, character counter
   on the right, sitting just below the textarea */
.message-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: var(--space-xs);
}

.message-meta .form-error {
    margin-top: 0;
    min-height: auto;
}

/* Character counter — subtle by default, shifts color as the
   user approaches or hits the message length limit */
.char-counter {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.counter-warning {
    color: var(--color-interactive);
}

.counter-limit {
    color: #E04040;
}

/* Submit button — orange per brand interactive color */
.btn-submit {
    display: inline-block;
    padding: 10px var(--space-xl);
    font-family: var(--font-family);
    font-size: 0.9375rem;
    font-weight: 600;
    color: white;
    background-color: var(--color-interactive);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

.btn-submit:hover {
    background-color: var(--color-interactive-hover);
}

.btn-submit:active {
    background-color: var(--color-interactive-active);
    transform: scale(0.98);
}

/* Confirmation state — green shift on first click to signal
   "are you sure?" before the actual submission. Reverts
   automatically after a few seconds if not confirmed. */
.btn-submit.btn-confirm {
    background-color: #22C55E;
}

.btn-submit.btn-confirm:hover {
    background-color: #16A34A;
}

/* Disabled state while form is submitting */
.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* Focus ring on the button for keyboard navigation */
.btn-submit:focus-visible {
    outline: 3px solid var(--color-interactive);
    outline-offset: 3px;
}

/* Form status messages (success/error) shown after submission */
.form-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.form-status {
    font-size: 0.875rem;
    font-weight: 500;
    min-height: 1.25rem;
}

.status-success {
    color: #34D399;
}

.status-error {
    color: #E04040;
}


/* ------------------------------------------------------------
   12. Footer

   Simple, understated. Privacy link and copyright.
   ------------------------------------------------------------ */
.site-footer {
    padding-block: var(--space-lg);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-md);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-link {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.footer-link:hover {
    color: var(--color-interactive);
}

.footer-copyright {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}


/* ------------------------------------------------------------
   13. Responsive Breakpoints

   Mobile-first base styles above; overrides for larger screens.
   ------------------------------------------------------------ */

/* Tablet and up — service cards in two columns, form fields
   pair up side by side */
@media (min-width: 640px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

/* Desktop — service cards fill three columns */
@media (min-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tagline-headline {
        font-size: 2.75rem;
    }
}

/* Small screens — tighten spacing and text sizes */
@media (max-width: 639px) {
    .tagline-headline {
        font-size: 1.75rem;
    }

    .section-heading {
        font-size: 1.25rem;
    }

    .header-logo {
        max-width: 200px;
    }

    /* Reduce card padding on small screens */
    .contact-card {
        padding: var(--space-lg);
    }

    /* Stack footer content vertically */
    .footer-content {
        flex-direction: column;
        text-align: center;
    }

    /* Stack form actions vertically */
    .form-actions {
        flex-direction: column;
        align-items: flex-start;
    }
}