/*
Theme Name: Winslow Learning Assets
Description: Portal theme for the Winslow Learning Assets library. Faithfully reproduces the legacy PHP directory-browser interface (logo header, in-page search, asset table) on top of WordPress custom post types.
Version: 1.0.0
Author: Winslow
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: winslow-learning-assets
Requires at least: 6.5
Requires PHP: 8.1
*/

/* -------------------------------------------------------------
 * Design tokens - ported from the legacy style.css, plus the
 * Winslow palette documented in the HSEQ Transcriber README.
 * ---------------------------------------------------------- */
:root {
    --wla-yellow:      #EAAB00;  /* Winslow Yellow */
    --wla-yellow-alt:  #EDB61D;
    --wla-rule:        #ffcc00;  /* legacy heading rule */
    --wla-black:       #000000;
    --wla-grey:        #888B95;  /* Winslow Grey */
    --wla-grey-dusk:   #D9E1F2;
    --wla-page-bg:     #f4f4f4;
    --wla-surface:     #ffffff;
    --wla-text:        #333333;
    --wla-text-soft:   #555555;
    --wla-link:        #0056b3;
    --wla-back:        #cc0000;
    --wla-border:      #dddddd;
    --wla-border-soft: #eeeeee;
    --wla-th-bg:       #f8f8f8;
}

/* 1. Global reset & body
 * No universal box-sizing reset and no line-height override: the legacy
 * stylesheet has neither, and both changed row height slightly. box-sizing is
 * applied to the same three elements the legacy CSS applied it to. */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: var(--wla-page-bg);
    padding: 20px 0;
    color: var(--wla-text);
    margin: 0;
}

img { max-width: 100%; height: auto; }

/* 2. Primary container */
.container {
    max-width: 1000px;
    background: var(--wla-surface);
    margin: 0 auto;
    padding: 30px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    width: 95%;
    box-sizing: border-box;
    overflow: hidden;
}

/* 3. Header grid (40:60 split, as legacy) */
.header-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    width: 100%;
    box-sizing: border-box;
}

.header-left .logo {
    max-width: 100%;
    height: auto;
    display: block;
}

.header-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
    width: 100%;
}

/* 4. Search & controls */
.search-container { width: 100%; }

.search-container input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--wla-border);
    border-radius: 4px;
    font-size: 15px;
    box-sizing: border-box;
    display: block;
    font-family: inherit;
}

.search-container input:focus {
    outline: 2px solid var(--wla-yellow);
    outline-offset: 1px;
    border-color: var(--wla-yellow);
}

.refresh-container { display: flex; justify-content: flex-end; gap: 8px; }

.refresh-btn {
    padding: 8px 14px;
    background: var(--wla-th-bg);
    color: #666;
    text-decoration: none;
    border-radius: 4px;
    font-size: 13px;
    border: 1px solid var(--wla-border);
    transition: all 0.2s ease;
    display: inline-block;
}

.refresh-btn:hover { background: #eee; color: var(--wla-text); border-color: #bbb; }

/* 5. Typography & navigation */
/* Metrics deliberately mirror a default browser <h2>, which is what the
   legacy portal used, so the heading renders at exactly the same size and
   spacing as the live site. */
h1, h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 0.83em;
    border-bottom: 3px solid var(--wla-rule);
    padding-bottom: 15px;
    overflow-wrap: break-word;
}

.hr-soft { border: 0; border-top: 1px solid var(--wla-border-soft); margin-bottom: 25px; }

.back-link {
    margin-bottom: 20px;
    display: inline-block;
    color: var(--wla-back);
    text-decoration: none;
    font-weight: bold;
}

.back-link:hover { text-decoration: underline; }

.navigation-header { margin-bottom: 6px; }

/* 6. Asset table */
table { width: 100%; border-collapse: collapse; margin-top: 20px; }

th {
    text-align: left;
    background: var(--wla-th-bg);
    padding: 12px;
    border-bottom: 2px solid var(--wla-border);
}

td { padding: 12px; border-bottom: 1px solid var(--wla-border-soft); }

tr:hover { background: #fdfdfd; }

.folder { font-weight: bold; color: var(--wla-link); text-decoration: none; }
.file   { color: var(--wla-text-soft); text-decoration: none; }
.file:hover, .folder:hover { text-decoration: underline; }
.folder, .file { overflow-wrap: break-word; }

/* No column width rules: the legacy stylesheet had none, so the browser
   auto-sizes the three columns from their content. Forcing width:1% on
   Format/Size collapsed them and pushed both to the far right edge. */

.wla-empty { padding: 24px 12px; color: var(--wla-grey); }

/* 11. Skip link + accessibility */
.wla-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: #fff;
    padding: 10px 16px;
    z-index: 100;
}
.wla-skip:focus { left: 10px; }

.screen-reader-text {
    border: 0; clip-path: inset(50%); height: 1px; margin: -1px;
    overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal;
}

/* 13. Responsive */
@media (max-width: 768px) {
    .header-grid { grid-template-columns: 100%; }
    .header-left .logo { max-width: 200px; margin: 0 auto 10px; }
    .refresh-container { justify-content: flex-start; }
    .container { padding: 20px 15px; }
}