@charset "UTF-8";

/**
 * File Title: Main Stylesheet
 *
 * @author      David Logan
 * @version     1.0.4
 * @last-update 2025-11-03
 *
 * @description Styles for the WordPress security scanner.
 *
 * TABLE OF CONTENTS
 * -----------------
 * 0.0  root and body, vars
 * 1.0  Header
 * 2.0  Form Elements
 * 2.1  Button Spinner
 * 3.0  Table Styles
 * 4.0  Utility & Status Classes
 * 5.0  Explanations
 * 6.0  Fixes & Disclaimer
 * 7.0  Footer
 */


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 0.0  variables, root, body
 */

:root {
    /* color palette */
    --color-bg: #FCFBF9;  /* (Antique White) */
    --color-primary-accent: #F5E4E4;  /* (Dusty Pink) */
    --color-secondary-accent: #D8E6D3;  /* (Pale Sage) use for e.g. CTA */
    --color-fg: #4A4441;  /* (Dark Taupe) */
    --color-neutral: #ECEBE8;  /* (Light Stone) use for  e.g. borders */
    --color-button: #C97B63;  /* (Muted Terracotta) */
    --color-muted: #7A716D;  /* (Warm Gray) */
    /* other colors, fit with main palette */
    --color-header: #A8BFCC;
    /* --- Status Palette --- */
    --color-success: #7A9A7E;         /* (Muted Moss) */
    --color-warning: #D1A15D;         /* (Muted Gold) */
    --color-danger: #BC6C6A;          /* (Faded Brick) */

    /* Spacings */
    --border-radius: 0.5rem;
}

body {
    color: var(--color-fg);
    background-color: var(--color-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 1.0  Header - a header with waves at the bottom
 */

.wave-container {  
    height: 20rem;
    background-color: var(--color-header);
    position: relative;
    text-align: center;
    margin-bottom: 6rem;
    color: #ffffff;
    padding-top: 2rem;
    box-sizing: border-box;
}

.wave-container h1 {
    margin-top: 0;
    font-size: clamp(2.5rem, 6vw, 5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.wave-container .subtitle {
    font-size: 1.25rem;
    margin-bottom: 4rem;
}

.wave-container::before {
    content: "";
    width: 100%;
    height: 26px;
    position: absolute;
    bottom: -1px; /* Adjusted for pixel-perfect alignment */
    left: 0;
    background-size: auto;
    background-repeat: repeat no-repeat;
    background-position: 94vw bottom;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  129' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 95L50 89C100 83 200 72 300 48C400 25 500 -10 600 2C700 13 800 72 900 95C1000 118 1100 107 1150 101L1200 95V130H1150C1100 130 1000 130 900 130C800 130 700 130 600 130C500 130 400 130 300 130C200 130 100 130 50 130H0V95Z' fill='%23FCFBF9'/></svg>");
}

@media(max-width:850px) {
    .wave-container {
        height: 14rem;
    }
    .wave-container .subtitle {
        font-size: 1rem;
    }
    .wave-container::before {
        height: 12px;
  }
}


/* main */

main {
    max-width: 800px;
    margin: 0 auto 4rem;
    padding: 0 1rem;
    box-sizing: border-box;
}

.intro-text {
    margin-bottom: 2rem;
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 2.0  Form Elements
 */

form {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

input[type="url"] {
    flex-grow: 1;
    padding: 0.5rem 1rem;
    font-size: 1.25rem;
    border: 1px solid var(--color-primary-accent);
    border-radius: var(--border-radius);
    min-width: 100px; /* Ensure input doesn't shrink too much */
}

button {
    padding: 1.5rem 2rem;
    font-size: 1.125rem;
    font-weight: bold;
    background-color: var(--color-button);
    color: var(--color-bg);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60px; /* Prevents layout shift */
    min-width: 140px; /* Prevents layout shift */
    transition: background-color 0.2s ease;
}

button:disabled {
    background-color: #857D79;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    form {
        flex-direction: column;
    }
    button {
        width: 100%;
    }
}


/*
 * 2.1  Button Spinner
 */

.btn-spinner {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Style for button when scanning */
button.scanning .btn-text {
    display: none;
}

button.scanning .btn-spinner {
    display: block;
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 3.0  Table Styles
 */

table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 0.375rem 0.5rem rgba(0,0,0,0.05);
    border-radius: var(--border-radius);
    overflow: hidden;
    margin-bottom: 4rem;
}

td, th {
    padding: 1.25rem 1rem;
    text-align: left;
    word-break: break-word;
}
th {
    background-color: var(--color-primary-accent);
}
td {
    border: 1px solid var(--color-primary-accent);
}
td:first-of-type {
    font-weight: 700;
}

/* Responsive table */
@media (max-width: 700px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid var(--color-primary-accent);
        margin-bottom: 1rem;
        border-radius: var(--border-radius);
    }
    
    td {
        border: none;
        border-bottom: 1px solid var(--color-secondary-accent);
        position: relative;
        padding-left: 50%;
    }

    td:before {
        position: absolute;
        top: 0.75rem;
        left: 1rem;
        width: 45%;
        padding-right: 0.5rem;
        white-space: nowrap;
        font-weight: bold;
    }

    /* Set labels */
    td:nth-of-type(1):before { content: "Check"; }
    td:nth-of-type(2):before { content: "Status"; }
    td:nth-of-type(3):before { content: "Details"; }

    td:last-child {
        border-bottom: 0;
    }
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 4.0  Utility & Status Classes
 */

.status-icon {
    vertical-align: middle;
    width: 1.25em;
    height: 1.25em;
    margin-right: 1rem;
}

/* .status-vulnerable {
    color: var(--color-danger);
    font-weight: bold;
}

.status-secure {
    color: var(--color-success);
    font-weight: bold;
} */

#error-message {
    color: var(--color-danger);
    text-align: center;
    font-size: 1.1rem;
    font-weight: bold;
    white-space: pre-wrap;
    margin-bottom: 1rem;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 5.0  Explanations
 */

#explanations,
#fixes {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
}

#explanations h2,
#fixes h2 {
    font-size: 2rem;
    color: var(--color-fg);
    text-align: center;
    margin-bottom: 2rem;
}

.explanation-item {
    background-color: #fff;
    border: 1px solid var(--color-neutral);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}

.explanation-item h3 {
    margin-top: 0;
    color: var(--color-button);
}

.explanation-item p {
    margin-bottom: 0.5rem;
}

.explanation-item p:last-child {
    margin-bottom: 0;
}

/* MODIFIED: This rule is now for INLINE code */
.explanation-item code {
    background-color: var(--color-neutral);
    padding: 0.15rem 0.4rem;
    border-radius: 4px;
    font-size: 0.9em;
    color: #333; /* Darker text for code */
    white-space: nowrap; /* Keep inline code on one line */
}

/* ADDED: New rule specifically for code BLOCKS */
.explanation-item code.code-block {
    display: block; 
    white-space: pre-wrap; 
    margin-top: 0.5rem;
    padding: 0.5rem 1rem; /* Added padding */
    line-height: 1.4;
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 6.0  Fixes & Disclaimer
 */

.disclaimer-box {
    background-color: #fffaf0; /* Light cream/yellow */
    border: 2px solid var(--color-warning);
    border-radius: var(--border-radius);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
}

.disclaimer-box strong {
    color: var(--color-danger);
    font-size: 1.1rem;
    display: block;
    margin-bottom: 0.5rem;
}

.disclaimer-box p {
    margin: 0;
    line-height: 1.5;
}


/* ---- ---- ---- ---- ---- ---- ---- ---- 
 * 7.0  Footer
 */

footer {
    border-top: 1px solid var(--color-neutral);
    max-width: 800px;
    margin: 4rem auto 2rem auto;
    padding: 2rem 1rem 0 1rem;
    text-align: center;
    color: var(--color-muted);
}

footer p {
    margin: 0.5rem 0;
}