/*
Theme Name: Edderton Scott
Theme URI: https://eddertonscott.com
Author: Edderton Scott
Author URI: https://eddertonscott.com
Description: Custom theme for Edderton Scott business systems consultancy. Zero Elementor dependency.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: Private
Text Domain: edderton-scott
*/

/* =========================================
   DESIGN TOKENS
   ========================================= */
:root {
    --es-bg:          #FAFAF8;
    --es-bg-pure:     #ffffff;
    --es-panel:       #f4f4f2;
    --es-dark:        #1a1a1a;
    --es-dark-panel:  #222222;
    --es-dark-border: #333333;
    --es-border:      #e0e0e0;
    --es-text:        #1a1a1a;
    --es-grey-text:   #5a5a5a;
    --es-grey-label:  #999999;
    --es-font-body:   'Urbanist', sans-serif;
    --es-font-head:   'Syne', sans-serif;
    --es-width:       1280px;
    --es-radius:      4px;
    --es-spacing:     110px;

    /* Transition speeds */
    --es-t-fast:   0.15s;
    --es-t-base:   0.25s;
    --es-t-slow:   0.4s;
    --es-t-ease:   cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================================
   GLOBAL RESET
   ========================================= */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--es-font-body);
    color: var(--es-text);
    background: var(--es-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--es-font-head);
    font-weight: 700;
    margin: 0 0 24px 0;
    color: var(--es-text);
    line-height: 1.15;
}

h1 { letter-spacing: -0.035em; }
h2 { letter-spacing: -0.025em; }
h3 { letter-spacing: -0.01em; }

p {
    margin: 0 0 24px 0;
    color: var(--es-grey-text);
    font-size: 18px;
    line-height: 1.75;
}

a {
    text-decoration: none;
    color: inherit;
    transition: opacity var(--es-t-fast);
}

ul, ol {
    padding-left: 20px;
}

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

/* =========================================
   UTILITY CLASSES
   ========================================= */
.es-container {
    max-width: var(--es-width);
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.es-section-label {
    font-family: var(--es-font-body);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    font-weight: 700;
    color: var(--es-grey-label);
    margin-bottom: 20px;
    display: block;
}

/* Dark section variant */
.es-dark-section .es-section-label {
    color: rgba(255,255,255,0.4);
}

/* =========================================
   BUTTONS
   ========================================= */
.es-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--es-text);
    font-family: var(--es-font-body);
    font-weight: 700;
    font-size: 13px;
    padding: 14px 28px;
    border: 1px solid var(--es-text);
    border-radius: var(--es-radius);
    cursor: pointer;
    transition: background var(--es-t-fast), color var(--es-t-fast), border-color var(--es-t-fast), transform var(--es-t-base) var(--es-t-ease), box-shadow var(--es-t-base) var(--es-t-ease);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    min-width: 160px;
    text-decoration: none;
}

.es-btn:hover {
    background: var(--es-text);
    color: var(--es-bg);
    opacity: 1;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.es-btn:active {
    transform: translateY(0);
    box-shadow: none;
}

.es-btn.secondary {
    background: var(--es-text);
    border-color: var(--es-text);
    color: var(--es-bg);
}

.es-btn.secondary:hover {
    background: transparent;
    border-color: var(--es-text);
    color: var(--es-text);
}

/* Dark section button variants */
.es-dark-section .es-btn {
    border-color: rgba(255,255,255,0.6);
    color: #fff;
}
.es-dark-section .es-btn:hover {
    background: #fff;
    color: var(--es-dark);
    border-color: #fff;
}

.es-text-link {
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--es-text);
    border-bottom: 1px solid currentColor;
    padding-bottom: 2px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    transition: opacity var(--es-t-fast), gap var(--es-t-base) var(--es-t-ease);
}

.es-text-link:hover {
    opacity: 0.6;
    gap: 10px;
}

/* =========================================
   LAYOUT WRAPPER
   ========================================= */
#es-site-wrap {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#es-main-content {
    flex: 1;
    padding: 60px 24px;
}

.es-page-content {
    max-width: var(--es-width);
    margin: 0 auto;
}

/* =========================================
   DARK SECTION BASE
   ========================================= */
.es-dark-section {
    background: var(--es-dark);
    color: #fff;
}

.es-dark-section h1,
.es-dark-section h2,
.es-dark-section h3,
.es-dark-section h4 {
    color: #fff;
}

.es-dark-section p {
    color: rgba(255,255,255,0.65);
}

/* =========================================
   PAGINATION
   ========================================= */
.es-pagination {
    margin-top: 60px;
    text-align: center;
    width: 100%;
    display: flex;
    justify-content: center;
}

.es-pagination .page-numbers {
    display: inline-flex;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.es-pagination a,
.es-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--es-border);
    border-radius: var(--es-radius);
    text-decoration: none;
    color: var(--es-text);
    font-weight: 600;
    font-size: 14px;
    transition: background var(--es-t-fast), color var(--es-t-fast), border-color var(--es-t-fast);
}

.es-pagination a:hover,
.es-pagination span.current {
    background: var(--es-text);
    color: #fff;
    border-color: var(--es-text);
}

/* =========================================
   ADMIN BAR OFFSET
   ========================================= */
body.admin-bar #es-header-root {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar #es-header-root {
        top: 46px;
    }
}