/* ============================================================
   devtools.zothnet.com — style.css
   Shared stylesheet for all pages.
   Edit here and it applies everywhere.
   ============================================================ */

/* ---- CSS Variables ---- */
:root {
    --bg:        #f5f4f0;
    --surface:   #ffffff;
    --surface2:  #faf9f7;
    --border:    #e5e3dc;
    --border2:   #d5d3cc;
    --text:      #1a1a1a;
    --text2:     #444444;
    --text3:     #666666;   /* was #888 — bumped for WCAG AA contrast */
    --text4:     #333333;
    --blue:      #185FA5;
    --blue-h:    #0C447C;
    --blue-lt:   #E6F1FB;
    --green-bg:  #EAF3DE;
    --green-bd:  #C0DD97;
    --green-tx:  #27500A;
    --green-tx2: #3B6D11;
    --amber-bg:  #FAEEDA;
    --amber-bd:  #F5C47A;
    --amber-tx:  #854F0B;
    --red-bg:    #FCEBEB;
    --red-bd:    #F7C1C1;
    --red-tx:    #A32D2D;
    --teal-bg:   #E1F5EE;
    --teal-bd:   #9FE1CB;
    --teal-tx:   #0F6E56;
    --purple-bg: #EEEDFE;
    --purple-tx: #534AB7;
    --info-bg:   #E6F1FB;
    --info-tx:   #185FA5;
    --coral-bg:  #FAECE7;
    --coral-tx:  #993C1D;
}

[data-theme="dark"] {
    --bg:        #0f1117;
    --surface:   #1a1d24;
    --surface2:  #1e2129;
    --border:    #2e3340;
    --border2:   #3d4252;
    --text:      #e8eaf0;
    --text2:     #b0b8c8;
    --text3:     #8a94a6;   /* was #5a6070 — bumped for WCAG AA contrast */
    --text4:     #c8d0e0;
    --blue:      #5BA3E8;
    --blue-h:    #7fbcf0;
    --blue-lt:   #162236;
    --green-bg:  #0f2318;
    --green-bd:  #1e4a28;
    --green-tx:  #6abf45;
    --green-tx2: #4da832;
    --amber-bg:  #261a08;
    --amber-bd:  #4a3010;
    --amber-tx:  #e8a84a;
    --red-bg:    #2a1010;
    --red-bd:    #4a1f1f;
    --red-tx:    #e87070;
    --teal-bg:   #0a2018;
    --teal-bd:   #1a4535;
    --teal-tx:   #3dbb8a;
    --purple-bg: #1e1a3a;
    --purple-tx: #a89ff0;
    --info-bg:   #162236;
    --info-tx:   #5BA3E8;
    --coral-bg:  #2a1208;
    --coral-tx:  #e8825a;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
}

a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.88em;
    background: var(--surface2);
    padding: 1px 5px;
    border-radius: 4px;
}

/* ---- Site Header ---- */
.site-header {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 1.5rem;
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-inner {
    max-width: 960px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    height: 56px;
}

.site-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.site-logo:hover { text-decoration: none; }

.logo-light { display: block; }
.logo-dark  { display: none; }
[data-theme="dark"] .logo-light { display: none; }
[data-theme="dark"] .logo-dark  { display: block; }

.header-tagline {
    font-size: 13px;
    color: var(--text3);
}

.header-nav {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-nav a {
    font-size: 13px;
    color: var(--text2);
    text-decoration: none;
    white-space: nowrap;
}
.header-nav a:hover { color: var(--blue); text-decoration: none; }

.btn-ebook {
    background: var(--blue);
    color: #fff !important;
    border-radius: 6px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
}
.btn-ebook:hover { background: var(--blue-h) !important; }

.theme-toggle {
    background: none;
    border: 1px solid var(--border2);
    border-radius: 6px;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text2);
    flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--blue); background: var(--blue-lt); }

.icon-sun  { display: block; }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun  { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* ---- Site Footer ---- */
.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    text-align: center;
    padding: 1.5rem;
    font-size: 13px;
    color: var(--text3);
}
.site-footer a { color: var(--text2); text-decoration: none; }
.site-footer a:hover { color: var(--blue); }

/* ---- Main Content Area ---- */
.main {
    max-width: 960px;
    margin: 0 auto;
    padding: 2rem 1.5rem 4rem;
}

.hero { margin-bottom: 2rem; }
.hero h1 {
    font-size: clamp(22px, 4vw, 30px);
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.4rem;
    line-height: 1.25;
}
.hero p { font-size: 16px; color: var(--text2); }

/* ---- Cards ---- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1.25rem;
    margin-bottom: 14px;
}

.card-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text3);
    margin-bottom: 0.75rem;
}

/* ---- Buttons ---- */
.btn-primary {
    background: var(--blue);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.65rem 1.4rem;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    display: inline-block;
    text-decoration: none;
}
.btn-primary:hover { background: var(--blue-h); color: #fff; text-decoration: none; }

.btn-sm {
    background: none;
    border: 1px solid var(--border2);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    color: var(--text2);
    cursor: pointer;
    white-space: nowrap;
}
.btn-sm:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-lt); }

.btn-clear {
    background: none;
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 14px;
    color: var(--text2);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-clear:hover { border-color: var(--blue); color: var(--blue); text-decoration: none; }

/* ---- Form Elements ---- */
.field-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
}

.text-input {
    width: 100%;
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 0.65rem 1rem;
    font-size: 15px;
    color: var(--text);
    background: var(--surface2);
    outline: none;
    transition: border-color 0.15s;
    font-family: inherit;
}
.text-input:focus { border-color: var(--blue); background: var(--surface); }

textarea {
    width: 100%;
    min-height: 160px;
    border: 1px solid var(--border2);
    border-radius: 8px;
    padding: 0.75rem 1rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 13px;
    color: var(--text);
    background: var(--surface2);
    resize: vertical;
    outline: none;
    transition: border-color 0.15s;
    line-height: 1.6;
    display: block;
}
textarea:focus { border-color: var(--blue); background: var(--surface); }
textarea::placeholder { color: var(--text3); font-family: inherit; }

/* ---- Status badges ---- */
.badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 99px;
    white-space: nowrap;
    display: inline-block;
}
.badge-pass   { background: var(--green-bg); color: var(--green-tx); }
.badge-warn   { background: var(--amber-bg); color: var(--amber-tx); }
.badge-fail   { background: var(--red-bg);   color: var(--red-tx); }
.badge-info   { background: var(--info-bg);  color: var(--info-tx); }
.badge-blue   { background: var(--blue-lt);  color: var(--blue); }

/* ---- Section heading ---- */
.section-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    margin-bottom: 0.75rem;
}

/* ---- CTA box ---- */
.cta-box {
    background: var(--green-bg);
    border: 1px solid var(--green-bd);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}
.cta-text { flex: 1; min-width: 200px; }
.cta-text strong { display: block; font-size: 15px; color: var(--green-tx); margin-bottom: 0.25rem; }
.cta-text p { font-size: 13px; color: var(--green-tx2); margin: 0; }
.cta-btn {
    background: var(--green-tx);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.6rem 1.2rem;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    display: inline-block;
}
.cta-btn:hover { opacity: 0.9; color: #fff; text-decoration: none; }
.cta-btn-alt { background: var(--green-tx2); }

/* ---- Related tools section ---- */
.related-section { margin: 2rem 0 0; }
.related-heading {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text3);
    margin-bottom: 0.75rem;
}
.related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.related-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 0.85rem 1rem;
    text-decoration: none;
    display: block;
    transition: border-color 0.15s;
}
.related-card:hover { border-color: var(--blue); background: var(--blue-lt); text-decoration: none; }
.related-title { font-size: 13px; font-weight: 700; color: var(--text); margin-bottom: 3px; }
.related-desc  { font-size: 12px; color: var(--text3); line-height: 1.45; }

/* ---- Code blocks ---- */
.code-block {
    background: #1e1e2e;
    border-radius: 8px;
    padding: 0.85rem 1rem;
    overflow-x: auto;
    margin-bottom: 8px;
}
.code-block pre {
    font-size: 13px;
    color: #cdd6f4;
    white-space: pre-wrap;
    word-break: break-word;
    line-height: 1.6;
    margin: 0;
    font-family: 'SFMono-Regular', Consolas, monospace;
}

/* ---- Privacy notice ---- */
.privacy-notice {
    background: var(--green-bg);
    border: 1px solid var(--green-bd);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 13px;
    color: var(--green-tx2);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ---- Error/success boxes ---- */
.alert {
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-bottom: 1.25rem;
    font-size: 13px;
    border: 1px solid;
}
.alert-error   { background: var(--red-bg);   border-color: var(--red-bd);   color: var(--red-tx); }
.alert-warn    { background: var(--amber-bg);  border-color: var(--amber-bd); color: var(--amber-tx); }
.alert-success { background: var(--green-bg);  border-color: var(--green-bd); color: var(--green-tx); }
.alert-info    { background: var(--info-bg);   border-color: #b8d4ef;         color: var(--info-tx); }
.alert strong  { display: block; font-weight: 700; margin-bottom: 3px; }

/* ---- Hero (all pages — unified) ---- */
.hero-section,
.tool-hero {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 2.5rem 1.5rem 2rem;
}
.hero-inner,
.tool-hero-inner {
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
}
.hero-section h1,
.tool-hero h1 {
    font-size: clamp(24px, 4.5vw, 36px);
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.5rem;
    line-height: 1.2;
}
.hero-section h1 span { color: var(--blue); }
.hero-section p,
.tool-hero p {
    font-size: 16px;
    color: var(--text2);
    margin: 0 auto;
    max-width: 640px;
    line-height: 1.65;
}
.hero-stats {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--text2);
    justify-content: center;
    margin-top: 1rem;
}
.hero-stats strong { color: var(--text); }

/* ---- Tool grid (index.php) ---- */
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 1.5rem;
}

.tool-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 1rem;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    transition: border-color 0.15s, box-shadow 0.15s;
    cursor: pointer;
}
.tool-card:hover {
    border-color: var(--blue);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    text-decoration: none;
}
.tool-card.soon {
    opacity: 0.6;
    cursor: default;
}

.card-top {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.tool-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.tool-icon svg {
    width: 22px;
    height: 22px;
    stroke: #ffffff;
    fill: none;
}

.card-titles { flex: 1; }
.card-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 3px;
    line-height: 1.3;
}
.card-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 99px;
    background: var(--surface2);
    color: var(--text3);
    border: 1px solid var(--border);
}

.card-desc {
    font-size: 13px;
    color: var(--text2);
    line-height: 1.55;
    flex: 1;
    margin-bottom: 0.75rem;
}

.card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}
.card-cta {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue);
}
.status-live { font-size: 10px; font-weight: 700; color: var(--green-tx2); }
.status-soon { font-size: 10px; font-weight: 700; color: var(--text3); }

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .header-tagline { display: none; }
    .lnk-courses    { display: none; }
    .main { padding: 1.5rem 1rem 3rem; }
    .tools-grid { grid-template-columns: 1fr; }
    .hero-stats { gap: 1rem; }
}