/**
 * GITS-OS Window Styles
 * Window frame, titlebar, terminal, and quick-links
 */

/* === OS Window Frame === */
.gits-window {
    background: var(--gits-bg-window);
    border: var(--gits-window-border);
    border-radius: var(--gits-window-radius);
    box-shadow: var(--gits-shadow);
    overflow: hidden;
    margin: 20px 0; /* horizontal margin removed — parent controls spacing */
    transition: all 0.3s ease;
    /* Reset any inherited padding so titlebar sits flush */
    padding: 0 !important;
}

/* Ensure window children use flow layout, not inherited flex */
.gits-window > .wp-block-group:not(.gits-titlebar) {
    display: block;
}

.gits-window:hover {
    border-color: var(--gits-border-active);
    box-shadow: var(--gits-shadow-strong);
}

/* Window title bar — forced flex row for consistent alignment.
   Must stretch full width of parent with NO inherited padding overrides. */
.gits-titlebar {
    background: var(--gits-bg-titlebar);
    min-height: var(--gits-titlebar-height);
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 16px !important; /* override any responsive injection */
    margin: 0 !important; /* no inherited margins */
    border-bottom: 1px solid var(--gits-border);
    border-radius: var(--gits-window-radius) var(--gits-window-radius) 0 0;
    user-select: none;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Override WordPress layout classes that may conflict with titlebar flex */
.gits-titlebar.is-layout-flex,
.gits-titlebar.is-layout-constrained,
.gits-titlebar.is-layout-flow {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.gits-titlebar > * {
    flex-shrink: 0;
}

.gits-titlebar p {
    margin: 0 !important;
    line-height: 1;
    display: flex;
    align-items: center;
    white-space: nowrap;
}

.gits-titlebar .wp-block-group p {
    font-size: 16px;
    line-height: 1;
}

.gits-titlebar-controls {
    display: flex;
    gap: 8px;
}

.gits-titlebar-btn {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gits-titlebar-btn.close { background: var(--gits-neon-red); }
.gits-titlebar-btn.minimize { background: var(--gits-neon-orange); }
.gits-titlebar-btn.maximize { background: var(--gits-accent-primary); }

.gits-titlebar-btn:hover {
    transform: scale(1.2);
    box-shadow: 0 0 10px currentColor;
}

.gits-titlebar-title {
    font-family: var(--gits-font-mono);
    font-size: 0.8rem;
    color: var(--gits-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.gits-titlebar-title::before {
    content: '//';
    color: var(--gits-accent-primary);
}

.gits-titlebar-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--gits-font-mono);
    font-size: 0.7rem;
    color: var(--gits-text-muted);
}

/* Window content area */
.gits-window-content {
    padding: 24px;
}

/* ===================================================================
   WINDOW CONTROL DOTS (macOS-style)
   Used in titlebar, footer terminal, blog window, etc.
   =================================================================== */
/* Enforce flex row display regardless of WordPress layout classes.
   WordPress adds .is-layout-flow / .is-layout-flex / .is-layout-constrained
   AND .wp-block-group-is-layout-flex / .wp-block-group-is-layout-flow
   to .wp-block-group elements, which can override flex-direction.
   We must beat every permutation with maximum specificity. */
.gits-window-controls,
.gits-window-controls.wp-block-group,
.gits-window-controls.is-layout-flex,
.gits-window-controls.is-layout-flow,
.gits-window-controls.is-layout-constrained,
.gits-window-controls.wp-block-group.is-layout-flow,
.gits-window-controls.wp-block-group.is-layout-flex,
.gits-window-controls.wp-block-group.is-layout-constrained,
.gits-window-controls.wp-block-group-is-layout-flex,
.gits-window-controls.wp-block-group-is-layout-flow,
.gits-window-controls.wp-block-group.wp-block-group-is-layout-flex,
.gits-window-controls.wp-block-group.wp-block-group-is-layout-flow,
.gits-titlebar .gits-window-controls,
.gits-titlebar .gits-window-controls.wp-block-group,
.gits-titlebar .gits-window-controls.is-layout-flex,
.gits-titlebar .gits-window-controls.is-layout-flow,
.gits-titlebar .gits-window-controls.wp-block-group-is-layout-flex,
.gits-titlebar .gits-window-controls.wp-block-group-is-layout-flow,
.gits-footer-terminal-bar .gits-window-controls,
.gits-footer-terminal-bar .gits-window-controls.wp-block-group,
div.gits-window-controls[class*="is-layout-"],
div.gits-window-controls[class*="wp-block-group-is-layout-"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    /* Reset any WP layout gap/padding that may interfere */
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Each dot: force exact 14px circle, zero out ALL spacing from WP.
   WordPress .is-layout-flow > * + * adds margin-block-start which
   creates vertical stacking — we nuke it with margin: 0 !important.
   Also ensure overflow/visibility so dots aren't clipped or hidden.
   Use attribute selectors to catch any WP layout class combination. */
.gits-window-controls p,
.gits-window-controls.wp-block-group > p,
.gits-window-controls .gits-dot-close,
.gits-window-controls .gits-dot-minimize,
.gits-window-controls .gits-dot-maximize,
.gits-window-controls > .gits-dot-close,
.gits-window-controls > .gits-dot-minimize,
.gits-window-controls > .gits-dot-maximize,
div.gits-window-controls[class*="is-layout-"] > p,
.gits-titlebar .gits-window-controls > p {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
    padding: 0 !important;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

.gits-dot-close {
    background-color: #ff5f57 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
.gits-dot-minimize {
    background-color: #febc2e !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
.gits-dot-maximize {
    background-color: #28c840 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* Hover glow — unified everywhere (supports both p and span dots) */
.gits-dot-close:hover,
span.gits-dot-close:hover {
    box-shadow: 0 0 10px rgba(255, 95, 87, 0.8), 0 0 20px rgba(255, 95, 87, 0.4) !important;
    transform: scale(1.15);
}
.gits-dot-minimize:hover,
span.gits-dot-minimize:hover {
    box-shadow: 0 0 10px rgba(254, 188, 46, 0.8), 0 0 20px rgba(254, 188, 46, 0.4) !important;
    transform: scale(1.15);
}
.gits-dot-maximize:hover,
span.gits-dot-maximize:hover {
    box-shadow: 0 0 10px rgba(0, 255, 159, 0.8), 0 0 20px rgba(0, 255, 159, 0.4) !important;
    transform: scale(1.15);
}

/* Span-based dots (injected by JS to avoid WP paragraph style conflicts) */
span.gits-dot-close,
span.gits-dot-minimize,
span.gits-dot-maximize {
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    flex-shrink: 0 !important;
    cursor: pointer;
    transition: box-shadow 0.25s ease, transform 0.2s ease;
    vertical-align: middle;
}
span.gits-dot-close {
    background-color: #ff5f57 !important;
    background: #ff5f57 !important;
}
span.gits-dot-minimize {
    background-color: #febc2e !important;
    background: #febc2e !important;
}
span.gits-dot-maximize {
    background-color: #28c840 !important;
    background: #28c840 !important;
}

/* ===================================================================
   TERMINAL STYLING
   =================================================================== */
.gits-terminal {
    background: rgba(10, 14, 20, 0.95);
    border: 1px solid rgba(0, 255, 159, 0.2);
    border-radius: 8px;
    font-family: var(--gits-font-mono);
    overflow: hidden;
}

.gits-terminal-header {
    background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(0, 255, 159, 0.15);
}

.gits-terminal-body {
    padding: 20px;
    font-size: 0.85rem;
    line-height: 1.8;
}

.gits-terminal-output {
    color: var(--gits-text-secondary);
}

.gits-terminal-prompt {
    color: var(--gits-accent-primary);
}

.gits-terminal-prompt::before {
    content: '$ ';
    color: var(--gits-text-muted);
}

/* ===================================================================
   QUICK-LINKS TERMINAL (My Sites page)
   Links styled as terminal rows with the SAME glow hover as buttons
   =================================================================== */
.gits-quick-links a {
    display: block;
    padding: 12px 16px;
    margin: 8px 0;
    color: var(--gits-accent-primary) !important;
    font-family: var(--gits-font-mono);
    font-size: 0.9rem;
    background: rgba(0, 255, 159, 0.03);
    border: 1px solid var(--gits-border);
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none !important;
    position: relative;
    overflow: hidden;
}

/* Same glow as .wp-block-button__link:hover */
.gits-quick-links a:hover {
    background: rgba(0, 255, 159, 0.1) !important;
    color: var(--gits-accent-cyan) !important;
    border-color: var(--gits-accent-cyan) !important;
    box-shadow:
        0 0 8px rgba(0, 255, 159, 0.3),
        0 0 20px rgba(0, 255, 159, 0.2),
        inset 0 0 12px rgba(0, 255, 159, 0.05) !important;
    transform: translateX(6px);
    text-shadow: 0 0 8px rgba(0, 255, 159, 0.4);
}

.gits-quick-links a:focus-visible {
    outline: 2px solid var(--gits-accent-primary);
    outline-offset: 2px;
}

/* Blinking cursor */
.gits-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background: var(--gits-accent-primary);
    animation: blink 1s step-end infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ===================================================================
   NUCLEAR OVERRIDES for WordPress theme.json generated layout CSS.
   WordPress generates inline styles in <style id="global-styles-inline-css">
   that add rules like:
     .is-layout-flex { display: flex; }
     .is-layout-flow > * + * { margin-block-start: 0.5em; }
     .wp-block-group-is-layout-flex { ... }
   These override our dot styles. We must counter them at maximum
   specificity with !important.
   =================================================================== */

/* Force horizontal flex on controls container regardless of WP layout */
.gits-window-controls.is-layout-flex,
.gits-window-controls.wp-block-group.is-layout-flex,
.gits-window-controls.wp-block-group-is-layout-flex,
.gits-window-controls.wp-block-group.wp-block-group-is-layout-flex {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    overflow: visible !important;
}

/* Prevent WP .is-layout-flow margin stacking on dot children */
.gits-window-controls.is-layout-flow > * + *,
.gits-window-controls.wp-block-group.is-layout-flow > * + *,
.gits-window-controls.wp-block-group-is-layout-flow > * + *,
.gits-window-controls[class*="is-layout-"] > * + *,
.gits-window-controls[class*="wp-block-group-is-layout-"] > * + * {
    margin-block-start: 0 !important;
}

/* If WP wraps dots in an extra inner .wp-block-group, flatten it */
.gits-window-controls > .wp-block-group {
    display: contents !important;
}

/* ===================================================================
   CONTEXT-SPECIFIC WINDOW CONTROLS OVERRIDES
   Ensure dots remain horizontal in site cards, footer terminal,
   and any other nested context where parent flex rules may interfere.
   =================================================================== */
.gits-site-card .gits-window-controls,
.gits-site-card .gits-window-controls.wp-block-group,
.gits-site-card .gits-window-controls.is-layout-flex,
.gits-site-card .gits-window-controls.is-layout-flow,
.gits-site-card .gits-window-controls.is-layout-constrained,
.gits-site-card .gits-window-controls.wp-block-group-is-layout-flex,
.gits-site-card .gits-window-controls.wp-block-group-is-layout-flow,
.gits-site-card .gits-window-controls[class*="is-layout-"],
.gits-site-card .gits-window-controls[class*="wp-block-group-is-layout-"],
.gits-footer-terminal .gits-window-controls,
.gits-footer-terminal .gits-window-controls.wp-block-group,
.gits-footer-terminal-bar .gits-window-controls.wp-block-group,
.gits-footer-terminal-bar .gits-window-controls.is-layout-flex,
.gits-footer-terminal-bar .gits-window-controls.is-layout-flow,
.gits-footer-terminal-bar .gits-window-controls.wp-block-group-is-layout-flex,
.gits-footer-terminal-bar .gits-window-controls[class*="is-layout-"],
.gits-window .gits-window-controls,
.gits-window .gits-window-controls.wp-block-group,
.gits-window .gits-window-controls[class*="is-layout-"],
.gits-window .gits-window-controls[class*="wp-block-group-is-layout-"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
}

/* Dots inside site cards, windows, and footer — ensure they're visible */
.gits-site-card .gits-window-controls p,
.gits-site-card .gits-window-controls .gits-dot-close,
.gits-site-card .gits-window-controls .gits-dot-minimize,
.gits-site-card .gits-window-controls .gits-dot-maximize,
.gits-window .gits-window-controls p,
.gits-window .gits-window-controls .gits-dot-close,
.gits-window .gits-window-controls .gits-dot-minimize,
.gits-window .gits-window-controls .gits-dot-maximize,
.gits-footer-terminal .gits-window-controls p,
.gits-footer-terminal .gits-window-controls .gits-dot-close,
.gits-footer-terminal .gits-window-controls .gits-dot-minimize,
.gits-footer-terminal .gits-window-controls .gits-dot-maximize {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
    max-width: 14px !important;
    max-height: 14px !important;
    border-radius: 50% !important;
    font-size: 0 !important;
    line-height: 0 !important;
    margin: 0 !important;
    margin-block-start: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: transparent !important;
    text-indent: -9999px !important;
}

/* Ensure background colours survive WP theme.json overrides.
   WordPress theme.json can inject color overrides on .wp-block-group
   children. The <p> tags may inherit background:transparent.
   We use ultra-specific selectors to override ALL WP-injected rules. */
p.gits-dot-close,
.wp-block-group > p.gits-dot-close,
.gits-window-controls > p.gits-dot-close,
.has-background p.gits-dot-close,
.has-background .gits-dot-close,
.gits-titlebar p.gits-dot-close,
.gits-titlebar .gits-window-controls p.gits-dot-close,
.gits-site-card .gits-window-controls p.gits-dot-close,
.gits-window .gits-titlebar .gits-window-controls p.gits-dot-close,
.wp-block-group.gits-titlebar .wp-block-group.gits-window-controls > p.gits-dot-close,
div.gits-window-controls p.gits-dot-close {
    background-color: #ff5f57 !important;
    background: #ff5f57 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
p.gits-dot-minimize,
.wp-block-group > p.gits-dot-minimize,
.gits-window-controls > p.gits-dot-minimize,
.has-background p.gits-dot-minimize,
.has-background .gits-dot-minimize,
.gits-titlebar p.gits-dot-minimize,
.gits-titlebar .gits-window-controls p.gits-dot-minimize,
.gits-site-card .gits-window-controls p.gits-dot-minimize,
.gits-window .gits-titlebar .gits-window-controls p.gits-dot-minimize,
.wp-block-group.gits-titlebar .wp-block-group.gits-window-controls > p.gits-dot-minimize,
div.gits-window-controls p.gits-dot-minimize {
    background-color: #febc2e !important;
    background: #febc2e !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}
p.gits-dot-maximize,
.wp-block-group > p.gits-dot-maximize,
.gits-window-controls > p.gits-dot-maximize,
.has-background p.gits-dot-maximize,
.has-background .gits-dot-maximize,
.gits-titlebar p.gits-dot-maximize,
.gits-titlebar .gits-window-controls p.gits-dot-maximize,
.gits-site-card .gits-window-controls p.gits-dot-maximize,
.gits-window .gits-titlebar .gits-window-controls p.gits-dot-maximize,
.wp-block-group.gits-titlebar .wp-block-group.gits-window-controls > p.gits-dot-maximize,
div.gits-window-controls p.gits-dot-maximize {
    background-color: #28c840 !important;
    background: #28c840 !important;
    color: transparent !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* ===================================================================
   MATERIAL SYMBOLS GLYPH VERTICAL ALIGNMENT
   Inline glyphs in titlebars and section headings sit ~5px too high
   when using vertical-align:middle (aligns to x-height, not visual
   center). Nudge down with relative positioning.
   =================================================================== */
.gits-titlebar .material-symbols-outlined,
.gits-site-card .material-symbols-outlined,
.gits-window .material-symbols-outlined {
    position: relative;
    top: 3px;
}

/* Section headings outside windows (e.g. // NETWORK_NODES, // QUICK_LINKS) */
.gits-desktop h1 .material-symbols-outlined,
.gits-desktop h2 .material-symbols-outlined,
.gits-desktop h3 .material-symbols-outlined {
    position: relative;
    top: 4px;
}

/* === Responsive window === */
@media (max-width: 768px) {
    :root {
        --gits-titlebar-height: 28px;
    }

    .gits-window {
        margin: 10px 0;
    }

    .gits-window-content {
        padding: 16px;
    }

    .gits-window-controls p,
    .gits-window-controls span {
        width: 12px !important;
        height: 12px !important;
        min-width: 12px !important;
        min-height: 12px !important;
    }

    .gits-quick-links a {
        font-size: 0.8rem;
        padding: 10px 12px;
    }
}