/* ======================================================
   MCP Executive Design Tokens
   
   A clean, professional design system for WordPress sites
   using the RetroGeek theme. Emphasizes readability,
   consistent spacing, and a refined sage-green palette.
   ====================================================== */


/* ------------------------------------------------------
   1. CSS CUSTOM PROPERTIES (Design Tokens)
   
   Central place to define all reusable values.
   Change these to update colors/spacing site-wide.
   ------------------------------------------------------ */

:root {
    /* Brand Colors - Sage Green Palette */
    --mcp-header: #4FA675;           /* Deep Moss – used for headings */
    --mcp-link: #7FBF9E;             /* Soft Sage – default link color */
    --mcp-link-hover: #6FBF8A;       /* Slightly darker sage for hover states */

    /* Button Colors */
    --mcp-button: #6FBF8A;           /* Primary button background */
    --mcp-button-hover: #5EAD7C;     /* Darker shade for button hover */

    /* Text Colors */
    --mcp-body-text: #d6d6d6;        /* Light gray for body text (dark theme) */
    --mcp-dark-text: #0b0b0b;        /* Near-black for text on light backgrounds */

    /* Layout Constraints */
    --mcp-content-width: 1100px;     /* Maximum width for readable content */
    --mcp-content-padding: 2rem;     /* Horizontal padding for content areas */
}


/* ------------------------------------------------------
   2. WEB FONTS
   
   IBM Plex Sans – A professional, highly legible typeface
   suitable for executive/corporate contexts.
   ------------------------------------------------------ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');


/* ------------------------------------------------------
   3. BASE TYPOGRAPHY
   
   Default font settings applied to the entire document.
   ------------------------------------------------------ */

body {
    font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont,
                 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
                 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.65;               /* Comfortable reading line height */
    color: var(--mcp-body-text);
}

/* Body text styling */
p,
li {
    font-weight: 400;
    color: var(--mcp-body-text);
}


/* ------------------------------------------------------
   4. HEADINGS
   
   Consistent heading styles with proper visual hierarchy.
   Uses slightly tighter letter-spacing for a polished look.
   ------------------------------------------------------ */

h1,
h2,
h3 {
    font-family: 'IBM Plex Sans', sans-serif;
    letter-spacing: 0.02em;

    /* Prevent awkward word breaks in headings */
    word-break: normal;
    overflow-wrap: normal;
    hyphens: none;
}

h1 {
    font-weight: 600;                /* Bold for primary headings */
}

h2,
h3 {
    font-weight: 500;                /* Medium weight for subheadings */
}

/* Page-specific heading styles (within .page context) */
.page h2 {
    color: var(--mcp-header);
    margin-top: 3rem;                /* Extra spacing above sections */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 0.5rem;
}

.page h3 {
    color: var(--mcp-header);
}


/* ------------------------------------------------------
   5. LINKS
   
   Inline text links (not buttons). Uses subtle underline
   styling that becomes more prominent on hover.
   ------------------------------------------------------ */

.entry-content a {
    color: var(--mcp-link);
    text-decoration: underline;
    text-decoration-color: rgba(127, 191, 158, 0.4);  /* Faded underline */
    text-underline-offset: 2px;                       /* Slight gap below text */
}

.entry-content a:hover {
    color: var(--mcp-link-hover);
    text-decoration-color: var(--mcp-link-hover);    /* Solid underline on hover */
}


/* ------------------------------------------------------
   6. BUTTONS
   
   Primary action buttons with consistent styling.
   Used for forms, CTAs, and Gutenberg button blocks.
   ------------------------------------------------------ */

button,
input[type="button"],
input[type="submit"],
.wp-block-button__link,
a.button {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 500;
    letter-spacing: 0.02em;

    /* Sizing */
    padding: 0.75rem 1.5rem;
    min-width: 220px;

    /* Appearance */
    border-radius: 4px;
    border: none;
    text-transform: none;            /* No uppercase transformation */
    line-height: 1.2;

    /* Colors */
    background-color: var(--mcp-button);
    color: var(--mcp-dark-text);
    text-align: center;

    /* Smooth hover transition */
    transition: background-color 0.15s ease-in-out;
}

button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
a.button:hover {
    background-color: var(--mcp-button-hover);
}


/* ------------------------------------------------------
   7. LAYOUT – CONTENT WIDTH CONSTRAINTS
   
   Limits content to a comfortable reading width (~1100px).
   Centers content and adds consistent horizontal padding.
   ------------------------------------------------------ */

.site-content,
.site-main,
.content-area,
.page .entry-content {
    max-width: var(--mcp-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mcp-content-padding);
    padding-right: var(--mcp-content-padding);
}


/* ------------------------------------------------------
   8. SITE BRANDING (Title + Tagline)
   
   Styles for the site title and description/tagline area.
   Left-aligned with consistent width constraints.
   ------------------------------------------------------ */

.site-branding {
    text-align: left;
    max-width: var(--mcp-content-width);
    margin-left: auto;
    margin-right: auto;
}

.site-title {
    margin-bottom: 0.2rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;             /* Prevent title from wrapping */
}

.site-title a {
    white-space: nowrap;
}

.site-title,
.site-title a,
.site-description {
    font-family: 'IBM Plex Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.site-description {
    margin-top: 0;
    font-size: 0.95rem;
    font-weight: 400;
    opacity: 0.85;                   /* Slightly muted tagline */
}


/* ------------------------------------------------------
   9. RETROGEEK THEME – Tagline Container Override
   
   Aligns the RetroGeek theme's subtitle/tagline container
   with the main content column.
   ------------------------------------------------------ */

#rgcontainer {
    text-align: left !important;
    margin-bottom: -0.4rem !important;  /* Tighten spacing below */
    margin-top: 0.25rem !important;     /* Small gap above */

    /* Match content column width */
    max-width: var(--mcp-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: var(--mcp-content-padding) !important;
    padding-right: var(--mcp-content-padding) !important;
}


/* ------------------------------------------------------
   10. HEADER ELEMENTS – Width Alignment
   
   Ensures all header components align with the main
   content column for visual consistency.
   ------------------------------------------------------ */

.site-header,
.site-header-inner,
.site-branding,
.site-title,
.site-description,
header .inner,
header .branding,
header .site-branding {
    max-width: var(--mcp-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mcp-content-padding);
    padding-right: var(--mcp-content-padding);
    box-sizing: border-box;
}

/* Header logo/image constraints */
.site-header img {
    max-height: 64px;
    filter: saturate(75%);           /* Slightly desaturated for subtlety */
    box-shadow: none;
}


/* ------------------------------------------------------
   11. NAVIGATION – Width Alignment
   
   Constrains navigation menus to match the content width.
   Supports various WordPress theme nav class patterns.
   ------------------------------------------------------ */

/* Navigation wrapper containers */
.site-header nav,
.site-header .nav,
.site-header .navbar,
.site-header .menu,
.site-header .menu-bar,
.site-header .menu-header,
.site-header .menu-navigation,
.site-header .navigation,
header nav,
header .nav,
header .navbar,
header .menu,
header .menu-bar,
header .menu-header,
header .menu-navigation,
header .navigation {
    max-width: var(--mcp-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mcp-content-padding);
    padding-right: var(--mcp-content-padding);
    box-sizing: border-box;
}

/* Navigation menu lists */
.site-header nav ul,
.site-header .menu ul,
.site-header .nav ul,
.site-header .navbar ul,
header nav ul,
header .menu ul,
header .nav ul,
header .navbar ul,
ul.menu,
ul#menu,
ul.nav-menu {
    max-width: var(--mcp-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
}

/* Prevent menu items from spreading across full width */
.site-header nav ul,
header nav ul,
ul.nav-menu {
    justify-content: flex-start;     /* Left-align menu items */
}

.page .entry-title {
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
    font-weight: 600;
    letter-spacing: 0.015em;
}
/* ======================================================
   FINAL FIX: Neutralize RetroGeek header text centering
   ====================================================== */

/* RetroGeek centers header text globally — undo that */
header#masthead,
header#masthead .row,
header#masthead .eight.columns {
  text-align: left !important;
}

/* Ensure site title text follows left edge of column */
header#masthead .site-title,
header#masthead .site-title a,
header#masthead .site-title h1 {
  text-align: left !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Make sure the link doesn’t stretch and re-center */
header#masthead .site-title a {
  display: inline-block !important;
}