/*
Theme Name: AppleBear Learn
Theme URI: https://wordpress-fp9w.srv1806462.hstgr.cloud
Author: AppleBear
Description: Minimal Korean-first design language for Applebear Learn. Child of Twenty Twenty-Five, mirrors the AppleBear Journal token system: Pretendard Variable, neutral editorial palette, hairline dividers, translucent sticky header.
Version: 1.0.0
Requires at least: 6.6
Requires PHP: 8.1
Template: twentytwentyfive
Text Domain: applebear-learn
*/

:root {
  --al-ink: #171717;
  --al-body: #4d4d4d;
  --al-mute: #737373;
  --al-hairline: #e5e5e5;
  --al-canvas: #fafafa;
  --al-surface: #ffffff;
  --al-accent: #0761d1;
  --al-focus: #0059c7;
  --al-header: rgb(250 250 250 / .86);
  --al-max: 1320px;
  --al-reading: 720px;
  --al-radius: 6px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--al-canvas); color: var(--al-ink); }
body, button, input, textarea, select { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-optical-sizing: auto; overflow-wrap: break-word; text-wrap: balance; word-break: keep-all; }
p, li, label { overflow-wrap: anywhere; word-break: keep-all; }
img { height: auto; max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--al-accent); }
:focus-visible { outline: 3px solid var(--al-accent); outline-offset: 3px; }

/* Shell container — mirrors ab-shell from the blog */
.al-shell { margin-inline: auto; max-width: var(--al-max); padding-inline: clamp(20px, 4vw, 56px); }

/* Sticky translucent header — mirrors the blog header aesthetic */
.al-header { align-items: center; backdrop-filter: blur(20px) saturate(160%); background: var(--al-header); border-bottom: 1px solid var(--al-hairline); display: flex; min-height: 68px; position: sticky; top: 0; z-index: 20; }
.al-header__inner { align-items: center; display: flex; gap: 16px; justify-content: space-between; min-width: 0; width: 100%; }
.al-header__inner > * { margin-block-start: 0; }
.al-header .wp-block-site-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; margin: 0; white-space: nowrap; }
.al-header .wp-block-site-title a { align-items: center; display: inline-flex; gap: 8px; min-height: 44px; text-decoration: none; }
.al-header .wp-block-navigation { gap: 4px; }
.al-header .wp-block-navigation-item__content { font-size: .875rem; min-height: 44px; }
.al-header .wp-block-navigation-item__content a { text-decoration: none; }

/* Main content area */
.al-main { padding-block: clamp(40px, 7vw, 88px); }

/* Forms — inputs styled to match the token system.
   UM uses .um-form scope (0,1,1 specificity); match it + load after UM stylesheet. */
.um-form input[type="text"],
.um-form input[type="email"],
.um-form input[type="password"],
.um-form input[type="url"],
.um-form input[type="tel"],
.um-form input[type="number"],
.um-form input[type="search"],
.um-form textarea,
.um input[type="text"],
.um input[type="email"],
.um input[type="password"],
.um input[type="url"],
.um input[type="tel"],
.um input[type="number"],
.um input[type="search"],
.um textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea { background: var(--al-surface) !important; border: 1px solid var(--al-hairline) !important; border-radius: var(--al-radius) !important; color: var(--al-ink) !important; font-size: 1rem !important; padding: 12px 14px !important; width: 100% !important; box-sizing: border-box !important; }

/* UM field focus — use accent ring */
.um-form input:focus,
.um-form textarea:focus,
.um input:focus,
.um textarea:focus { border-color: var(--al-accent) !important; outline: 2px solid var(--al-accent) !important; outline-offset: 0 !important; }

/* Buttons — pill style matching the blog.
   UM submit is .um-form input[type=submit]; match that specificity. */
.um-form input[type="submit"],
.um-form button[type="submit"],
.um input[type="submit"],
.um button[type="submit"],
.wp-element-button,
.wp-block-button__link,
input[type="submit"],
button { background: var(--al-ink) !important; border: 0 !important; border-radius: 100px !important; color: var(--al-canvas) !important; cursor: pointer !important; font-size: .875rem !important; font-weight: 500 !important; min-height: 44px !important; padding: 10px 18px !important; }
.wp-element-button:hover,
.wp-block-button__link:hover,
.um-form input[type="submit"]:hover,
.um input[type="submit"]:hover,
input[type="submit"]:hover { background: #000 !important; color: var(--al-canvas) !important; }

/* UM form wrapper — constrain width + center, matching the blog utility page */
.um-form { margin-inline: auto; max-width: var(--al-reading); }
.um-form h1, .um-form h2, .um .um-form-title { font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.025em; margin: 0 0 24px; }

/* UM field labels — neutral mute color */
.um-form .um-field-label { color: var(--al-mute); font-size: .875rem; font-weight: 500; }

/* Utility pages (UM login/register) centered */
.al-utility { min-height: 60dvh; padding-block: clamp(72px, 12vw, 144px); }
.al-utility h1 { font-size: clamp(2rem, 5vw, 3rem); letter-spacing: -.035em; margin: 0 0 24px; max-width: 14ch; }

@media (prefers-reduced-motion: no-preference) {
  a, button, input[type="submit"] { transition: color .2s ease, background-color .2s ease, transform 100ms ease-out; }
  button:active, input[type="submit"]:active, .wp-element-button:active { transform: scale(.97); }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

@media (prefers-color-scheme: dark) {
  :root { --al-ink: #f2f2f2; --al-body: #c7c7c7; --al-mute: #a3a3a3; --al-hairline: #303030; --al-canvas: #111111; --al-surface: #1a1a1a; --al-accent: #5aa7ff; --al-focus: #8cc2ff; --al-header: rgb(17 17 17 / .86); }
  .wp-element-button, .wp-block-button__link, input[type="submit"], button { background: var(--al-ink); color: var(--al-canvas); }
}

@media (prefers-reduced-transparency: reduce) {
  .al-header { backdrop-filter: none; background: var(--al-canvas); }
}

@media (prefers-contrast: more) {
  .al-header { backdrop-filter: none; background: var(--al-canvas); border-bottom-color: var(--al-ink); }
  input[type="text"], input[type="email"], input[type="password"], input[type="url"], textarea { border-color: var(--al-ink); }
}

@media (max-width: 767px) {
  .al-shell { padding-inline: 20px; }
  .al-header { backdrop-filter: none; background: var(--al-canvas); }
}