/*
Theme Name:        The Shopify Workshop
Theme URI:         https://shopifyworkshop.com
Author:            Jay Patel
Author URI:        https://shopifyworkshop.com
Description:       Premium dark developer portfolio theme for The Shopify Workshop. Built without ACF — pure WordPress. Shopify, Next.js, React, Node.js, WordPress & Flutter.
Version:           4.0.0
Requires at least: 6.3
Tested up to:      6.7
Requires PHP:      8.0
License:           Private — All Rights Reserved
License URI:       https://shopifyworkshop.com
Text Domain:       tsw
Tags:              dark, portfolio, custom-menu, featured-images, full-width-template, post-thumbnails, custom-logo, theme-options
*/

/* ================================================================
   DESIGN TOKENS — CSS Custom Properties
================================================================ */
:root {

    /* Colour Palette */
    --violet:       #7C3AED;
    --violet-lt:    rgba(124,58,237,0.10);
    --violet-br:    rgba(124,58,237,0.25);
    --violet-hover: #9333EA;
    --orange:       #F97316;
    --cyan:         #06B6D4;
    --green:        #10B981;
    --red:          #EF4444;
    --amber:        #F59E0B;

    /* Surfaces */
    --bg:           #05091A;
    --surface:      #0C1228;
    --surface-2:    #131D35;
    --surface-3:    #1A2444;

    /* Text */
    --text:         #F8FAFC;
    --text-2:       #94A3B8;
    --text-3:       #64748B;
    --text-4:       #3F5070;

    /* Borders */
    --border:       rgba(255,255,255,0.07);
    --border-2:     rgba(255,255,255,0.13);

    /* Typography */
    --font:         'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

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

    /* Border Radii */
    --r-sm:   4px;
    --r:      8px;
    --r-md:   10px;
    --r-lg:   12px;
    --r-xl:   16px;
    --r-2xl:  20px;
    --r-3xl:  24px;
    --r-pill: 999px;

    /* Layout */
    --nav-h:        72px;
    --container-xl: 1280px;
    --container-lg: 1024px;

    /* Transitions */
    --t-fast:   0.15s ease;
    --t-base:   0.25s ease;
    --t-slow:   0.4s ease;
    --t-spring: 0.5s cubic-bezier(0.16,1,0.3,1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
    --shadow:    0 4px 20px rgba(0,0,0,0.35);
    --shadow-lg: 0 8px 40px rgba(0,0,0,0.45);
    --shadow-xl: 0 16px 64px rgba(0,0,0,0.55);
    --shadow-v:  0 8px 32px rgba(124,58,237,0.20);

    /* Z-index */
    --z-base:     1;
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-navbar:   300;
    --z-drawer:   400;
    --z-modal:    500;
    --z-progress: 600;
    --z-toast:    700;
}

/* ================================================================
   RESET & BASE
================================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }

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

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

/* Skip link */
.skip-link {
    position: absolute; top: -100%; left: 1rem; z-index: 9999;
    background: var(--violet); color: #fff;
    padding: .5rem 1.25rem; border-radius: var(--r);
    font-size: .875rem; font-weight: 700; text-decoration: none;
    transition: top .2s;
}
.skip-link:focus { top: 1rem; }

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--text); }
img,svg { max-width: 100%; height: auto; display: block; }
ul,ol { list-style: none; }
input,select,textarea,button { font-family: var(--font); font-size: inherit; color: inherit; }
button { cursor: pointer; border: none; background: none; }

/* WP Alignment */
.alignleft  { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin: 0 auto; }
.alignwide   { max-width: 100%; }
.alignfull   { width: 100vw; margin-left: calc(50% - 50vw); }

/* Screen reader */
.screen-reader-text {
    clip: rect(1px,1px,1px,1px); height: 1px; overflow: hidden;
    position: absolute; white-space: nowrap; width: 1px;
}
.screen-reader-text:focus { clip: auto; height: auto; overflow: auto; position: static; width: auto; }

/* WP Caption */
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .75rem; color: var(--text-3); text-align: center; margin-top: .5rem; }

/* ================================================================
   LAYOUT UTILITIES
================================================================ */
.container {
    width: 100%;
    max-width: var(--container-xl);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}
@media (min-width:768px) {
    .container { padding-left: 1.5rem; padding-right: 1.5rem; }
}

.section { padding-top: 5rem; padding-bottom: 5rem; }
@media (min-width:768px) { .section { padding-top: 7rem; padding-bottom: 7rem; } }

/* Text utilities */
.text-gradient {
    background: linear-gradient(135deg,#C4B5FD,#A78BFA,#7C3AED);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.text-muted  { color: var(--text-3); }
.text-center { text-align: center; }

/* Heading scale */
.heading-xl { font-size: clamp(2.25rem,5vw,4.25rem); font-weight: 900; letter-spacing: -.045em; line-height: 1.05; color: var(--text); }
.heading-lg { font-size: clamp(1.75rem,3.5vw,2.75rem); font-weight: 900; letter-spacing: -.04em; line-height: 1.1; color: var(--text); }
.heading-md { font-size: clamp(1.375rem,2.5vw,1.875rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.2; color: var(--text); }

/* Lead text */
.lead    { font-size: clamp(.9375rem,1.8vw,1.0625rem); line-height: 1.85; color: var(--text-3); }
.lead strong { color: var(--text-2); font-weight: 700; }
.lead-sm { font-size: .9375rem; line-height: 1.8; color: var(--text-3); }

/* ================================================================
   SECTION TAG (eyebrow label)
================================================================ */
.tag {
    display: inline-flex; align-items: center; gap: .5rem;
    background: var(--violet-lt); border: 1px solid var(--violet-br);
    border-radius: var(--r-pill); padding: .3rem .85rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #A78BFA;
}
.tag__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.tag--green  { color: var(--green); background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.25); }
.tag--orange { color: var(--orange); background: rgba(249,115,22,.10); border-color: rgba(249,115,22,.22); }
.tag--cyan   { color: var(--cyan); background: rgba(6,182,212,.10); border-color: rgba(6,182,212,.22); }

/* ================================================================
   BUTTON SYSTEM
================================================================ */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: .5rem; padding: .7rem 1.5rem; border-radius: var(--r);
    font-family: var(--font); font-size: .9375rem; font-weight: 700;
    line-height: 1; text-decoration: none; white-space: nowrap;
    cursor: pointer; border: 1.5px solid transparent;
    transition: background var(--t-base), border-color var(--t-base),
                color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
    background: var(--violet); border-color: var(--violet); color: #fff;
    box-shadow: 0 4px 20px rgba(124,58,237,0.35);
}
.btn--primary:hover {
    background: var(--violet-hover); border-color: var(--violet-hover);
    box-shadow: 0 8px 32px rgba(124,58,237,0.5); color: #fff;
}
.btn--ghost  { background: transparent; border-color: var(--border-2); color: var(--text-2); }
.btn--ghost:hover  { background: var(--surface); border-color: var(--violet-br); color: var(--text); }
.btn--outline { background: transparent; border-color: var(--violet-br); color: #A78BFA; }
.btn--outline:hover { background: var(--violet-lt); border-color: var(--violet); color: #C4B5FD; }

.btn--sm   { padding: .45rem 1rem; font-size: .8125rem; }
.btn--lg   { padding: .875rem 1.875rem; font-size: 1rem; }
.btn--xl   { padding: 1rem 2.25rem; font-size: 1.0625rem; }
.btn--full { width: 100%; justify-content: center; }

/* ================================================================
   STATUS BADGE
================================================================ */
.status-badge {
    display: inline-flex; align-items: center; gap: .5rem;
    background: rgba(16,185,129,0.10); border: 1px solid rgba(16,185,129,0.25);
    border-radius: var(--r-pill); padding: .36rem 1rem;
    font-size: .75rem; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--green);
}
.status-badge__dot {
    width: 7px; height: 7px; border-radius: 50%; background: var(--green);
    animation: pulse-green 2.5s ease-in-out infinite;
}

/* ================================================================
   ANIMATIONS
================================================================ */
@keyframes fade-up   { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } }
@keyframes pulse-green  { 0%,100% { box-shadow:0 0 0 3px rgba(16,185,129,.20); } 50% { box-shadow:0 0 0 7px rgba(16,185,129,.06); } }
@keyframes pulse-violet { 0%,100% { box-shadow:0 0 0 3px rgba(124,58,237,.20); } 50% { box-shadow:0 0 0 7px rgba(124,58,237,.06); } }
@keyframes float-y   { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes spin      { to { transform:rotate(360deg); } }
@keyframes marquee   { from { transform:translateX(0); } to { transform:translateX(-50%); } }

.au-1 { animation: fade-up .7s .05s both; }
.au-2 { animation: fade-up .7s .12s both; }
.au-3 { animation: fade-up .7s .19s both; }
.au-4 { animation: fade-up .7s .26s both; }
.au-5 { animation: fade-up .7s .33s both; }
.au-6 { animation: fade-up .7s .40s both; }

/* ================================================================
   WORDPRESS ADMIN BAR OFFSET
================================================================ */
.admin-bar .site-header,
.admin-bar header.navbar { top: 32px !important; }
@media screen and (max-width:782px) {
    .admin-bar .site-header,
    .admin-bar header.navbar { top: 46px !important; }
}

/* ================================================================
   PAGINATION
================================================================ */
.page-numbers {
    display: flex; align-items: center; justify-content: center;
    gap: .4rem; margin-top: 3rem; flex-wrap: wrap;
}
.page-numbers a,
.page-numbers span {
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--r);
    border: 1.5px solid var(--border-2);
    font-size: .875rem; font-weight: 700; color: var(--text-3);
    transition: all var(--t-base); text-decoration: none;
}
.page-numbers a:hover { border-color: var(--violet-br); color: #A78BFA; }
.page-numbers .current { background: var(--violet-lt); border-color: var(--violet); color: #A78BFA; }
.page-numbers .dots    { border: none; color: var(--text-4); width: auto; }

/* ================================================================
   SVG + VIDEO RESPONSIVE
================================================================ */
img[src$=".svg"] { width: 100%; height: auto; }

.wp-block-embed__wrapper,
.embed-wrap {
    position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;
}
.wp-block-embed__wrapper iframe,
.embed-wrap iframe,
.embed-wrap video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    border: 0; border-radius: var(--r-xl);
}