/*
Theme Name: Maxvidel Theme
Theme URI: https://www.maxvidelconsult.com
Author: GressTech Ltd
Author URI: https://gresstech.com
Description: Custom theme for Maxvidel Limited — a development consulting firm in Abuja, Nigeria.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Proprietary
Text Domain: maxvidel
Tags: custom, business, consulting
*/

/* ========================================
   GOOGLE FONDS — CDN
   ======================================== */

/* Playfair Display (headings) + Jost (body) */
@import url('https://fonts.googleapis.com/css2?family=Jost:wght@400;500;600;700&family=Playfair+Display:wght@400;600;700&display=swap');

/* ========================================
   CSS CUSTOM PROPERTIES
   ======================================== */

:root {

    /* ---- Colour Palette ---- */

    /* Primary — Maxvidel brand greens */
    --color-forest-green:  #1B6B3A;  /* Primary brand, nav, headings, buttons */
    --color-emerald-green: #2E8B57;  /* Hover states, highlights, accents */
    --color-dark-green:    #0D4F26;  /* Footer background, dark sections */

    /* Secondary — Maxvidel gold */
    --color-gold:          #B8975C;  /* Accent, borders, secondary CTAs */
    --color-light-gold:    #FDF6ED;  /* Warm highlight backgrounds */

    /* Neutrals */
    --color-white:         #FFFFFF;  /* Page background */
    --color-off-white:     #F0F5ED;  /* Alternating section backgrounds */
    --color-light-gray:    #F5F5F5;  /* Card backgrounds */
    --color-gray:          #666666;  /* Secondary text */
    --color-dark:          #1A1A1A;  /* Body text */

    /* Functional */
    --color-error:         #C0392B;
    --color-success:       #27AE60;
    --color-info:          #2980B9;

    /* ---- Typography ---- */
    --font-heading: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body:    'Jost', 'Segoe UI', Arial, Helvetica, sans-serif;

    /* Type Scale */
    --text-h1:    2.5rem;      /* 40px — Page titles */
    --text-h2:    2rem;        /* 32px — Section headings */
    --text-h3:    1.5rem;      /* 24px — Subsection headings */
    --text-h4:    1.25rem;     /* 20px — Card titles */
    --text-body:  1rem;        /* 16px — Paragraph text */
    --text-small: 0.875rem;    /* 14px — Captions, meta */

    /* Line Heights */
    --leading-tight:   1.2;    /* Headings */
    --leading-normal:  1.6;    /* Body text */
    --leading-relaxed: 1.8;    /* Long-form content */

    /* ---- Spacing System (8px base unit) ---- */
    --space-1:  0.5rem;   /* 8px */
    --space-2:  1rem;     /* 16px */
    --space-3:  1.5rem;   /* 24px */
    --space-4:  2rem;     /* 32px */
    --space-6:  3rem;     /* 48px */
    --space-8:  4rem;     /* 64px */
    --space-12: 6rem;     /* 96px — Section padding */
    --space-16: 8rem;     /* 128px — Hero sections */

    /* ---- Breakpoints (reference only — use in media queries) ---- */
    --bp-sm:  576px;   /* Large phones */
    --bp-md:  768px;   /* Tablets */
    --bp-lg:  992px;   /* Small desktops */
    --bp-xl:  1200px;  /* Standard desktops */
    --bp-xxl: 1400px;  /* Large screens */

    /* ---- Layout ---- */
    --container-max:    1200px;
    --container-narrow: 800px;  /* Blog posts, long-form text */

    /* ---- Shadows ---- */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);

    /* ---- Border Radius ---- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-full: 50%;

    /* ---- Transitions ---- */
    --transition-fast:   0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow:   0.6s ease;
}

/* ========================================
   BASE RESET
   ======================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 100%;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 400;
    line-height: var(--leading-normal);
    color: var(--color-dark);
    background-color: var(--color-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ---- Typography Defaults ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: var(--leading-tight);
    color: var(--color-dark);
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); }

p {
    margin-bottom: var(--space-2);
}

p:last-child {
    margin-bottom: 0;
}

a {
    color: var(--color-forest-green);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover,
a:focus {
    color: var(--color-emerald-green);
}

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

ul,
ol {
    padding-left: var(--space-3);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: var(--font-body);
}

/* ---- Layout Utilities ---- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-right: auto;
    margin-left: auto;
    padding-right: var(--space-2);
    padding-left: var(--space-2);
}

.container--narrow {
    max-width: var(--container-narrow);
}

/* ========================================
   BUTTONS
   ======================================== */

.btn-primary {
    display: inline-block;
    background-color: var(--color-forest-green);
    color: var(--color-white);
    border: 2px solid var(--color-forest-green);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-normal), color var(--transition-normal), border-color var(--transition-normal);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-emerald-green);
    border-color: var(--color-emerald-green);
    color: var(--color-white);
}

.btn-secondary {
    display: inline-block;
    background-color: transparent;
    color: var(--color-forest-green);
    border: 2px solid var(--color-forest-green);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: var(--color-forest-green);
    color: var(--color-white);
}

.btn-accent {
    display: inline-block;
    background-color: var(--color-gold);
    color: var(--color-white);
    border: 2px solid var(--color-gold);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.btn-accent:hover,
.btn-accent:focus {
    background-color: var(--color-dark-green);
    border-color: var(--color-dark-green);
    color: var(--color-white);
}

/* ---- Outline variant (for dark backgrounds) ---- */
.btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

.btn-outline:hover,
.btn-outline:focus {
    background-color: var(--color-white);
    color: var(--color-forest-green);
}

/* ========================================
   ACCESSIBILITY
   ======================================== */

/* Skip to content link */
.skip-to-content {
    position: absolute;
    top: -999px;
    left: var(--space-2);
    background-color: var(--color-forest-green);
    color: var(--color-white);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    font-weight: 600;
    z-index: 9999;
    transition: top 0s;
}

.skip-to-content:focus {
    top: var(--space-2);
}

/* Focus styles */
:focus-visible {
    outline: 3px solid var(--color-gold);
    outline-offset: 2px;
}

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ========================================
   SECTION PATTERNS
   ======================================== */

.section {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
}

.section--alt {
    background-color: var(--color-off-white);
}

.section--dark {
    background-color: var(--color-dark-green);
    color: var(--color-white);
}

.section--dark h2,
.section--dark h3,
.section--dark h4 {
    color: var(--color-white);
}

.section--green {
    background-color: var(--color-forest-green);
    color: var(--color-white);
}

.section__header {
    margin-bottom: var(--space-8);
    text-align: center;
}

.section__title {
    margin-bottom: var(--space-2);
}

.section__subtitle {
    color: var(--color-gray);
    font-size: var(--text-h4);
    max-width: 600px;
    margin-right: auto;
    margin-left: auto;
}

.section--dark .section__subtitle,
.section--green .section__subtitle {
    color: rgba(255, 255, 255, 0.8);
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-gold    { color: var(--color-gold); }
.text-green   { color: var(--color-forest-green); }
.text-white   { color: var(--color-white); }
.text-gray    { color: var(--color-gray); }
.text-small   { font-size: var(--text-small); }

.font-heading { font-family: var(--font-heading); }
.font-body    { font-family: var(--font-body); }
.font-700     { font-weight: 700; }
.font-600     { font-weight: 600; }
.font-400     { font-weight: 400; }

.label--section {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-gold);
    margin-bottom: var(--space-2);
}

.no-results {
    color: var(--color-gray);
    font-style: italic;
}