/*
Theme Name: EOY Year 8 Revision
Description: End-of-Year 2026 Year 8 Revision Planner for Year 8 students. All text, colours, subjects and topics are fully editable in the WordPress Customizer — no code required.
Version: 1.2
Requires at least: 6.0
Tested up to: 6.7
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: eoy-year8
Tags: education, full-width-template, custom-colors
*/

/* ─── Reset & Base ─────────────────────────────────────────── */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* faint paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(26,24,20,0.025) 1px, transparent 1px);
  background-size: 3px 3px;
  z-index: 0;
}

button { font: inherit; cursor: pointer; }
a { color: inherit; }

#root { position: relative; z-index: 1; }

/* ─── Utility ──────────────────────────────────────────────── */

.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.serif { font-family: var(--serif); }

.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  letter-spacing: 0.02em;
  background: rgba(255,255,255,0.4);
}
.pill .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ─── Buttons ──────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  font-weight: 500;
  font-size: 14px;
  transition: transform 0.08s ease, background 0.2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: white; }
.btn.accent:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn.sm { padding: 6px 12px; font-size: 13px; }

/* ─── Scrollbar ────────────────────────────────────────────── */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
::-webkit-scrollbar-track { background: transparent; }

/* ─── Modal scrim ──────────────────────────────────────────── */

.scrim {
  position: fixed; inset: 0;
  background: rgba(15, 13, 10, 0.5);
  backdrop-filter: blur(8px);
  z-index: 50;
  display: grid; place-items: center;
  padding: 24px;
}

/* ─── Responsive helpers ───────────────────────────────────── */

@media (max-width: 720px) {
  .hide-mobile { display: none !important; }
}

/* ─── Card hover (injected by dashboard.js, duplicated here for reliability) ─── */

[data-card]:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,24,20,0.06);
  border-color: rgba(26,24,20,0.35) !important;
}

@media (max-width: 760px) {
  [data-hero] { grid-template-columns: 1fr !important; }
}

@media (max-width: 860px) {
  [data-bodygrid]   { grid-template-columns: 1fr !important; }
  [data-headergrid] { grid-template-columns: 1fr !important; }
  [data-headergrid] [data-headerstats] { order: -1; align-self: flex-start; }
}

/* ─── WP Admin bar compensation ────────────────────────────── */

.admin-bar #root { margin-top: 0; }

/* ─── Touch targets ─────────────────────────────────────────── */

.btn { min-height: 44px; }

/* ─── Mobile-first: 640px and below ─────────────────────────── */

@media (max-width: 640px) {

  /* ── Profile bar ── */
  [data-profilebar] {
    padding: 12px 16px !important;
  }

  /* ── Main content area ── */
  [data-main] {
    padding: 16px 16px 80px !important;
  }

  /* ── Countdown: stack label above the clock ── */
  [data-countdown] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 16px 18px !important;
    border-radius: 16px !important;
  }
  [data-cdnum] {
    font-size: 32px !important;
  }

  /* ── Hero ── */
  [data-hero] {
    padding: 12px 0 20px !important;
    gap: 20px !important;
  }
  [data-hero-right] {
    padding: 16px !important;
    border-radius: 16px !important;
  }

  /* ── Subjects section header ── */
  [data-section-head] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
  }

  /* ── Subject cards ── */
  [data-card] {
    border-radius: 14px !important;
    padding: 16px !important;
  }

  /* ── Footer ── */
  [data-footer] {
    margin-top: 48px !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  /* ── Subject page: coloured header ── */
  [data-subject-hdr] {
    padding: 14px 16px 44px !important;
  }

  /* ── Subject page: body lifts into header ── */
  [data-subject-body] {
    padding: 0 12px !important;
    margin-top: -24px !important;
  }

  /* ── Topic list body card ── */
  [data-bodygrid] {
    padding: 16px !important;
    gap: 20px !important;
    border-radius: 16px !important;
  }

  /* ── Topic rows: bigger tap target ── */
  [data-topic] label {
    min-height: 52px !important;
    padding: 10px 10px !important;
    gap: 12px !important;
  }

  /* ── Notes aside ── */
  [data-aside-card] {
    padding: 14px !important;
  }

  /* ── Modals: scroll on short screens, slide up from bottom ── */
  .scrim {
    align-items: flex-end !important;
    overflow-y: auto !important;
    padding: 0 !important;
  }
  [data-modal-card] {
    width: 100% !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
    padding: 20px 18px 32px !important;
    max-height: 92vh;
    overflow-y: auto;
  }
}

/* ─── Very small phones (≤ 380px) ───────────────────────────── */

@media (max-width: 380px) {
  [data-cdnum] {
    font-size: 26px !important;
  }
  [data-bodygrid] {
    padding: 12px !important;
  }
  [data-subject-hdr] {
    padding: 12px 14px 40px !important;
  }
  [data-subject-body] {
    padding: 0 10px !important;
  }
}

/* ─── Tablet tweaks (641px – 900px) ─────────────────────────── */

@media (min-width: 641px) and (max-width: 900px) {
  [data-main] {
    padding: 24px 24px 80px !important;
  }
  [data-subject-hdr] {
    padding: 20px 24px 52px !important;
  }
  [data-subject-body] {
    padding: 0 24px !important;
  }
}