/* ==========================================================================
   The Minding Box — main stylesheet
   ========================================================================== */

:root {
    --color-primary: #5B7A57;
    --color-primary-dark: #46603F;
    --color-accent: #D97B5C;
    --color-accent-dark: #BD5F42;
    --color-bg: #FBF3E1;
    --color-surface: #ffffff;
    --color-text: #4A3730;
    --color-text-light: #8A7568;
    --color-border: #E9DCC3;
    --color-success-bg: #e3f6ee;
    --color-success-text: #1f7a55;
    --color-error-bg: #fdecec;
    --color-error-text: #b3261e;
    --color-info-bg: #eaf3fb;
    --color-info-text: #1d5f8f;
    --radius: 16px;
    --radius-sm: 8px;
    --shadow: 0 4px 16px rgba(74, 55, 48, 0.08);
    --shadow-hover: 0 8px 24px rgba(74, 55, 48, 0.14);
    --font-heading: 'Bree Serif', 'Georgia', serif;
    --font-body: 'Nunito', 'Segoe UI', sans-serif;
    --max-width: 1200px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-body);
    color: var(--color-text);
    background: var(--color-bg);
    line-height: 1.6;
}

h1, h2, h3, h4 {
    font-family: var(--font-heading);
    color: var(--color-text);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 0.5em;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }

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

img { max-width: 100%; display: block; }

/* ---- Buttons -------------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 0.65em 1.4em;
    border-radius: 999px;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.95rem;
    border: none;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-dark); color: #fff; }
.btn-secondary { background: #fff; color: var(--color-text); border: 2px solid var(--color-border); }
.btn-secondary:hover { border-color: var(--color-primary); color: var(--color-text); }
.btn-large { padding: 0.9em 2em; font-size: 1.1rem; }
.btn-favorite { background: #fff; border: 2px solid var(--color-accent); color: var(--color-accent-dark); }
.btn-link { background: none; border: none; color: var(--color-primary-dark); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.btn-link-danger { color: var(--color-error-text); }

/* ---- Alerts ---------------------------------------------------------- */
.alert {
    padding: 0.85em 1.2em;
    border-radius: var(--radius-sm);
    margin-bottom: 1em;
}
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-error { background: var(--color-error-bg); color: var(--color-error-text); }
.alert-info { background: var(--color-info-bg); color: var(--color-info-text); }
.alert-page { max-width: var(--max-width); margin: 1em auto 0; }

/* ---- Header / nav ----------------------------------------------------- */
.site-header {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    position: sticky;
    top: 0;
    z-index: 50;
}
.site-header-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0.9em 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75em;
}
.site-logo {
    display: flex;
    align-items: center;
}
.site-logo-img {
    height: 52px;
    width: auto;
    display: block;
}
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.5em;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-text); }

.site-nav {
    display: flex;
    align-items: center;
    gap: 1.4em;
    flex-wrap: wrap;
}
.site-nav > a { font-weight: 600; color: var(--color-text); }
.site-nav > a:hover { color: var(--color-primary-dark); }
.nav-account {
    background: var(--color-primary);
    color: #fff !important;
    padding: 0.45em 1.1em;
    border-radius: 999px;
}
.nav-account:hover { background: var(--color-primary-dark); }

.nav-search {
    display: flex;
    align-items: center;
}
.nav-search input {
    border: 1px solid var(--color-border);
    border-radius: 999px 0 0 999px;
    padding: 0.45em 1em;
    font-family: var(--font-body);
}
.nav-search button {
    border: 1px solid var(--color-border);
    border-left: none;
    background: var(--color-bg);
    border-radius: 0 999px 999px 0;
    padding: 0.45em 0.8em;
    cursor: pointer;
}

/* ---- Layout ------------------------------------------------------------ */
.site-body {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 1.5em 3em;
}
.page-heading { padding-top: 1.5em; }
.page-heading--with-icon { display: flex; align-items: center; gap: 1em; }
.page-heading-icon { width: 64px; height: 64px; object-fit: contain; border-radius: 50%; background: var(--color-surface); box-shadow: var(--shadow); flex-shrink: 0; }
.page-heading-desc { color: var(--color-text-light); }
.breadcrumb { color: var(--color-text-light); font-size: 0.9rem; }
.narrow-content { max-width: 700px; }
.legal-content h2 { margin-top: 1.4em; font-size: 1.2rem; }
.legal-content ul { padding-left: 1.4em; }
.legal-content li { margin-bottom: 0.4em; }

.page-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2em;
}
.page-main { min-width: 0; }

/* ---- Hero --------------------------------------------------------------- */
.hero {
    position: relative;
    background-image: url('/assets/img/brand/hero-illustration.jpg');
    background-size: cover;
    background-position: center 65%;
    border-radius: var(--radius);
    margin-top: 1.5em;
    min-height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
    text-align: center;
}
.hero-inner {
    max-width: 620px;
    margin: 0 auto;
    background: rgba(251, 243, 225, 0.9);
    border-radius: var(--radius);
    padding: 1.8em 2.2em;
}
.hero h1 { color: var(--color-text); font-size: 2.1rem; }
.hero p { color: var(--color-text); font-size: 1.05rem; }
.hero .btn-primary { background: var(--color-accent); color: #fff; }
.hero .btn-primary:hover { background: var(--color-accent-dark); color: #fff; }

/* ---- Category tiles ------------------------------------------------------ */
.category-tiles-section { margin: 2.5em 0; }
.category-search-wrap { margin: 1.5em 0; }
.category-search-input {
    width: 100%;
    max-width: 420px;
    padding: 0.7em 1.1em;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 1rem;
    display: block;
}
.category-search-empty { color: var(--color-text-light); margin-top: 1em; }
.category-tiles-viewall { text-align: center; margin-top: 1.5em; }
.category-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 1em;
}
.category-tile {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.4em 1em;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 600;
    color: var(--color-text);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
}
.category-tile[hidden] { display: none; }
.category-tile-icon {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--color-bg);
}
.category-tile:hover {
    box-shadow: var(--shadow-hover);
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-primary-dark);
}
.category-tile--sub { padding: 1em; font-size: 0.95rem; }
.category-tiles--sub { margin-bottom: 2em; }

/* ---- Activity grid / cards ------------------------------------------------ */
.activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 1.5em;
    margin: 1.5em 0;
}
.activity-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
}
.activity-card:hover { box-shadow: var(--shadow-hover); text-decoration: none; }
.activity-card-thumb {
    aspect-ratio: 4 / 3;
    background: var(--color-bg);
    overflow: hidden;
}
.activity-card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.activity-card-thumb-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.5rem;
    background: linear-gradient(135deg, #fdf1e3, #f6e4c9);
}
.activity-card-body { padding: 1em 1.1em; flex: 1; display: flex; flex-direction: column; }
.activity-card-badge {
    display: inline-block;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.2em 0.7em;
    border-radius: 999px;
    margin-bottom: 0.6em;
    align-self: flex-start;
}
.activity-card-title { font-size: 1.05rem; margin-bottom: 0.4em; }
.activity-card-desc { font-size: 0.9rem; color: var(--color-text-light); margin: 0; }

/* ---- Activity detail page -------------------------------------------------- */
.activity-detail { display: grid; grid-template-columns: 1fr; gap: 2em; }
.activity-detail-desc { font-size: 1.05rem; }
.activity-detail-meta { color: var(--color-text-light); font-size: 0.9rem; }
.activity-detail-actions { display: flex; gap: 0.8em; flex-wrap: wrap; margin: 1.5em 0 2em; }

.annotate-section {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.5em;
    margin-top: 1em;
}
.annotate-workspace { margin-top: 1.5em; }
.annotate-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6em;
    background: var(--color-bg);
    border-radius: var(--radius-sm);
    padding: 0.8em;
    margin-bottom: 1em;
}
.annotate-tool {
    background: #fff;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.5em 0.9em;
    cursor: pointer;
    font-family: var(--font-body);
}
.annotate-tool.active { border-color: var(--color-primary); background: #eafaf7; }
.annotate-width-label { font-size: 0.85rem; display: flex; align-items: center; gap: 0.4em; }
.annotate-pager { display: flex; align-items: center; gap: 1em; margin-bottom: 1em; }
.annotate-canvas-stack {
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: #f4f4f4;
    min-height: 300px;
    display: flex;
    justify-content: center;
    padding: 1em;
    overflow: auto;
    touch-action: pan-x pan-y;
}
.annotate-page-wrap { position: relative; margin: 0 auto; }
.annotate-page-wrap canvas { position: absolute; top: 0; left: 0; }
.annotate-page-wrap .pdf-canvas { box-shadow: var(--shadow); background: #fff; }
/* The drawing layer must swallow touch gestures itself (no native scroll/zoom while a
   finger is on the canvas) so a drawn stroke never gets hijacked into a page-scroll -
   this is the fix for "drawing moves the screen around" on phones/tablets. */
.annotate-page-wrap .draw-canvas { touch-action: none; }

.annotate-fullscreen-btn { margin-left: auto; }
.annotate-mobile-tip { font-size: 0.85rem; color: var(--color-text-light); margin: -0.4em 0 1em; }
.annotate-workspace.is-fullscreen .annotate-mobile-tip { display: none; }
.annotate-btn-icon { display: inline-block; }
.annotate-tool .annotate-btn-icon, .annotate-toolbar .btn .annotate-btn-icon { margin-right: 0.4em; }
.annotate-pager .btn .annotate-btn-icon { margin: 0 0.4em; }

/* ---- Fullscreen drawing mode --------------------------------------------- */
/* The whole point of fullscreen is to hand the PDF as much of the screen as
   possible. Everything that isn't the PDF itself - drawing tools, page nav,
   download/save - is collapsed to icon-only controls and moved into a slim
   vertical strip down the left, starting about a fifth of the way down the
   screen, so the canvas can claim almost the entire remaining area. A CSS grid
   (rather than flex) is what makes this possible without reordering the HTML:
   the toolbar and output-actions aren't adjacent in the markup, but grid lets
   both be placed into the same "tools"/"output" column regardless. */
.annotate-workspace.is-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: #fff;
    margin: 0;
    padding: 0.35em;
    display: grid;
    grid-template-columns: 60px 1fr;
    /* The pager row is left auto (sized to its own thin content) rather than
       tied to the 20vh offset - the toolbar gets that offset itself, via its
       own padding-top, below. Otherwise the pager's grid row would be forced
       to the same 20vh height as the empty spacer beside it (grid rows are
       shared across all columns), wasting that space instead of handing it
       to the canvas. */
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        ".      pager"
        "tools  canvas"
        "output canvas";
    column-gap: 0.4em;
    row-gap: 0.3em;
}
.annotate-workspace.is-fullscreen .annotate-btn-label {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}
.annotate-workspace.is-fullscreen .annotate-tool .annotate-btn-icon,
.annotate-workspace.is-fullscreen .annotate-toolbar .btn .annotate-btn-icon,
.annotate-workspace.is-fullscreen .annotate-pager .btn .annotate-btn-icon,
.annotate-workspace.is-fullscreen .annotate-output-actions .btn .annotate-btn-icon {
    margin: 0;
}
.annotate-workspace.is-fullscreen .annotate-toolbar {
    grid-area: tools;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    align-content: start;
    gap: 0.35em;
    /* This is what actually gives "starts about 20% down the screen" - the grid
       row itself is left auto/flexible (see the container rule above) so the
       pager doesn't get stretched into wasted space; the offset lives here
       instead, purely as breathing room above the first tool button. */
    padding: 20vh 0 0.3em;
    margin-bottom: 0;
    overflow-y: auto;
    min-height: 0;
}
.annotate-workspace.is-fullscreen .annotate-tool,
.annotate-workspace.is-fullscreen .annotate-toolbar .btn,
.annotate-workspace.is-fullscreen .annotate-output-actions .btn {
    width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    flex-shrink: 0;
}
.annotate-workspace.is-fullscreen .annotate-width-label {
    font-size: 0;
    gap: 0.2em;
    flex-direction: column;
}
.annotate-workspace.is-fullscreen .annotate-width-label input[type="range"] { width: 44px; }
.annotate-workspace.is-fullscreen input[type="color"] { width: 32px; height: 32px; padding: 0; flex-shrink: 0; }
.annotate-workspace.is-fullscreen .annotate-pager {
    grid-area: pager;
    justify-content: center;
    gap: 0.5em;
    margin-bottom: 0;
}
.annotate-workspace.is-fullscreen .annotate-pager .btn { padding: 0.3em 0.5em; }
.annotate-workspace.is-fullscreen #annotatePageStatus { font-size: 0.85rem; }
.annotate-workspace.is-fullscreen .annotate-canvas-stack {
    grid-area: canvas;
    min-height: 0;
    min-width: 0;
    margin-bottom: 0;
    padding: 0.4em;
}
.annotate-workspace.is-fullscreen .annotate-output-actions {
    grid-area: output;
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    gap: 0.35em;
}
.annotate-workspace.is-fullscreen .annotate-status-msg {
    font-size: 0.65rem;
    text-align: center;
    max-width: 60px;
}
body.annotate-fullscreen-lock { overflow: hidden; }
.annotate-text-input {
    position: absolute;
    z-index: 5;
    border: 1px dashed var(--color-primary);
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 4px;
    font-family: sans-serif;
    min-width: 120px;
}
.annotate-output-actions { display: flex; align-items: center; gap: 1em; flex-wrap: wrap; margin-top: 1.2em; }
.annotate-status-msg { color: var(--color-text-light); font-size: 0.9rem; }

/* ---- Sidebar / ad slots -------------------------------------------------- */
.page-sidebar { display: none; }
.ad-slot {
    background: #fdfaf4;
    border: 2px dashed var(--color-border);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-light);
    font-size: 0.8rem;
}
.ad-slot-label { text-transform: uppercase; letter-spacing: 0.05em; }
.ad-slot--sidebar { min-height: 600px; width: 100%; }
.ad-slot--infeed { grid-column: span 1; min-height: 250px; }
.ad-slot--footer { min-height: 90px; margin: 2em auto 1.5em; max-width: var(--max-width); }

/* ---- Forms --------------------------------------------------------------- */
.admin-form, .simple-form {
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    max-width: 520px;
}
.admin-form label, .simple-form label {
    font-weight: 600;
    margin-top: 0.8em;
}
.admin-form input[type=text],
.admin-form input[type=email],
.admin-form input[type=password],
.admin-form input[type=number],
.admin-form input[type=file],
.admin-form select,
.admin-form textarea,
.simple-form input[type=text],
.simple-form input[type=email],
.simple-form textarea {
    padding: 0.6em 0.8em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: 1rem;
}
.admin-form button, .simple-form button { margin-top: 1.3em; align-self: flex-start; }
.hp-field { position: absolute; left: -9999px; }
.form-privacy-note { font-size: 0.85rem; color: var(--color-text-light); margin-top: 0.6em; }
.category-filter-form { display: flex; align-items: center; gap: 0.6em; margin: 1em 0; }
.category-filter-form select { padding: 0.4em 0.8em; border-radius: var(--radius-sm); border: 1px solid var(--color-border); }

/* ---- Pagination ----------------------------------------------------------- */
.pagination { display: flex; justify-content: center; align-items: center; gap: 1.5em; margin: 2em 0; }

/* ---- Footer --------------------------------------------------------------- */
.site-footer {
    background: #2f3e46;
    color: #d7dee2;
    margin-top: 2em;
}
.site-footer-inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 2.5em 1.5em;
    display: flex;
    flex-wrap: wrap;
    gap: 2em;
    justify-content: space-between;
}
.site-footer-brand strong { color: #fff; font-family: var(--font-heading); font-size: 1.2rem; }
.site-footer-nav { display: flex; flex-direction: column; gap: 0.5em; }
.site-footer-nav a { color: #d7dee2; }
.site-footer-nav a:hover { color: #fff; }
.site-footer-copy { width: 100%; text-align: center; color: #9aa7ac; font-size: 0.85rem; margin: 1.5em 0 0; }

/* ---- Responsive ------------------------------------------------------------ */
@media (min-width: 1024px) {
    .page-layout { grid-template-columns: 1fr 300px; }
    .page-sidebar { display: block; }
}

@media (max-width: 780px) {
    .nav-toggle { display: flex; }
    .site-nav {
        display: none;
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0.8em;
        padding-top: 0.8em;
    }
    .site-nav.is-open { display: flex; }
    .nav-search { width: 100%; }
    .nav-search input { flex: 1; }
}