/*
Theme Name: Synthetic
Theme URI: https://synthetickids.com
Description: 001 synthetic project - a unique terminal-like interactive theme.
Version: 1.0
Requires at least: 5.0
Tested up to: 6.2
Requires PHP: 7.4
Author: Pinkperc
Author URI: https://synthetickids.com
Text Domain: synthetic
License: GPL-2.0-or-later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
/* Basic Reset & Fullscreen Body */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; /* Prevent scrollbars from appearing during animation */
    background-color: #000000; /* Black background */
    color: #FFFFFF; /* White text */
    font-family: 'Courier New', Courier, monospace; /* Monospace font */
    font-size: 16px; /* Adjust as needed */
}

#terminal {
    width: 100%;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Content starts at the top */
    align-items: flex-start; /* Align text to the left */
    overflow: hidden; /* Important for scroll effect */
    position: relative; /* For positioning welcome message */
}

#terminal-output {
    width: 100%;
    white-space: pre-wrap; /* Preserve whitespace and newlines, wrap text */
    word-break: break-all; /* Break long strings if they overflow */
}

#terminal-output .line {
    display: block; /* Each line on its own */
    min-height: 1.2em; /* Ensure line height even if empty */
}

/* For the clearing animation - lines scrolling up */
.line.clearing {
    transition: transform 0.3s ease-out, opacity 0.3s ease-out;
    transform: translateY(-100vh); /* Move way up */
    opacity: 0;
}


#welcome-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: none; /* Initially hidden, shown by JS */
}

#welcome-message p {
    font-size: 1.5em; /* Larger text for the welcome */
    margin-bottom: 20px;
}

#access-button {
    background-color: #333333; /* Dark grey button */
    color: #FFFFFF; /* White text */
    border: 1px solid #FFFFFF; /* White border */
    padding: 10px 20px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 1em;
    cursor: pointer;
    text-transform: lowercase; /* As per "click for access" */
    transition: background-color 0.3s, color 0.3s, transform 0.1s;
    /* Prevent iOS button styling */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    /* Improve touch targets */
    touch-action: manipulation;
    /* Prevent text selection */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* Prevent zoom on focus for iOS */
    font-size: 16px;
}

#access-button:hover,
#access-button:focus {
    background-color: #FFFFFF; /* White background on hover */
    color: #000000; /* Black text on hover */
    outline: none;
}

#access-button:active {
    transform: scale(0.98);
    background-color: #FFFFFF;
    color: #000000;
}

#access-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
    html, body {
        font-size: 14px; /* Smaller base font size for mobile */
    }
    
    #terminal {
        padding: 15px; /* Reduced padding for mobile */
    }
    
    #terminal-output {
        font-size: 0.9em; /* Slightly smaller terminal text */
        line-height: 1.3; /* Better line spacing */
    }
    
    #welcome-message p {
        font-size: 1.2em; /* Smaller welcome text */
        margin-bottom: 15px;
        padding: 0 10px; /* Add horizontal padding */
    }
    
    #access-button {
        padding: 15px 25px; /* Larger touch target */
        font-size: 16px; /* Prevent iOS zoom - keep at 16px minimum */
        min-width: 200px; /* Ensure button is large enough */
        min-height: 48px; /* iOS recommended minimum touch target */
        border-radius: 4px; /* Slightly rounded corners */
        /* Enhanced mobile styling */
        -webkit-tap-highlight-color: rgba(255, 255, 255, 0.3);
        /* Prevent double-tap zoom */
        touch-action: manipulation;
        /* Better touch feedback */
        position: relative;
        overflow: hidden;
    }
    
    #access-button::before {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 0;
        height: 0;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.4);
        transform: translate(-50%, -50%);
        transition: width 0.3s, height 0.3s;
        pointer-events: none;
    }
    
    #access-button:active::before {
        width: 300px;
        height: 300px;
    }
}

@media (max-width: 480px) {
    html, body {
        font-size: 12px; /* Even smaller for very small screens */
    }
    
    #terminal {
        padding: 10px; /* Minimal padding for small screens */
    }
    
    #terminal-output {
        font-size: 0.8em;
        line-height: 1.4;
    }
    
    #terminal-output .line {
        min-height: 1.4em; /* Adjust line height for readability */
        word-break: break-word; /* Better word breaking */
    }
    
    #welcome-message {
        width: 90%; /* Ensure it doesn't overflow */
        left: 50%;
        transform: translate(-50%, -50%);
    }
    
    #welcome-message p {
        font-size: 1em;
        margin-bottom: 12px;
        padding: 0 5px;
    }
    
    #access-button {
        padding: 15px 30px; /* Even larger touch target */
        font-size: 1em;
        min-width: 180px;
        border-radius: 6px;
    }
}

/* Additional mobile improvements for terminal display */
@media (max-width: 320px) {
    html, body {
        font-size: 11px; /* Even smaller for very small screens */
    }
    
    #terminal {
        padding: 8px;
    }
    
    #terminal-output {
        font-size: 0.75em;
        line-height: 1.5;
    }
    
    #welcome-message {
        width: 95%;
    }
    
    #welcome-message p {
        font-size: 0.9em;
        margin-bottom: 10px;
    }
    
    #access-button {
        padding: 12px 20px;
        font-size: 0.9em;
        min-width: 160px;
    }
}

/* Landscape mobile adjustments */
@media (max-width: 768px) and (orientation: landscape) {
    #terminal {
        padding: 10px 15px;
    }
    
    #welcome-message p {
        font-size: 1.1em;
        margin-bottom: 10px;
    }
    
    #access-button {
        padding: 10px 20px;
        font-size: 0.95em;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    #terminal-output {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Blinking cursor (optional, add to an element via JS if desired) */
.blinking-cursor::after {
    content: '_';
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

/* Prevent zooming on input focus (iOS Safari) */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    select, textarea, input[type="text"], input[type="password"], 
    input[type="datetime"], input[type="datetime-local"], 
    input[type="date"], input[type="month"], input[type="time"], 
    input[type="week"], input[type="number"], input[type="email"], 
    input[type="url"], input[type="search"], input[type="tel"], 
    input[type="color"] {
        font-size: 16px !important;
    }
}

/* Improve touch targets */
@media (max-width: 768px) {
    #access-button {
        /* Ensure minimum touch target size of 44x44px */
        min-height: 44px;
        min-width: 44px;
        
        /* Add some margin for easier tapping */
        margin: 10px;
        
        /* Better visual feedback */
        transition: all 0.2s ease;
    }
    
    #access-button:active {
        transform: scale(0.95);
        opacity: 0.8;
    }
}