/*
Theme Name: BluePeak Editorial
Theme URI: https://bluepeakinnovations.com
Author: Mohsin Ali
Author URI: https://bluepeakinnovations.com
Description: A premium, editorial-style B2B WordPress theme for BluePeak Innovations LLC. Built with reusable modular components, "The Quiet Authority" design system featuring Newsreader serif + Manrope sans-serif typography, teal accent palette, glassmorphism navigation, and page-builder-style flexible content sections.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bluepeak-editorial
Tags: one-column, custom-menu, featured-images, full-width-template, custom-logo, editor-style, block-styles

BluePeak Editorial WordPress Theme, (C) 2024-2026 BluePeak Innovations LLC
BluePeak Editorial is distributed under the terms of the GNU GPL v2 or later.
*/

/* ================================================================
   DESIGN TOKENS — "The Quiet Authority" Design System
   ================================================================ */
:root {
    /* ── Primary Palette ── */
    --bp-primary:               #006a67;
    --bp-primary-container:     #0abab5;
    --bp-on-primary:            #ffffff;
    --bp-on-primary-container:  #004442;
    --bp-primary-fixed:         #6df7f1;
    --bp-primary-fixed-dim:     #4adbd5;
    --bp-on-primary-fixed:      #00201f;
    --bp-on-primary-fixed-var:  #00504d;

    /* ── Secondary Palette ── */
    --bp-secondary:              #4d5f7d;
    --bp-secondary-container:    #c8dbfe;
    --bp-on-secondary:           #ffffff;
    --bp-on-secondary-container: #4e607e;
    --bp-secondary-fixed:        #d6e3ff;
    --bp-secondary-fixed-dim:    #b5c7ea;

    /* ── Tertiary Palette ── */
    --bp-tertiary:              #506261;
    --bp-tertiary-container:    #98aaa9;
    --bp-tertiary-fixed:        #d3e6e5;

    /* ── Surface & Background ── */
    --bp-surface:                  #f7f9ff;
    --bp-surface-bright:           #f7f9ff;
    --bp-surface-dim:              #c9dcf3;
    --bp-surface-container:        #e3efff;
    --bp-surface-container-high:   #d9eaff;
    --bp-surface-container-highest:#d1e4fc;
    --bp-surface-container-low:    #edf4ff;
    --bp-surface-container-lowest: #ffffff;
    --bp-surface-variant:          #d1e4fc;
    --bp-background:               #f7f9ff;

    /* ── On Surface ── */
    --bp-on-surface:         #091d2e;
    --bp-on-surface-variant:  #3c4948;
    --bp-on-background:       #091d2e;

    /* ── Inverse ── */
    --bp-inverse-surface:    #203244;
    --bp-inverse-on-surface: #e8f1ff;
    --bp-inverse-primary:    #4adbd5;

    /* ── Outline ── */
    --bp-outline:         #6c7a79;
    --bp-outline-variant: #bbc9c8;

    /* ── Error ── */
    --bp-error:              #ba1a1a;
    --bp-error-container:    #ffdad6;
    --bp-on-error:           #ffffff;
    --bp-on-error-container: #93000a;

    /* ── Typography ── */
    --bp-font-headline: 'Newsreader', serif;
    --bp-font-body:     'Manrope', sans-serif;
    --bp-font-label:    'Manrope', sans-serif;

    /* ── Spacing Scale ── */
    --bp-space-xs:  8px;
    --bp-space-sm:  16px;
    --bp-space-md:  24px;
    --bp-space-lg:  32px;
    --bp-space-xl:  48px;
    --bp-space-2xl: 64px;
    --bp-space-3xl: 80px;
    --bp-space-4xl: 120px;
    --bp-space-5xl: 160px;

    /* ── Layout ── */
    --bp-max-width:    1440px;
    --bp-gutter:       10%;
    --bp-content-width: 80%;

    /* ── Transitions ── */
    --bp-ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
    --bp-duration-slow:    0.7s;
    --bp-duration-medium:  0.5s;
    --bp-duration-fast:    0.3s;

    /* ── Shadows (Tonal Layering — no drop shadows) ── */
    --bp-shadow-none: none;

    /* ── Border ── */
    --bp-border-editorial: 0.5px solid rgba(187, 201, 200, 0.3);
    --bp-border-ghost:     1px solid rgba(187, 201, 200, 0.2);
}

/* ================================================================
   RESET & BASE
   ================================================================ */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--bp-font-body);
    font-weight: 300;
    color: var(--bp-secondary);
    background-color: var(--bp-surface-container-lowest);
    line-height: 1.6;
    overflow-x: hidden;
}

::selection {
    background-color: var(--bp-primary-container);
    color: var(--bp-on-primary-container);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--bp-font-headline);
    color: var(--bp-on-surface);
    line-height: 1.1;
    font-weight: 300;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--bp-duration-slow) var(--bp-ease-smooth);
}

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

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

input,
textarea,
select {
    font-family: inherit;
    font-size: inherit;
}

/* Screen reader only */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* ================================================================
   UTILITY CLASSES
   ================================================================ */
.golden-gutter {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
}

.editorial-column {
    padding-left: var(--bp-gutter);
    padding-right: var(--bp-gutter);
}

.bp-container {
    max-width: var(--bp-max-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: 48px;
    padding-right: 48px;
}

.bp-label {
    font-family: var(--bp-font-label);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 600;
}

.bp-section-gap {
    padding-top: var(--bp-space-5xl);
    padding-bottom: var(--bp-space-5xl);
}

.bp-component-gap {
    gap: var(--bp-space-lg);
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
.bp-fade-up {
    opacity: 0;
    transform: translateY(20px);
}

.bp-fade-up.bp-visible {
    animation: bpFadeUp var(--bp-duration-slow) var(--bp-ease-smooth) forwards;
}

.bp-fade-up.bp-delay-1 { animation-delay: 0.1s; }
.bp-fade-up.bp-delay-2 { animation-delay: 0.2s; }
.bp-fade-up.bp-delay-3 { animation-delay: 0.3s; }

@keyframes bpFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ================================================================
   WORDPRESS DEFAULTS
   ================================================================ */
.alignleft {
    float: left;
    margin: 0 1.5em 1.5em 0;
}

.alignright {
    float: right;
    margin: 0 0 1.5em 1.5em;
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.875rem;
    color: var(--bp-secondary);
    margin-top: var(--bp-space-xs);
}

/* ================================================================
   RESPONSIVE BREAKPOINTS
   ================================================================ */
@media (max-width: 768px) {
    :root {
        --bp-gutter: 6%;
        --bp-space-5xl: 80px;
        --bp-space-4xl: 64px;
    }

    .bp-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}