/*
Theme Name: Indie Portal
Theme URI: https://indieportal.com
Description: A dark, Netflix-inspired theme for the Indie Portal gaming platform. Designed for indie game discovery, reviews, and curation.
Author: Indie Portal
Author URI: https://indieportal.com
Version: 1.0.45
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: indie-portal-theme
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4

This theme is designed specifically for the Indie Portal plugin.
*/

/* ==========================================================================
   DESIGN SYSTEM - CSS CUSTOM PROPERTIES
   ========================================================================== */

:root {
    /* ===== Brand Colors ===== */
    /* Indie Portal brand accent (canonical) */
    --ip-primary: #C82AEF;
    --ip-primary-hover: #D94FF5;
    --ip-primary-dark: #A018C6;
    --ip-primary-light: rgba(200, 42, 239, 0.15);
    --ip-primary-subtle: rgba(200, 42, 239, 0.08);

    /* ===== Elementor / Hello Elementor overrides =====
       The user never wants the default Hello Elementor magenta to appear.
       Elementor often relies on global CSS variables; we pin them to our
       brand tokens so any Elementor blocks inherit Indie Portal styling. */
    --e-global-color-primary: var(--ip-primary);
    --e-global-color-secondary: var(--ip-text-secondary);
    --e-global-color-accent: var(--ip-primary);
    --e-global-color-text: var(--ip-text-primary);

    /* Common Elementor kit typography variables (defensive) */
    --e-global-typography-primary-font-family: var(--ip-font-display);
    --e-global-typography-text-font-family: var(--ip-font-sans);
    
    /* ===== Background Colors ===== */
    --ip-bg-base: #0d0d0d;
    --ip-bg-elevated: #141414;
    --ip-bg-surface: #1a1a1a;
    --ip-bg-card: #222222;
    --ip-bg-card-hover: #2a2a2a;
    --ip-bg-input: #1a1a1a;
    --ip-bg-overlay: rgba(0, 0, 0, 0.85);
    
    /* ===== Text Colors ===== */
    --ip-text-primary: #ffffff;
    --ip-text-secondary: rgba(255, 255, 255, 0.85);
    --ip-text-tertiary: rgba(255, 255, 255, 0.6);
    --ip-text-muted: rgba(255, 255, 255, 0.4);
    --ip-text-disabled: rgba(255, 255, 255, 0.25);
    
    /* ===== Border Colors ===== */
    --ip-border-subtle: rgba(255, 255, 255, 0.06);
    --ip-border-default: rgba(255, 255, 255, 0.1);
    --ip-border-strong: rgba(255, 255, 255, 0.15);
    --ip-border-focus: var(--ip-primary);
    
    /* ===== Semantic Colors ===== */
    --ip-success: #22c55e;
    --ip-success-dark: #16a34a;
    --ip-success-bg: rgba(34, 197, 94, 0.15);
    
    --ip-warning: #f59e0b;
    --ip-warning-dark: #d97706;
    --ip-warning-bg: rgba(245, 158, 11, 0.15);
    
    --ip-error: #ef4444;
    --ip-error-dark: #dc2626;
    --ip-error-bg: rgba(239, 68, 68, 0.15);
    
    --ip-info: #3b82f6;
    --ip-info-dark: #2563eb;
    --ip-info-bg: rgba(59, 130, 246, 0.15);
    
    /* ===== Recommendation Colors (WoW-style rarity) ===== */
    --ip-rec-skip: #9d9d9d;
    --ip-rec-skip-bg: rgba(157, 157, 157, 0.15);
    --ip-rec-play: #1eff00;
    --ip-rec-play-bg: rgba(30, 255, 0, 0.15);
    --ip-rec-complete: #ff8000;
    --ip-rec-complete-bg: rgba(255, 128, 0, 0.15);
    
    /* ===== Typography ===== */
    --ip-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --ip-font-display: 'Inter', var(--ip-font-sans);
    --ip-font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
    
    /* Font Sizes - Fluid Typography */
    --ip-text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.8125rem);      /* 12-13px */
    --ip-text-sm: clamp(0.8125rem, 0.775rem + 0.1875vw, 0.875rem); /* 13-14px */
    --ip-text-base: clamp(0.875rem, 0.85rem + 0.125vw, 1rem);      /* 14-16px */
    --ip-text-lg: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);         /* 16-18px */
    --ip-text-xl: clamp(1.125rem, 1.05rem + 0.375vw, 1.25rem);     /* 18-20px */
    --ip-text-2xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);        /* 20-24px */
    --ip-text-3xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.875rem);      /* 24-30px */
    --ip-text-4xl: clamp(1.875rem, 1.65rem + 1.125vw, 2.25rem);    /* 30-36px */
    --ip-text-5xl: clamp(2.25rem, 1.95rem + 1.5vw, 3rem);          /* 36-48px */
    
    /* Line Heights */
    --ip-leading-none: 1;
    --ip-leading-tight: 1.25;
    --ip-leading-snug: 1.375;
    --ip-leading-normal: 1.5;
    --ip-leading-relaxed: 1.625;
    --ip-leading-loose: 2;
    
    /* Font Weights */
    --ip-font-normal: 400;
    --ip-font-medium: 500;
    --ip-font-semibold: 600;
    --ip-font-bold: 700;
    --ip-font-extrabold: 800;
    
    /* Letter Spacing */
    --ip-tracking-tighter: -0.05em;
    --ip-tracking-tight: -0.025em;
    --ip-tracking-normal: 0;
    --ip-tracking-wide: 0.025em;
    --ip-tracking-wider: 0.05em;
    --ip-tracking-widest: 0.1em;
    
    /* ===== Spacing ===== */
    --ip-space-1: 0.25rem;   /* 4px */
    --ip-space-2: 0.5rem;    /* 8px */
    --ip-space-3: 0.75rem;   /* 12px */
    --ip-space-4: 1rem;      /* 16px */
    --ip-space-5: 1.25rem;   /* 20px */
    --ip-space-6: 1.5rem;    /* 24px */
    --ip-space-8: 2rem;      /* 32px */
    --ip-space-10: 2.5rem;   /* 40px */
    --ip-space-12: 3rem;     /* 48px */
    --ip-space-16: 4rem;     /* 64px */
    --ip-space-20: 5rem;     /* 80px */
    --ip-space-24: 6rem;     /* 96px */
    
    /* ===== Border Radius ===== */
    --ip-radius-sm: 4px;
    --ip-radius-md: 8px;
    --ip-radius-lg: 12px;
    --ip-radius-xl: 16px;
    --ip-radius-2xl: 24px;
    --ip-radius-full: 9999px;
    
    /* ===== Shadows ===== */
    --ip-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ip-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --ip-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --ip-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.6);
    --ip-shadow-glow: 0 0 20px rgba(200, 42, 239, 0.3);
    --ip-shadow-glow-sm: 0 0 10px rgba(200, 42, 239, 0.2);
    
    /* ===== Transitions ===== */
    --ip-transition-fast: 150ms ease;
    --ip-transition-base: 200ms ease;
    --ip-transition-slow: 300ms ease;
    --ip-transition-slower: 500ms ease;
    
    /* ===== Z-Index Scale ===== */
    --ip-z-base: 1;
    --ip-z-dropdown: 100;
    --ip-z-sticky: 200;
    --ip-z-fixed: 300;
    --ip-z-header: 1000;
    --ip-z-modal-backdrop: 1100;
    --ip-z-modal: 1200;
    --ip-z-popover: 1300;
    --ip-z-tooltip: 1400;
    --ip-z-max: 9999;
    
    /* ===== Layout ===== */
    --ip-header-height: 64px;
    --ip-container-max: 1400px;
    --ip-content-max: 1200px;
    --ip-sidebar-width: 280px;
}

/* ==========================================================================
   BASE RESET & DEFAULTS
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--ip-font-sans);
    font-size: var(--ip-text-base);
    font-weight: var(--ip-font-normal);
    line-height: var(--ip-leading-normal);
    color: var(--ip-text-secondary);
    background-color: var(--ip-bg-base);
}

/* When WP admin bar is present */
body.admin-bar {
    --ip-admin-bar-height: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar {
        --ip-admin-bar-height: 46px;
    }
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ip-font-display);
    font-weight: var(--ip-font-bold);
    line-height: var(--ip-leading-tight);
    color: var(--ip-text-primary);
    margin: 0 0 var(--ip-space-4);
    letter-spacing: var(--ip-tracking-tight);
}

h1 {
    font-size: var(--ip-text-4xl);
}

h2 {
    font-size: var(--ip-text-3xl);
}

h3 {
    font-size: var(--ip-text-2xl);
}

h4 {
    font-size: var(--ip-text-xl);
}

h5 {
    font-size: var(--ip-text-lg);
}

h6 {
    font-size: var(--ip-text-base);
}

p {
    margin: 0 0 var(--ip-space-4);
}

a {
    color: var(--ip-primary);
    text-decoration: none;
    transition: color var(--ip-transition-fast);
}

a:hover {
    color: var(--ip-primary-hover);
}

/* ==========================================================================
   ELEMENTOR BRAND OVERRIDES
   ========================================================================== */

body .elementor a,
body .elementor a:visited {
    color: var(--ip-primary);
}

body .elementor a:hover,
body .elementor a:focus {
    color: var(--ip-primary-hover);
}

body .elementor .elementor-button,
body .elementor .elementor-button:visited {
    background-color: var(--ip-primary);
    border-color: var(--ip-primary);
    color: #fff;
}

body .elementor .elementor-button:hover,
body .elementor .elementor-button:focus {
    background-color: var(--ip-primary-hover);
    border-color: var(--ip-primary-hover);
    color: #fff;
}

strong, b {
    font-weight: var(--ip-font-semibold);
}

small {
    font-size: var(--ip-text-sm);
}

code, pre {
    font-family: var(--ip-font-mono);
}

code {
    padding: 0.125em 0.375em;
    background: var(--ip-bg-surface);
    border-radius: var(--ip-radius-sm);
    font-size: 0.9em;
}

pre {
    padding: var(--ip-space-4);
    background: var(--ip-bg-surface);
    border-radius: var(--ip-radius-md);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
}

/* ==========================================================================
   FORM ELEMENTS
   ========================================================================== */

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

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="number"],
input[type="date"],
textarea,
select {
    width: 100%;
    padding: var(--ip-space-3) var(--ip-space-4);
    background: var(--ip-bg-input);
    border: 1px solid var(--ip-border-default);
    border-radius: var(--ip-radius-md);
    color: var(--ip-text-primary);
    transition: border-color var(--ip-transition-fast), box-shadow var(--ip-transition-fast);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
textarea:focus,
select:focus {
    outline: none;
    border-color: var(--ip-primary);
    box-shadow: 0 0 0 3px var(--ip-primary-light);
}

input::placeholder,
textarea::placeholder {
    color: var(--ip-text-muted);
}

select {
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.5)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--ip-space-3) center;
    padding-right: var(--ip-space-10);
}

select option {
    background: var(--ip-bg-surface);
    color: var(--ip-text-primary);
}

button {
    cursor: pointer;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.ip-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ip-space-2);
    padding: var(--ip-space-3) var(--ip-space-5);
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-font-semibold);
    line-height: 1;
    text-decoration: none;
    border: none;
    border-radius: var(--ip-radius-md);
    cursor: pointer;
    transition: all var(--ip-transition-fast);
}

.ip-btn-primary {
    background: var(--ip-primary);
    color: white;
}

.ip-btn-primary:hover {
    background: var(--ip-primary-hover);
    color: white;
    transform: translateY(-1px);
    box-shadow: var(--ip-shadow-glow-sm);
}

.ip-btn-secondary {
    background: var(--ip-bg-card);
    color: var(--ip-text-primary);
    border: 1px solid var(--ip-border-default);
}

.ip-btn-secondary:hover {
    background: var(--ip-bg-card-hover);
    color: var(--ip-text-primary);
    border-color: var(--ip-border-strong);
}

.ip-btn-ghost {
    background: transparent;
    color: var(--ip-text-secondary);
}

.ip-btn-ghost:hover {
    background: var(--ip-bg-surface);
    color: var(--ip-text-primary);
}

.ip-btn-sm {
    padding: var(--ip-space-2) var(--ip-space-3);
    font-size: var(--ip-text-xs);
}

.ip-btn-lg {
    padding: var(--ip-space-4) var(--ip-space-6);
    font-size: var(--ip-text-base);
}

/* ==========================================================================
   LAYOUT UTILITIES
   ========================================================================== */

.ip-container {
    width: 100%;
    max-width: var(--ip-container-max);
    margin: 0 auto;
    padding: 0 var(--ip-space-4);
}

@media (min-width: 768px) {
    .ip-container {
        padding: 0 var(--ip-space-6);
    }
}

@media (min-width: 1024px) {
    .ip-container {
        padding: 0 var(--ip-space-8);
    }
}

/* ==========================================================================
   SCROLLBAR STYLING
   ========================================================================== */

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--ip-bg-card);
    border-radius: 5px;
    border: 2px solid var(--ip-bg-base);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ip-bg-card-hover);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--ip-bg-card) var(--ip-bg-base);
}

/* ==========================================================================
   SELECTION
   ========================================================================== */

::selection {
    background: var(--ip-primary);
    color: white;
}

::-moz-selection {
    background: var(--ip-primary);
    color: white;
}

/* ==========================================================================
   FOCUS VISIBLE
   ========================================================================== */

:focus-visible {
    outline: 2px solid var(--ip-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   MAIN CONTENT WRAPPER
   ========================================================================== */

.ipt-main {
    min-height: calc(100vh - var(--ip-header-height) - 200px);
}

/* ==========================================================================
   PLUGIN TEMPLATE HEADER SPACING

   The theme provides a fixed header.

   IMPORTANT:
   - The Indie Portal plugin owns all template layout.
   - The theme must not add per-template "hero" padding that can drift as the
     plugin evolves.

   Strategy:
   - Use ONE consistent top offset for plugin-driven pages via .ipt-content.
   - Only adjust fixed-position dashboard elements (sidebar/drawer/overlay)
     so they don't sit under the theme header.
   ========================================================================== */

/* -----------------------------------------------------
   Plugin template spacing (scoped)
   Uses variables to account for fixed header + WP admin bar.
   ----------------------------------------------------- */

:root {
    --ipt-adminbar-h: 0px;
}

/* WP admin bar height (desktop) */
body.admin-bar {
    --ipt-adminbar-h: 32px;
}

/* WP admin bar height (mobile) */
@media screen and (max-width: 782px) {
    body.admin-bar {
        --ipt-adminbar-h: 46px;
    }
}

/* Combined fixed header offset */
body.ipt-plugin-page {
    --ipt-header-offset: calc(var(--ip-header-height) + var(--ipt-adminbar-h));
}

/* Plugin pages: use a tight header offset (no extra spacing) for consistency. */
body.ipt-plugin-page .ipt-content {
    padding-top: var(--ipt-header-offset);
}

/*
   Some plugin-owned templates do not wrap their markup in .ipt-content.
   When the theme provides a fixed header, these screens must still be
   offset so page titles/controls aren't hidden under the header.

   Scope tightly to known plugin root containers to avoid impacting
   non-plugin content.
*/
body.ipt-plugin-page :is(
    .ip-games-archive,
    .ip-companies-archive,
    .ip-lists-archive,
    .ip-reviews-archive,
    .ipx-reviews.ip-reviews-archive,
    .ip-company-profile,
    .ipx-list-page,
    .ipr-review,
    .ip-wrap
) {
    padding-top: var(--ipt-header-offset);
}

/*
   Companies archive uses an ID-scoped padding declaration in plugin CSS:
     #ip-companies-archive { padding: 40px 0; }
   ID specificity beats our class-based offset rules, causing the header overlap.
   Override with a scoped ID selector and preserve the original 40px top spacing.
*/
body.ipt-plugin-page #ip-companies-archive {
    padding-top: calc(var(--ipt-header-offset) + 40px);
}

/* Sticky toolbar should sit below the fixed header when it affixes. */
body.ipt-plugin-page #ip-companies-archive .ip-companies-toolbar {
    top: calc(var(--ipt-header-offset) + 12px);
}

/* -----------------------------------------------------
   Dashboard (fixed-position elements)
   ----------------------------------------------------- */

/* The dashboard shell sits inside .ipt-content which already offsets for the header. */
body.ipt-plugin-page .ipx-dash-shell {
    padding-top: 0;
}

body.ipt-plugin-page .ipx-dash-sidebar {
    top: var(--ipt-header-offset);
    height: calc(100vh - var(--ipt-header-offset));
}

body.ipt-plugin-page .ipx-dash-overlay {
    top: var(--ipt-header-offset);
}

/* Back-compat: if a dashboard header section exists, keep it neutral. */
body.ipt-plugin-page .ipx-dashboard .ipx-dash-header {
    padding-top: 0;
}

/* Plugin templates own their hero spacing. (Do not override.) */

/* Single Review - has hero that should go behind header like game page */
/* Don't add padding - let hero overlap */
/* ==========================================================================
   THEME DEFAULT CONTENT WRAPPER
   For non-plugin pages (regular posts, pages, etc.)
   ========================================================================== */

.ipt-content {
    padding: calc(var(--ip-header-height) + var(--ip-space-8)) 0 var(--ip-space-8);
}

.admin-bar .ipt-content {
    padding-top: calc(var(--ip-header-height) + 32px + var(--ip-space-8));
}

@media screen and (max-width: 782px) {
    .admin-bar .ipt-content {
        padding-top: calc(var(--ip-header-height) + 46px + var(--ip-space-8));
    }
}

/* ==========================================================================
   INDEX PAGE STYLES
   ========================================================================== */

.ipt-page-header {
    margin-bottom: var(--ip-space-8);
}

.ipt-page-title {
    font-size: var(--ip-text-4xl);
    margin: 0;
}

.ipt-posts {
    display: grid;
    gap: var(--ip-space-8);
}

.ipt-post {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--ip-space-4);
    padding: var(--ip-space-6);
    background: var(--ip-bg-card);
    border-radius: var(--ip-radius-lg);
    border: 1px solid var(--ip-border-subtle);
}

@media (min-width: 768px) {
    .ipt-post {
        grid-template-columns: 300px 1fr;
        gap: var(--ip-space-6);
    }
}

.ipt-post__thumbnail {
    display: block;
    border-radius: var(--ip-radius-md);
    overflow: hidden;
}

.ipt-post__thumbnail img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--ip-transition-slow);
}

.ipt-post__thumbnail:hover img {
    transform: scale(1.05);
}

.ipt-post__content {
    display: flex;
    flex-direction: column;
}

.ipt-post__header {
    margin-bottom: var(--ip-space-4);
}

.ipt-post__title {
    font-size: var(--ip-text-2xl);
    margin: 0 0 var(--ip-space-2);
    line-height: var(--ip-leading-tight);
}

.ipt-post__title a {
    color: var(--ip-text-primary);
    text-decoration: none;
}

.ipt-post__title a:hover {
    color: var(--ip-primary);
}

.ipt-post__meta {
    font-size: var(--ip-text-sm);
    color: var(--ip-text-muted);
    display: flex;
    gap: var(--ip-space-3);
}

.ipt-post__excerpt {
    flex: 1;
    color: var(--ip-text-tertiary);
    margin-bottom: var(--ip-space-4);
}

.ipt-post__excerpt p {
    margin: 0;
}

.ipt-post__read-more {
    align-self: flex-start;
    font-size: var(--ip-text-sm);
    font-weight: var(--ip-font-semibold);
    color: var(--ip-primary);
}

.ipt-post__read-more:hover {
    color: var(--ip-primary-hover);
}

/* No Content */
.ipt-no-content {
    text-align: center;
    padding: var(--ip-space-16) 0;
}

.ipt-no-content h1 {
    font-size: var(--ip-text-3xl);
    margin-bottom: var(--ip-space-4);
}

.ipt-no-content p {
    color: var(--ip-text-tertiary);
}

/* Pagination */
.nav-links {
    display: flex;
    justify-content: center;
    gap: var(--ip-space-2);
    margin-top: var(--ip-space-8);
}

.nav-links a,
.nav-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 var(--ip-space-3);
    background: var(--ip-bg-card);
    border: 1px solid var(--ip-border-default);
    border-radius: var(--ip-radius-md);
    font-size: var(--ip-text-sm);
    color: var(--ip-text-secondary);
    text-decoration: none;
    transition: all var(--ip-transition-fast);
}

.nav-links a:hover {
    background: var(--ip-bg-card-hover);
    color: var(--ip-text-primary);
    border-color: var(--ip-border-strong);
}

.nav-links .current {
    background: var(--ip-primary);
    border-color: var(--ip-primary);
    color: white;
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    body {
        background: white;
        color: black;
    }
    
    .ipt-header,
    .ipt-footer {
        display: none;
    }
}