/*
Theme Name: PRDS- DNA Light Theme
Theme URI: https://prdigitalsolutions.org/
Description: High-performance, conversion-optimized light mode theme for DNA Universal. Engineered with pure white backgrounds, vibrant cyan accents, and custom database integrations for absolute clarity and speed.
Version: 2.0.0
Author: Prem Jagtap | PR Digital Solutions
Author URI: https://mepremjagtap.com/
Text Domain: prds-dna
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

Proudly Developed with ❤️ in India 🇮🇳 by Prem Jagtap (https://mepremjagtap.com/) | PR Digital Solutions (https://prdigitalsolutions.org/)
IN (https://www.linkedin.com/in/mepremjagtap/)
IG (https://www.instagram.com/prdigitalsolutions/)
*/

/* ==========================================================================
   1. GLOBAL DESIGN TOKENS (LIGHT MODE SYSTEM)
   ========================================================================== */
:root {
    /* Core Backgrounds */
    --bg-main: #ffffff;             /* Pure white canvas */
    --bg-surface: #f8f9fa;          /* Subtle off-white for section separation */
    --bg-surface-alt: #f1f3f5;      /* Slightly darker for form inputs / pills */

    /* Typography Colors */
    --text-primary: #1a1d20;        /* Deep charcoal for maximum readability */
    --text-secondary: #495057;      /* Standard readable grey for paragraphs */
    --text-muted: #868e96;          /* Micro-copy and secondary labels */

    /* Brand Accents */
    --accent-cyan: #00d2ff;         /* Primary conversion button color */
    --accent-cyan-hover: #00b8e6;   /* Interaction state */
    --accent-yellow: #ffcc00;       /* "Most Recommended" highlight tag */
    
    /* Structural Borders */
    --border-light: #eaeaea;        /* Card and section borders */
    --border-medium: #dee2e6;       /* Input borders */

    /* Depth & Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.12);
    --shadow-sticky: 0 4px 20px rgba(0, 0, 0, 0.06);

    /* Typography Scales */
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Global Physics */
    --transition-speed: 0.3s;
    --transition-curve: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. BROWSER RESET & NATIVE DEFAULTS
   ========================================================================== */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent; /* Removes grey tap box on mobile */
}

body {
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 16px;
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Fluid Media Utilities */
img, svg, picture, video {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Link Resets */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-speed) var(--transition-curve);
}

button {
    font-family: var(--font-ui);
}

/* ==========================================================================
   3. STRUCTURAL UTILITIES
   ========================================================================== */
.site-container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 24px;
}

/* Core Brand Buttons (Inherited globally by Custom Plugin & Theme) */
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--accent-cyan);
    color: #000000; /* Absolute black text on bright cyan for WCAG contrast */
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 16px 32px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all var(--transition-speed) var(--transition-curve);
}

.btn-primary:hover,
.btn-primary:active {
    background-color: var(--accent-cyan-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 210, 255, 0.3);
}

/* The Highlight Tag (Most Recommended / Active Offer) */
.highlight-tag {
    display: inline-block;
    background-color: var(--accent-yellow);
    color: #000000;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 6px 16px;
    border-radius: 50px;
    box-shadow: 0 4px 12px rgba(255, 204, 0, 0.3);
}

/* ==========================================================================
   4. WORDPRESS CORE REQUIREMENTS (MANDATORY CLASSES)
   ========================================================================== */
/* Alignment */
.alignnone { margin: 5px 20px 20px 0; }
.aligncenter, div.aligncenter { display: block; margin: 5px auto 5px auto; }
.alignright { float: right; margin: 5px 0 20px 20px; }
.alignleft { float: left; margin: 5px 20px 20px 0; }

/* Image Alignments */
a img.alignright { float: right; margin: 5px 0 20px 20px; }
a img.alignnone { margin: 5px 20px 20px 0; }
a img.alignleft { float: left; margin: 5px 20px 20px 0; }
a img.aligncenter { display: block; margin-left: auto; margin-right: auto; }

/* Captions */
.wp-caption { background: var(--bg-surface); border: 1px solid var(--border-light); max-width: 96%; padding: 5px 3px 10px; text-align: center; }
.wp-caption.alignnone, .wp-caption.alignleft { margin: 5px 20px 20px 0; }
.wp-caption.alignright { margin: 5px 0 20px 20px; }
.wp-caption img { border: 0 none; height: auto; margin: 0; max-width: 98.5%; padding: 0; width: auto; }
.wp-caption p.wp-caption-text { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; padding: 0 4px 5px; }

/* Screen Reader Text (Accessibility) */
.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 !important;
    width: 1px;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: var(--bg-main);
    border-radius: 4px;
    box-shadow: var(--shadow-md);
    clip: auto !important;
    clip-path: none;
    color: var(--accent-cyan);
    display: block;
    font-size: 14px;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}