/*
Theme Name:   DesignDotIT
Theme URI:    https://designdotit.com
Description:  Custom FSE child theme for DesignDotIT digital agency  EAI, Automation, Web & SEO
Author:       DesignDotIT
Author URI:   https://designdotit.com
Template:     twentytwentyfour
Version:      1.0.2
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License:      GPL-2.0-or-later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  designdotit
Tags:         full-site-editing, block-themes, dark, agency, digital, ai, automation
*/

/* ============================================================
   GOOGLE FONTS IMPORT
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

/* ============================================================
   CSS CUSTOM PROPERTIES  EDESIGN TOKENS
   ============================================================ */
:root {
    /* --- Background & Surface --- */
    --ddit-bg:               #0B1120;
    --ddit-surface:          #131F35;
    --ddit-surface-raised:   #1A2845;
    --ddit-border:           #1E3050;

    /* --- Text --- */
    --ddit-text-primary:     #EDF2FF;
    --ddit-text-secondary:   #8FA3C0;
    --ddit-text-muted:       #4D6580;

    /* --- Accent Colors --- */
    --ddit-accent-cyan:      #00D4FF;
    --ddit-accent-blue:      #0077FF;
    --ddit-accent-hover:     #00AAFF;

    /* --- Typography --- */
    --ddit-font-heading:     'Outfit', system-ui, -apple-system, sans-serif;
    --ddit-font-body:        'Inter', system-ui, -apple-system, sans-serif;
    --ddit-font-mono:        'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

    /* --- Font Sizes (fluid) --- */
    --ddit-text-xs:          clamp(0.6875rem, 0.65rem + 0.1875vw, 0.75rem);
    --ddit-text-sm:          clamp(0.8125rem, 0.775rem + 0.1875vw, 0.875rem);
    --ddit-text-base:        clamp(0.9375rem, 0.9rem + 0.1875vw, 1rem);
    --ddit-text-md:          clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
    --ddit-text-lg:          clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);
    --ddit-text-xl:          clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
    --ddit-text-2xl:         clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);
    --ddit-text-3xl:         clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);
    --ddit-text-4xl:         clamp(2.25rem, 1.95rem + 1.5vw, 3rem);
    --ddit-text-5xl:         clamp(2.625rem, 2.175rem + 2.25vw, 3.75rem);
    --ddit-text-6xl:         clamp(3rem, 2.4rem + 3vw, 4.5rem);
    --ddit-text-7xl:         clamp(3.5rem, 2.75rem + 3.75vw, 6rem);

    /* --- Spacing Scale --- */
    --ddit-space-1:          0.25rem;
    --ddit-space-2:          0.5rem;
    --ddit-space-3:          0.75rem;
    --ddit-space-4:          1rem;
    --ddit-space-5:          1.25rem;
    --ddit-space-6:          1.5rem;
    --ddit-space-7:          1.75rem;
    --ddit-space-8:          2rem;
    --ddit-space-10:         2.5rem;
    --ddit-space-12:         3rem;
    --ddit-space-16:         4rem;
    --ddit-space-20:         5rem;
    --ddit-space-24:         6rem;
    --ddit-space-32:         8rem;

    /* --- Border Radius --- */
    --ddit-radius-btn:       6px;
    --ddit-radius-card:      12px;
    --ddit-radius-lg:        16px;
    --ddit-radius-full:      9999px;

    /* --- Content Widths --- */
    --ddit-content-width:    720px;
    --ddit-wide-width:       1200px;

    /* --- Shadows / Glows --- */
    --ddit-shadow-glow-sm:   0 0 12px rgba(0, 212, 255, 0.15);
    --ddit-shadow-glow-md:   0 0 24px rgba(0, 212, 255, 0.25);
    --ddit-shadow-glow-lg:   0 0 48px rgba(0, 212, 255, 0.35);
    --ddit-shadow-card:      0 4px 24px rgba(0, 0, 0, 0.4);
    --ddit-shadow-elevated:  0 8px 40px rgba(0, 0, 0, 0.6);

    /* --- Transitions --- */
    --ddit-transition:       all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --ddit-transition-fast:  all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --ddit-transition-slow:  all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

body {
    background-color: var(--ddit-bg);
    color: var(--ddit-text-primary);
    font-family: var(--ddit-font-body);
    font-size: var(--ddit-text-base);
    font-weight: 400;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin: 0;
    padding: 0;
}

/* ============================================================
   HEADINGS
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
    font-family: var(--ddit-font-heading);
    color: var(--ddit-text-primary);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin-top: 0;
}

h1, .wp-block-heading.has-text-align-left:is(h1) { font-size: var(--ddit-text-6xl); font-weight: 800; }
h2  { font-size: var(--ddit-text-4xl); font-weight: 700; }
h3  { font-size: var(--ddit-text-3xl); font-weight: 700; }
h4  { font-size: var(--ddit-text-2xl); font-weight: 700; }
h5  { font-size: var(--ddit-text-xl);  font-weight: 600; }
h6  { font-size: var(--ddit-text-sm);  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ddit-accent-cyan); }

/* ============================================================
   LINKS
   ============================================================ */
a {
    color: var(--ddit-accent-cyan);
    text-decoration: none;
    transition: var(--ddit-transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--ddit-accent-hover);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:focus-visible {
    outline: 2px solid var(--ddit-accent-cyan);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ============================================================
   PARAGRAPHS
   ============================================================ */
p {
    color: var(--ddit-text-secondary);
    line-height: 1.8;
    margin-top: 0;
    margin-bottom: var(--ddit-space-4);
}

/* ============================================================
   BUTTONS  EBASE
   ============================================================ */
.wp-block-button__link,
.wp-element-button,
button:not(.wp-block-search__button):not(.wp-block-navigation__responsive-container-open):not(.wp-block-navigation__responsive-container-close) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--ddit-font-heading);
    font-size: var(--ddit-text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.75rem 1.75rem;
    border-radius: var(--ddit-radius-btn);
    border: 2px solid transparent;
    cursor: pointer;
    transition: var(--ddit-transition);
    white-space: nowrap;
    /* Default filled style */
    background-color: var(--ddit-accent-cyan);
    color: var(--ddit-bg);
    border-color: var(--ddit-accent-cyan);
    line-height: 1;
}

.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--ddit-accent-hover);
    border-color: var(--ddit-accent-hover);
    color: var(--ddit-bg);
    transform: translateY(-2px);
    box-shadow: var(--ddit-shadow-glow-md);
    text-decoration: none;
}

.wp-block-button__link:focus-visible {
    outline: 2px solid var(--ddit-accent-cyan);
    outline-offset: 3px;
}

/* --- Outline Button --- */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button__link.is-style-outline {
    background-color: transparent;
    color: var(--ddit-accent-cyan);
    border-color: var(--ddit-accent-cyan);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--ddit-accent-cyan);
    color: var(--ddit-bg);
    box-shadow: var(--ddit-shadow-glow-md);
    transform: translateY(-2px);
}

/* --- Secondary/Ghost Button --- */
.wp-block-button.is-style-ghost .wp-block-button__link {
    background-color: transparent;
    color: var(--ddit-text-secondary);
    border-color: var(--ddit-border);
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
    border-color: var(--ddit-text-secondary);
    color: var(--ddit-text-primary);
    transform: translateY(-2px);
}

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

/* Eyebrow text  Esmall all-caps cyan label above headings */
.ddit-eyebrow {
    display: inline-block;
    font-family: var(--ddit-font-body);
    font-size: var(--ddit-text-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--ddit-accent-cyan);
    margin-bottom: var(--ddit-space-3);
    line-height: 1;
}

/* Badge  Esmall rounded label */
.ddit-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--ddit-font-body);
    font-size: var(--ddit-text-xs);
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ddit-accent-cyan);
    background-color: rgba(0, 212, 255, 0.1);
    border: 1px solid rgba(0, 212, 255, 0.25);
    padding: 0.3rem 0.75rem;
    border-radius: var(--ddit-radius-full);
    line-height: 1;
}

/* Pill  Erounded full-radius tag */
.ddit-pill {
    display: inline-block;
    font-family: var(--ddit-font-body);
    font-size: var(--ddit-text-xs);
    font-weight: 500;
    color: var(--ddit-text-secondary);
    background-color: var(--ddit-surface-raised);
    border: 1px solid var(--ddit-border);
    padding: 0.25rem 0.875rem;
    border-radius: var(--ddit-radius-full);
    line-height: 1.4;
    white-space: nowrap;
}

/* Section container helpers */
.ddit-section {
    padding-top: var(--ddit-space-24);
    padding-bottom: var(--ddit-space-24);
}

.ddit-section--sm {
    padding-top: var(--ddit-space-16);
    padding-bottom: var(--ddit-space-16);
}

.ddit-container {
    max-width: var(--ddit-wide-width);
    margin-inline: auto;
    padding-inline: var(--ddit-space-6);
    width: 100%;
}

.ddit-container--narrow {
    max-width: var(--ddit-content-width);
    margin-inline: auto;
    padding-inline: var(--ddit-space-6);
    width: 100%;
}

/* Section header helper */
.ddit-section-header {
    text-align: center;
    max-width: 640px;
    margin-inline: auto;
    margin-bottom: var(--ddit-space-16);
}

.ddit-section-header h2 {
    margin-bottom: var(--ddit-space-4);
}

.ddit-section-header p {
    font-size: var(--ddit-text-lg);
}

/* Star rating */
.ddit-stars {
    color: var(--ddit-accent-cyan);
    font-size: var(--ddit-text-md);
    letter-spacing: 0.1em;
    display: block;
    margin-bottom: var(--ddit-space-3);
}

/* ============================================================
   RESPONSIVE CONTAINER HELPERS
   ============================================================ */
.wp-block-group.is-layout-constrained > *,
.wp-block-group.is-layout-flow > * {
    max-width: var(--ddit-content-width);
    margin-inline: auto;
}

.wp-block-group.is-layout-constrained > .alignwide,
.wp-block-group.is-layout-flow > .alignwide {
    max-width: var(--ddit-wide-width);
}

.wp-block-group.is-layout-constrained > .alignfull,
.wp-block-group.is-layout-flow > .alignfull {
    max-width: 100%;
}

/* ============================================================
   GUTENBERG BLOCK RESETS
   ============================================================ */

/* Remove default TT4 white background from groups */
.wp-block-group {
    background-color: transparent;
}

/* Constrain inner block padding */
.wp-block-post-content {
    padding: 0;
}

/* Fix Gutenberg column gaps */
.wp-block-columns {
    gap: var(--ddit-space-6);
}

/* Fix image borders */
.wp-block-image img {
    border-radius: var(--ddit-radius-card);
    display: block;
    height: auto;
    width: 100%;
}

/* Fix figure margin */
figure {
    margin: 0;
}

/* ============================================================
   SELECTION COLOR
   ============================================================ */
::selection {
    background-color: rgba(0, 212, 255, 0.25);
    color: var(--ddit-text-primary);
}

/* ============================================================
   SCROLLBAR STYLING (Webkit)
   ============================================================ */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--ddit-bg);
}

::-webkit-scrollbar-thumb {
    background: var(--ddit-border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ddit-text-muted);
}

/* ============================================================
   RESPONSIVE  EMOBILE
   ============================================================ */
@media (max-width: 781px) {
    :root {
        --ddit-space-24: 4rem;
        --ddit-space-20: 3rem;
        --ddit-space-16: 2.5rem;
    }

    h1 { font-size: var(--ddit-text-4xl); }
    h2 { font-size: var(--ddit-text-3xl); }
    h3 { font-size: var(--ddit-text-2xl); }

    .wp-block-columns {
        flex-direction: column;
    }

    .wp-block-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

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

@media (max-width: 480px) {
    .ddit-container,
    .ddit-container--narrow {
        padding-inline: var(--ddit-space-4);
    }

    .wp-block-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .wp-block-button {
        width: 100%;
    }

    .wp-block-button__link {
        width: 100%;
        justify-content: center;
    }
}