/* ============================================================================
   STUDY-CORE SKIN — stationery theme for high-school users. Safe to delete;
   loaded after build.css from full_width_base.html.

   The world of the audience: exam pads, grid paper, highlighters, red-pen
   ticks, stickers on a pencil case. Components are "stickers": 2px ink
   outline + hard offset shadow, pressed flat when clicked. Accents are
   highlighter yellow / marker coral / mint against the brand petrol + ink.
   ========================================================================== */

:root {
  --ink: #182040;
  --paper: #fbf8f1;
  --petrol: #207090;
  --hl-yellow: #ffd84d;
  --hl-coral: #ff7a59;
  --hl-mint: #3ecf9a;
  --hl-sky: #b0e0f0;
}

/* ---- Exam-pad backdrop: warm paper + faint grid ruling ------------------- */

body.bg-sand-light {
  background-color: var(--paper) !important;
  background-image:
    linear-gradient(rgba(32, 112, 144, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32, 112, 144, 0.055) 1px, transparent 1px);
  background-size: 34px 34px;
}

/* Let the ruling show through the big opaque section fills. */
section[class*="f8fcfe"],
section.bg-white,
section.bg-sand-light,
div.bg-sand-light\/60 {
  background-color: transparent !important;
}

/* Hero keeps a soft sky glow at the very top so the page opens with light. */
section[class*="f8fcfe"] > div[class*="linear-gradient"] {
  background: linear-gradient(180deg, rgba(176, 224, 240, 0.4), rgba(251, 248, 241, 0) 46%) !important;
}

/* ---- Nav: clean paper bar with an ink rule ------------------------------- */

nav.sticky {
  background: rgba(251, 248, 241, 0.92) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 2px solid var(--ink) !important;
  box-shadow: none !important;
}

/* ---- Sticker buttons ------------------------------------------------------ */

.btn-primary,
a[class*="bg-\\["][class*="207090"] {
  background: var(--petrol) !important;
  border: 2px solid var(--ink) !important;
  box-shadow: 4px 4px 0 var(--ink) !important;
  border-radius: 0.9rem !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.btn-primary:hover,
a[class*="bg-\\["][class*="207090"]:hover {
  background: #1b6380 !important;
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 var(--ink) !important;
}

.btn-primary:active,
a[class*="bg-\\["][class*="207090"]:active {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--ink) !important;
}

.btn-outline,
.btn-ghost,
a[class*="cde7f0"] {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  box-shadow: 4px 4px 0 rgba(24, 32, 64, 0.18) !important;
  border-radius: 0.9rem !important;
  transition: transform 0.12s ease, box-shadow 0.12s ease !important;
}

.btn-outline:hover,
.btn-ghost:hover,
a[class*="cde7f0"]:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 rgba(24, 32, 64, 0.22) !important;
}

/* ---- Sticker cards -------------------------------------------------------- */

.card,
.price-card,
.reveal-stagger > *,
div[class*="cfe3e4"],
div.rounded-xl.border.shadow-soft {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 1.1rem !important;
  box-shadow: 6px 6px 0 rgba(24, 32, 64, 0.14) !important;
}

/* Hover lift — never while the scroll-reveal transition is still running
   (.reveal owns opacity/transform until home-hero.js sheds it). */
.card:not(.reveal),
.price-card:not(.reveal),
.reveal-stagger > *:not(.reveal) {
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:not(.reveal):hover,
.price-card:not(.reveal):hover,
.reveal-stagger > *:not(.reveal):hover {
  transform: translate(-2px, -2px) rotate(-0.3deg);
  box-shadow: 9px 9px 0 rgba(24, 32, 64, 0.16) !important;
}

/* Homepage feature tiles: sticky-note tilt + highlighter icon chips. */
.reveal-stagger > *:nth-child(odd):not(.reveal) { transform: rotate(-0.6deg); }
.reveal-stagger > *:nth-child(even):not(.reveal) { transform: rotate(0.5deg); }
.reveal-stagger > *:nth-child(odd):not(.reveal):hover,
.reveal-stagger > *:nth-child(even):not(.reveal):hover {
  transform: translate(-2px, -2px) rotate(0deg);
}

.reveal-stagger > * > div:first-child {
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  border-radius: 0.8rem !important;
  transform: rotate(-4deg);
}

.reveal-stagger > *:nth-child(1) > div:first-child {
  background: var(--hl-yellow) !important;
  color: var(--ink) !important;
}

.reveal-stagger > *:nth-child(2) > div:first-child {
  background: var(--hl-coral) !important;
  color: #fff !important;
}

.reveal-stagger > *:nth-child(3) > div:first-child {
  background: var(--hl-mint) !important;
  color: var(--ink) !important;
}

/* ---- Sticker chips / eyebrows -------------------------------------------- */

.chip,
.eyebrow,
span[class*="tracking-widest"] {
  display: inline-flex;
  align-items: center;
  background: var(--hl-yellow) !important;
  border: 2px solid var(--ink) !important;
  border-radius: 999px !important;
  color: var(--ink) !important;
  box-shadow: 2px 2px 0 var(--ink);
  font-weight: 700 !important;
  /* Uniform pill padding — some eyebrows (e.g. the CTA's) have none of
     their own, which left the text touching the yellow edge. */
  padding: 0.35rem 0.9rem !important;
}

/* ---- File browser ("folder navigator"): exam-pad index -------------------- */

div.rounded-xl.border.shadow-soft > div:first-child {
  background: var(--hl-sky) !important;
  border-bottom: 2px solid var(--ink) !important;
  color: var(--ink) !important;
  font-weight: 700;
}

div.rounded-xl.border.shadow-soft .fa-folder {
  color: var(--petrol) !important;
}

/* ---- Inputs ---------------------------------------------------------------- */

.input,
form[action*="search"] > div.flex {
  background: #fff !important;
  border: 2px solid var(--ink) !important;
  border-radius: 0.8rem !important;
  box-shadow: 2px 2px 0 rgba(24, 32, 64, 0.15) !important;
}

/* ---- Memo answers page ----------------------------------------------------- */

.memo-toolbar {
  background: rgba(251, 248, 241, 0.95) !important;
  border-bottom: 2px solid var(--ink) !important;
}

.memo-sheet {
  border: 2px solid var(--ink) !important;
  box-shadow: 8px 8px 0 rgba(24, 32, 64, 0.12) !important;
}

.memo-chat {
  border: 2px solid var(--ink) !important;
  box-shadow: 6px 6px 0 rgba(32, 112, 144, 0.25) !important;
}

.memo-chat-message.user {
  background: var(--petrol);
}

.memo-chat-message.assistant {
  border: 1.5px solid rgba(24, 32, 64, 0.25);
}

.memo-selection-explain {
  background: var(--ink);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 rgba(255, 216, 77, 0.9);
}

.memo-selection-explain:hover {
  background: var(--petrol);
}

.memo-selection-explain .fa-wand-magic-sparkles {
  color: var(--hl-yellow);
}