/* CSS Custom Properties */
:root {
    --background-light: #F9FBF9;
    --bg-color: #F9FBF9;
    --line-color: #000;
    --primary-dark: #000;
    --text-color: #000;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #000;
    --line-color: #F9FBF9;
    --text-color: #F9FBF9;
}

/* Reset and base styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Global link override to fix mobile Safari date-time detection */
a {
    color: var(--text-color) !important;
    text-decoration: none;
}

/* Safari-specific overrides for auto-detected links */
a:any-link {
    color: var(--text-color) !important;
}

a:-webkit-any-link {
    color: var(--text-color) !important;
}

/* Target Safari's auto-detected date/time links specifically */
a[href^="tel:"],
a[href^="mailto:"],
a[href^="sms:"],
a[href^="facetime:"],
a[href^="facetime-audio:"] {
    color: var(--text-color) !important;
    text-decoration: none !important;
}

/* Prevent Safari from making date-time text clickable */
.date-time {
    color: var(--text-color) !important;
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 0.9;
    margin-left: 0;
    pointer-events: none !important;
    -webkit-touch-callout: none !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Override any auto-generated links within date-time */
.date-time a,
.date-time a:any-link,
.date-time a:-webkit-any-link {
    color: var(--text-color) !important;
    text-decoration: none !important;
    pointer-events: none !important;
}

body {
    background-color: var(--bg-color);
    display: flex;
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-weight: 300;
    line-height: 1.6;
    min-height: 100vh;
    position: relative;
    transition: background-color 0.3s ease;
}

/* Main content */
main {
    display: flex;
    flex: 1;
    padding: 2rem 0;
}

.container {
    margin: 0 auto;
    max-width: 800px;
}

/* Main section */
.main-section {
    align-items: center;
    display: flex;
    margin: 0 auto;
    max-width: 800px;
    padding: 4rem 0;
    text-align: left;
    width: 100%;
}

.main-section h1 {
    color: var(--text-color);
    font-family: 'Dela Gothic One', cursive;
    font-size: 7rem;
    line-height: 0.85;
    margin-bottom: 2rem;
    text-transform: uppercase;
}

.main-section p {
    color: var(--text-color);
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    margin: 0.4rem 0 0.5rem 0;
}

.main-section a {
    text-decoration: none;
}

/* Horizontal lines under heading */
.lines {
    margin-bottom: 2rem;
}

.line {
    background-color: var(--line-color);
    height: 1px;
    width: 100%;
}

/* Date/time element */
.date-time {
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 0.9;
    margin-left: 0;
}

/* Contact links */
.contact-links {
    text-align: right;
}

.contact-links a {
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.contact-links a:hover {
    opacity: 0.7;
}

.separator {
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.65rem;
    font-weight: 300;
    margin: 0 0.5rem;
}

/* Brand highlight styles */
.whatsapp-highlight {
    border-bottom: 6px solid #00FF88;
    color: var(--text-color);
    display: inline-block;
    line-height: 0.4;
    padding: 0 4px;
    transition: all 0.2s ease;
}

.whatsapp-highlight:hover {
    border-bottom-color: var(--text-color);
}

.kantan-highlight {
    border-bottom: 6px solid #888888;
    color: var(--text-color);
    display: inline-block;
    line-height: 0.4;
    padding: 0 4px;
    transition: all 0.2s ease;
}

.kantan-highlight:hover {
    border-bottom-color: var(--text-color);
}

.instagram-highlight {
    background: linear-gradient(45deg, #FF0066 0%, #FF6600 25%, #FF00FF 50%, #9966FF 75%, #66FFFF 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 6px;
    color: var(--text-color);
    display: inline-block;
    line-height: 0.4;
    padding: 0 4px 6px 4px;
    transition: all 0.2s ease;
}

.instagram-highlight:hover {
    background: linear-gradient(45deg, var(--text-color) 0%, var(--text-color) 25%, var(--text-color) 50%, var(--text-color) 75%, var(--text-color) 100%);
    background-position: bottom;
    background-repeat: no-repeat;
    background-size: 100% 6px;
}

.messenger-highlight {
    border-bottom: 6px solid #3399FF;
    color: var(--text-color);
    display: inline-block;
    line-height: 0.4;
    padding: 0 4px;
    transition: all 0.2s ease;
}

.messenger-highlight:hover {
    border-bottom-color: var(--text-color);
}

.codecademy-highlight {
    border-bottom: 6px solid #3399CC;
    color: var(--text-color);
    display: inline-block;
    line-height: 0.4;
    padding: 0 4px;
    transition: all 0.2s ease;
}

.codecademy-highlight:hover {
    border-bottom-color: var(--text-color);
}

/* Logo with gradient background container */
.gradient-logo-container {
    align-items: center;
    animation: rotateGradient 8s linear infinite, float 8s ease-in-out infinite;
    background: conic-gradient(from 0deg, #FF0066, #FF6600, #FF00FF, #6600FF, #00FFFF, #00FF88, #FF0066);
    border-radius: 50%;
    display: flex;
    height: 100px;
    justify-content: center;
    position: fixed;
    right: 50px;
    top: 100px;
    transform: translate(-50%, -50%);
    width: 100px;
    z-index: -1;
}

.gradient-logo-container img {
    border-radius: 50%;
    height: 50px;
    object-fit: contain;
    width: 50px;
}

/* Theme toggle UI */
.theme-toggle {
    background: linear-gradient(to left, var(--background-light) 0%, var(--primary-dark) 100%);
    border-radius: 20px;
    bottom: 50px;
    cursor: pointer;
    display: flex;
    height: 36px;
    left: 50px;
    padding: 5px;
    position: fixed;
    transition: all 0.3s ease;
    width: 66px;
    z-index: 1000;
}

.theme-toggle-handle {
    align-items: center;
    background: var(--bg-color);
    border-radius: 50%;
    display: flex;
    height: 26px;
    justify-content: center;
    transition: all 0.3s ease;
    transform: translateX(0);
    width: 26px;
}

.theme-toggle.dark .theme-toggle-handle {
    transform: translateX(30px);
}

/* Cryptic system info */
.cryptic-info {
    bottom: 50px;
    position: fixed;
    right: 50px;
    text-align: right;
    z-index: 1000;
}

.cryptic-code {
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 0.9;
    margin-bottom: 0.1rem;
}

.cryptic-date {
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 0.9;
    margin-bottom: 0.1rem;
}

.cursor-position {
    color: var(--text-color);
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 0.7rem;
    font-weight: 300;
    letter-spacing: 0.1em;
    line-height: 0.9;
}

/* Color palette */
.color-palette {
    display: flex;
    flex-direction: column;
    gap: 0;
    left: 50px;
    position: fixed;
    top: 50px;
    z-index: 1000;
}

.palette-row {
    display: flex;
    gap: 0;
}

.color-tile {
    height: 10px;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    width: 10px;
}

/* Neon brand colors */
.whatsapp-color {
    background-color: #00FF88;
}

.instagram-color {
    background: linear-gradient(to right, #FF0066, #FF6600, #FF00FF, #9966FF, #66FFFF, #00FF88, #FF0066);
    width: 50px;
}

.linkedin-color {
    background-color: #00A3FF;
}

.twitter-color {
    background-color: #1DA1F2;
}

.facebook-color {
    background-color: #1877F2;
}

.youtube-color {
    background-color: #FF0000;
}

/* Primary colors */
.primary-light {
    background-color: var(--background-light);
}

.primary-dark {
    background-color: var(--primary-dark);
}

/* Animations */
@keyframes rotateGradient {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

@keyframes float {
    0%, 100% {
        transform: translateY(-50%) translateY(0px);
    }
    50% {
        transform: translateY(-50%) translateY(-15px);
    }
}

/* ===== RESPONSIVE DESIGN ===== */

/* Hide corner elements on small height viewports */
@media (max-height: 640px) {
    .color-palette,
    .theme-toggle,
    .cryptic-info {
        display: none;
    }
}

/* Large screens */
@media (max-width: 1200px) {
    .container {
        max-width: 700px;
        padding: 0 1.5rem;
    }
    
    .main-section {
        max-width: 700px;
    }
    
    .main-section h1 {
        font-size: 6rem;
    }
}

/* Medium screens */
@media (max-width: 768px) {
    .container {
        max-width: 600px;
        padding: 0 1rem;
    }
    
    .main-section {
        max-width: 600px;
    }
    
    .main-section h1 {
        font-size: 4rem;
        line-height: 0.9;
        margin-bottom: 1.5rem;
    }
    
    .main-section p {
        font-size: 0.8rem;
        letter-spacing: 0.08em;
    }
    
    .contact-links {
        text-align: left;
    }
    
    .contact-links a,
    .separator {
        font-size: 0.6rem;
    }
    
    .whatsapp-highlight,
    .instagram-highlight,
    .messenger-highlight,
    .codecademy-highlight {
        border-bottom-width: 4px;
        line-height: 0.5;
        padding: 0 3px;
    }
    
    .instagram-highlight {
        background-size: 100% 4px;
        padding: 0 3px 4px 3px;
    }
}

/* Small screens */
@media (max-width: 480px) {
    .container {
        max-width: 500px;
        padding: 0 0.75rem;
    }
    
    .main-section {
        max-width: 500px;
    }
    
    .main-section h1 {
        font-size: 3rem;
        line-height: 0.95;
        margin-bottom: 1rem;
    }
    
    .main-section p {
        font-size: 0.75rem;
        letter-spacing: 0.06em;
        margin: 0.3rem 0 0.4rem 0;
    }
    
    .contact-links a,
    .separator {
        font-size: 0.55rem;
    }
    
    .whatsapp-highlight,
    .instagram-highlight,
    .messenger-highlight,
    .codecademy-highlight {
        border-bottom-width: 3px;
        line-height: 0.6;
        padding: 0 2px;
    }
    
    .instagram-highlight {
        background-size: 100% 3px;
        padding: 0 2px 3px 2px;
    }
}

/* Extra small screens */
@media (max-width: 360px) {
    .container {
        max-width: 400px;
        padding: 0 0.5rem;
    }
    
    .main-section {
        max-width: 400px;
    }
    
    .main-section h1 {
        font-size: 2.5rem;
        line-height: 1;
    }
    
    .contact-links {
        margin-right: 30px;
    }
}