/* =======================
   ADRIC CUSTOMS - MAIN STYLESHEET
======================= */

/* RESET ALL DEFAULT LINK STYLES */
a, a:link, a:visited, a:hover, a:active {
    color: #000000;
    text-decoration: none;
}

body{
    background:#000000;
    color:#00f8f8;
    font-family:Consolas, monospace;
    padding:20px;
}

/* =======================
   ANGLED WINDOW STYLE
======================= */
.panel{
    background:#003e3e;
    border:2px solid #00f8f8;
    clip-path:polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
    padding:15px;
}

/* =======================
   LOGO
======================= */


@font-face {
    font-family: 'Roadtest';
    src: url('https://adriccustoms.neocities.org/RoadTest.ttf') format('truetype');
    

    
}

.logo {
    flex: 1;
    text-align: center;
    position: relative;
    margin: 10px 0;
}

.logo-text {
    font-family: 'Roadtest', monospace;
    font-size: 10rem;
    font-weight: normal;
    letter-spacing: 2px;
    display: inline-block;
    position: relative;
}

/* Shadow layer (bottom-right 3D effect) */
.logo-text::before {
    content: "AdricCustoms";
    position: absolute;
    top: 3px;
    left: 3px;
    color: #007c7c;
    z-index: 0;
}

/* Main text layer (top) */
.logo-text span {
    position: relative;
    color: #00f8f8;
    z-index: 1;
    display: inline-block;
}



/* =======================
   LAYOUT
======================= */
.container{
    display:grid;
    grid-template-columns:220px 1fr;
    grid-template-rows:auto 1fr;
    gap:12px;
    max-width:1200px;
    margin:auto;
}

/* =======================
   HEADER (TOP BAR)
======================= */

/* First, import the slkscr font - add this near your other @font-face */
@font-face {
    font-family: 'Silkscreen';
    src: url('https://adriccustoms.neocities.org/slkscr.ttf') format('truetype');
}

.header{
    grid-column:1 / 3;
    display:flex;
    justify-content:space-between;
    gap:10px;
}

/* Tab styling */
.tab, .fancy-button {
    flex:1;
    text-align:center;

    background:#007c7c;
    padding:15px;
    clip-path:polygon(15px 0, 100% 0, calc(100% - 15px) 100%, 0 100%);
    cursor:pointer;
    font-weight:bold;
    
    /* Add the Silkscreen font */
    font-family: 'Silkscreen', 'Consolas', monospace;
    font-size: 1.5rem;
}

.tab:hover, .fancy-button:hover {
    background:#00f8f8;
}

/* Links inside tabs and fancy-button */
.tab a, .fancy-button a {
    display:block;
    color:#000000;
    font-family: 'Silkscreen', 'Consolas', monospace;
}

/* =======================
   SIDEBAR
======================= */
.sidebar{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.nav{
    background:#007c7c;
    padding:12px;
    border-left:4px solid #00f8f8;
    cursor:pointer;
    transition:0.2s;
    
    
    font-family: 'Silkscreen', 'Consolas', monospace;
    font-size: 1.2rem;
}

.nav:hover{
    background:#00f8f8;
}

.nav a {
    display:block;
    color:#000000;
    font-family: 'Silkscreen', 'Consolas', monospace;
}

/* =======================
   MAIN WINDOW
======================= */

/* First, import the rainyhearts font - add this near your other @font-face declarations */
@font-face {
    font-family: 'PressStart2P';
    src: url('https://adriccustoms.neocities.org/PressStart2P.ttf') format('truetype');
}

.main{
    min-height:500px;
}

.window-title{
    background:#00f8f8;
    color:#000000;
    padding:10px;
    font-weight:bold;
    clip-path:polygon(0 0, 95% 0, 100% 100%, 0 100%);
    margin-bottom:15px;
    
   
    font-family: 'PressStart2P', monospace;
    font-size: 1.1rem;
    letter-spacing: 1px;
}

.hero{
    font-size:1.8rem;
    margin-bottom:10px;
    
  
    font-family: 'PressStart2P', monospace;
    letter-spacing: 1px;
}

.sub{
    color:#00f8f8;
    line-height:1.6;
    
  
    font-family: 'PressStart2P', monospace;
    font-size: 0.95rem;
}



/* ======================
   MONITOR IMAGE VIEWER
====================== */
.monitor{
    background:#003e3e;

    border:2px solid #00f8f8;

    clip-path:polygon(
        18px 0,
        100% 0,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        0 100%,
        0 18px
    );

    height:420px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:15px;

    padding:10px;
}

#mainImage{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

/* ======================
   TEXT BLOCKS
====================== */
.title{
    text-align:center;
    font-size:1.6rem;
    margin-bottom:10px;
    color:#00f8f8;
}

.description{
    background:#003e3e;
    border-left:4px solid #00f8f8;
    padding:12px;
    line-height:1.6;
    margin-bottom:15px;
    
    /* Add Silkscreen font */
    font-family: 'Silkscreen', 'Consolas', monospace;
    font-size: 0.85rem;
}

/* ======================
   CONTROLS
====================== */
.controls{
    display:flex;
    gap:10px;
}

button{
    flex:1;

    background:#007c7c;
    color:#000;

    border:2px solid #00f8f8;

    padding:12px;

    font-weight:bold;

    cursor:pointer;

    clip-path:polygon(
        12px 0,
        100% 0,
        calc(100% - 12px) 100%,
        0 100%
    );
}

button:hover{
    background:#00f8f8;
}

/* ======================
   COUNTER
====================== */
.counter{
    text-align:center;
    margin-top:10px;
    color:#00baba;
}



/* =======================
   RESPONSIVE - TABLET & MOBILE
======================= */

/* Tablet landscape (between 800px and 1100px) */
@media(max-width:1100px) and (min-width:801px){
    .container{
        gap:10px;
    }
    
    .tab, .fancy-button {
        padding:12px;
        font-size:0.9rem;
    }
    
    .nav {
        padding:10px;
        font-size:0.9rem;
    }
    
    .window-title {
        font-size:0.9rem;
    }
    
    .hero {
        font-size:1.4rem;
    }
}

/* Responsive logo */
@media(max-width:800px){
    .logo-text {
        font-size: 3rem;
    }
    
    .logo-text::before {
        top: 3px;
        left: 3px;
    }
}

@media(max-width:600px){
    .logo-text {
        font-size: 3rem;
    }
    
    .logo-text::before {
        top: 2px;
        left: 2px;
    }
}

@media(max-width:400px){
    .logo-text {
        font-size: 3rem;
    }
}

/* Tablet portrait & large phones (between 600px and 800px) */
@media(max-width:800px){
    .container{
        grid-template-columns:30% 1fr;  /* Sidebar 30%, main content 70% */
        gap:12px;
    }
    
    .header{
        grid-column:1 / 3;
        flex-direction:column;
        gap:8px;
    }
    
    .tab, .fancy-button {
        padding:10px;
        font-size:0.85rem;
    }
    
    .sidebar{
        flex-direction:column;  /* Keep vertical on tablets */
        gap:8px;
    }
    
    .nav {
        width:100%;  /* Full width of sidebar */
        padding:10px;
        font-size:0.85rem;
        text-align:left;  /* Left align text for better readability */
    }
    
    .main {
        min-height:auto;
    }
    
    .window-title {
        font-size:0.9rem;
        padding:8px;
    }
    
    .hero {
        font-size:1.3rem;
    }
    
    .sub {
        font-size:0.9rem;
    }
    
    /* Monitor adjustments */
    .monitor {
        height:280px;
        padding:8px;
    }
    
    .title {
        font-size:1.2rem;
    }
    
    .description {
        font-size:0.85rem;
        padding:10px;
    }
    
    .controls {
        gap:8px;
    }
    
    button {
        padding:10px;
        font-size:0.85rem;
    }
}

/* Small phones (below 600px) - Sidebar 30% width maintained */
@media(max-width:600px){
    body {
        padding:10px;
    }
    
    .container {
        grid-template-columns:30% 1fr;  /* Sidebar stays 30% */
        gap:10px;
    }
    
    .header {
        grid-column:1 / 3;
        gap:6px;
    }
    
    .tab, .fancy-button {
        padding:8px;
        font-size:0.75rem;
        clip-path:polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
    }
    
    .sidebar {
        flex-direction:column;
        gap:6px;
    }
    
    .nav {
        width:100%;
        padding:8px;
        font-size:0.75rem;
        border-left-width:3px;
        text-align:left;
        word-break:break-word;  /* Prevents long words from breaking layout */
    }
    
    .panel {
        padding:10px;
        clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .window-title {
        font-size:0.85rem;
        padding:6px;
        clip-path:polygon(0 0, 92% 0, 100% 100%, 0 100%);
        margin-bottom:10px;
    }
    
    .hero {
        font-size:1.1rem;
        margin-bottom:8px;
    }
    
    .sub {
        font-size:0.8rem;
        line-height:1.4;
    }
    
    /* Monitor adjustments for small phones */
    .monitor {
        height:200px;
        padding:6px;
        clip-path:polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
    }
    
    .title {
        font-size:0.9rem;
        margin-bottom:6px;
    }
    
    .description {
        font-size:0.75rem;
        padding:8px;
        margin-bottom:10px;
    }
    
    .controls {
        gap:6px;
        flex-direction:column;
    }
    
    button {
        padding:8px;
        font-size:0.75rem;
        clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    }
    
    .counter {
        font-size:0.75rem;
        margin-top:6px;
    }
}

/* Extra small phones (below 400px) - Sidebar slightly wider for readability */
@media(max-width:400px){
    body {
        padding:8px;
    }
    
    .container {
        grid-template-columns:35% 1fr;  /* Slightly wider sidebar for tiny screens */
        gap:8px;
    }
    
    .tab, .fancy-button {
        padding:6px;
        font-size:1.2rem;
    }
    
    .nav {
        padding:2px;
        font-size:0.9rem;
    }
    
    .monitor {
        height:150px;
    }
    
    .title {
        font-size:0.8rem;
    }
    
    .description {
        font-size:0.65rem;
    }
    
    button {
        padding:6px;
        font-size:0.7rem;
    }
    
    .window-title {
        font-size:0.75rem;
    }
    
    .hero {
        font-size:0.9rem;
    }
    
    .sub {
        font-size:0.7rem;
    }
}

/* Landscape orientation for phones - adjust sidebar width */
@media(max-width:800px) and (orientation: landscape) {
    body {
        padding:10px;
    }
    
    .container {
        grid-template-columns:25% 1fr;  /* Slightly narrower sidebar in landscape */
        gap:10px;
    }
    
    .sidebar {
        flex-direction:column;
        gap:6px;
    }
    
    .nav {
        width:100%;
        padding:8px;
        font-size:0.8rem;
    }
    
    .monitor {
        height:180px;
    }
    
    .hero {
        font-size:1rem;
    }
}

/* Touch-friendly adjustments for mobile */
@media (hover: none) and (pointer: coarse) {
    .tab, .fancy-button, .nav, button {
        cursor: default;
        -webkit-tap-highlight-color: rgba(0,248,248,0.3);
    }
    
    .tab:active, .fancy-button:active, .nav:active, button:active {
        background: #00f8f8;
        transform: scale(0.98);
    }
    
    /* Make nav items easier to tap on mobile */
    .nav {
        min-height: 44px;  /* Minimum touch target size */
        display: flex;
        align-items: center;
    }
    
    .nav a {
        width: 100%;
    }
}
}