/**
 * Main Stylesheet (fmsph_063321.css)
 *
 * Contains global variables, resets, and base typography.
 *
 * Sitename: fmsph
 * Seed: 063321
 */

/* 1. CSS Variables (Root)
-------------------------------------------------- */
:root {
    /* Color Palette: Dark with Neon */
    --fmsph-color-bg-primary: #0D0C1D;      /* Main background */
    --fmsph-color-bg-secondary: #161A30;    /* Card/Section background */
    --fmsph-color-border: #31304D;         /* Borders/Accents */
    --fmsph-color-text-main: #B6BBC4;       /* Main text */
    --fmsph-color-text-headings: #F0ECE5;   /* Headings text */
    --fmsph-color-accent-neon: #F0ECE5;     /* Bright accent/Neon */
    --fmsph-color-primary: #6d5dd3;         /* A distinct primary color for buttons */
    --fmsph-color-primary-hover: #5849b1;   /* Hover state for primary */

    /* Typography */
    --fmsph-font-heading: 'Oswald', sans-serif;
    --fmsph-font-body: 'Inter', sans-serif;

    /* Spacing & Borders */
    --fmsph-border-radius: 8px;
    --fmsph-section-padding: 80px 0;
    --fmsph-transition-speed: 0.3s;
}

/* 2. Basic Reset & Global Styles
-------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body.fmsph-body {
    font-family: var(--fmsph-font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--fmsph-color-text-main);
    background-color: var(--fmsph-color-bg-primary);
    overflow-x: hidden;

    /* Per instructions, disable text selection globally */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Allow text selection on inputs */
input, textarea {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}


/* 3. Base Typography
-------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fmsph-font-heading);
    color: var(--fmsph-color-text-headings);
    line-height: 1.2;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

p {
    margin-bottom: 1rem;
}

a {
    color: var(--fmsph-color-accent-neon);
    text-decoration: none;
    transition: color var(--fmsph-transition-speed) ease;
}

a:hover {
    color: var(--fmsph-color-primary);
    text-decoration: underline;
}

img {
    max-width: 100%;
    height: auto;
}

/* 4. Reusable Section & Component Styles
-------------------------------------------------- */

/* Base Section Styling */
.fmsph-section {
    padding: var(--fmsph-section-padding);
    position: relative;
}

.fmsph-section-off-bg {
    background-color: var(--fmsph-color-bg-secondary);
    border-top: 1px solid var(--fmsph-color-border);
    border-bottom: 1px solid var(--fmsph-color-border);
}

/* Section Header (used in many blocks) */
.fmsph-section-header {
    max-width: 700px;
    margin-bottom: 4rem;
}

.fmsph-section-tagline {
    display: inline-block;
    color: var(--fmsph-color-accent-neon);
    font-family: var(--fmsph-font-body);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.fmsph-section-title {
    font-size: 2.8rem;
    font-weight: 700;
}

.fmsph-section-subtitle {
    font-size: 1.1rem;
    color: var(--fmsph-color-text-main);
}

@media (max-width: 768px) {
    .fmsph-section-title {
        font-size: 2.2rem;
    }
    .fmsph-section {
        padding: 60px 0;
    }
}