/* ACP (Adobe Certified Professional) Photoshop Exam Prep section.
   Loaded after styles.css; adds a distinct indigo accent so this section
   reads as its own reference area, reachable from any grade.
   Colors chosen for clearly separated contrast, not just a tint of white:
   every callout box gets its own solid border + a saturated left-accent,
   never relies on background-tint alone to read as distinct from a card. */
:root{
	--acp-accent:#3730a3;       /* darker indigo for text/headings -- stronger against white */
	--acp-accent-bright:#4f46e5; /* brighter indigo for badges/borders/gradients */
	--acp-accent-dark:#1e1650;   /* near-black indigo for the header's dark end */
	--acp-light:#dfe0fa;         /* clearly-tinted lavender, not a near-white tint */
	--acp-border:#b7b3ec;
}

.acp-header{background:linear-gradient(160deg, var(--acp-accent-bright), var(--acp-accent-dark))}
.acp-main{padding:28px 24px 56px; max-width:var(--max-width); margin:0 auto}
.acp-footer{padding:20px; background:var(--acp-accent-dark); color:#fff; text-align:center; font-size:14px}
.acp-footer a{color:#c7c2ff}

.acp-header nav a.current{background:rgba(255,255,255,.35); font-weight:800}

.acp-format-card{background:var(--acp-light); border:1px solid var(--acp-border); border-left:6px solid var(--acp-accent-bright); color:var(--ink)}
.acp-format-card h2{color:var(--acp-accent)}

.acp-domain-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; margin:16px 0}
.acp-domain-card{
	display:block; background:var(--surface); border:2px solid var(--acp-border); border-top:6px solid var(--acp-accent-bright);
	border-radius:var(--radius); padding:20px; text-decoration:none; color:var(--ink);
	box-shadow:var(--shadow-sm); transition:transform .12s ease, box-shadow .12s ease;
}
.acp-domain-card:hover, .acp-domain-card:focus-visible{transform:translateY(-3px); box-shadow:var(--shadow); border-color:var(--acp-accent-bright)}
.acp-domain-card h2{color:var(--acp-accent); font-size:17px; margin:10px 0 0}
.acp-domain-card p{margin:6px 0 0; font-size:14px; color:var(--ink)}
.acp-domain-meta{font-weight:800; font-size:13px !important; color:var(--acp-accent-bright) !important; margin-top:10px !important}

/* Icons -- small inline badges next to headings, and bigger "hero" icons on
   domain cards/intros. Stroke color inherited via currentColor so light and
   dark mode both just work. */
.acp-icon{
	width:30px; height:30px; stroke:var(--acp-accent-bright); stroke-width:2.6; fill:none;
	stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; margin-right:8px; flex-shrink:0;
}
.acp-hero-icon{
	width:56px; height:56px; stroke:var(--acp-accent-bright); stroke-width:2.2; fill:none;
	stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;
}
.acp-domain-intro{display:flex; gap:18px; align-items:flex-start}
.acp-domain-intro p{margin:0}

.acp-objective{border:1px solid var(--border); border-left:6px solid var(--acp-accent-bright)}
.acp-objective h2{font-size:17px; color:var(--acp-accent); display:flex; align-items:center; flex-wrap:wrap; gap:2px}
.acp-objective .code{
	display:inline-block; background:var(--acp-accent-bright); color:#fff; font-size:12px; font-weight:700;
	padding:3px 10px; border-radius:999px; margin-right:8px; white-space:nowrap; vertical-align:middle;
}
.acp-objective .vocab-list dt{color:var(--acp-accent)}
.acp-objective .vocab-list dd{color:var(--ink)}
.acp-types{background:var(--acp-light); border:1px solid var(--acp-border); border-radius:var(--radius-sm); padding:12px 16px; margin:12px 0}
.acp-types-label{margin:0 0 4px !important; font-weight:800; font-size:13px; text-transform:uppercase; letter-spacing:.03em; color:var(--acp-accent)}
.acp-types .vocab-list{margin-top:6px}
.acp-types .vocab-list dt{color:var(--acp-accent)}
.acp-types .vocab-list dd{color:var(--ink)}
.acp-practice{background:var(--acp-light); border:1px solid var(--acp-border); border-left:4px solid var(--acp-accent-bright); color:var(--ink); padding:10px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-top:12px}
.acp-update{background:#fff1e6; border:1px solid #e8b085; border-left:4px solid #b8481a; color:#5c2a0d; padding:10px 14px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; margin-top:10px; font-size:14px}

/* A real question, reworded from an actual past practice exam. Deliberately
   styled to look "official" (a dark banner, monospace-ish label) so it
   reads as distinct from the site's own written explanations. */
.acp-real-exam{background:#0f2233; color:#dfe7ee; border-radius:var(--radius-sm); padding:12px 16px; margin-top:12px}
.acp-real-exam-label{margin:0 0 6px !important; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; color:#8fb8dd; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.acp-real-exam-type{background:#1d3a52; color:#bcdcf7; font-size:10px; font-weight:700; padding:2px 8px; border-radius:999px; text-transform:none; letter-spacing:0}
.acp-real-exam-q{margin:0 !important; font-size:14.5px; line-height:1.5}
.acp-real-exam details{margin-top:8px}
.acp-real-exam summary{cursor:pointer; font-size:13px; font-weight:700; color:#7cc0f5}
.acp-real-exam-a{margin:8px 0 0 !important; font-size:14px; color:#c9f3ee; border-top:1px dashed #29455e; padding-top:8px}

/* "Try It" activities -- one paper/analog (Grade 9-10), one Photoshop
   (Grade 11-12), side by side so the grade split is visually obvious. */
.acp-try-it{font-size:15px; color:var(--acp-accent); margin:16px 0 8px; text-transform:uppercase; letter-spacing:.03em}
.acp-activities{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:700px){.acp-activities{grid-template-columns:1fr}}
.acp-activity{border-radius:var(--radius-sm); padding:14px 16px; border:1px solid}
.acp-activity h3{
	margin:0 0 8px; font-size:13px; text-transform:uppercase; letter-spacing:.03em; font-weight:800;
	display:flex; align-items:center; gap:6px;
}
.acp-activity h3 .acp-icon{width:20px; height:20px; margin-right:0}
.acp-activity-title{font-weight:700; font-size:15px; margin:0 0 8px}
.acp-activity-materials{font-size:13px; margin:0 0 8px}
.acp-activity-steps{padding-left:20px; margin:0 0 10px}
.acp-activity-steps li{margin:6px 0; font-size:14px}
.acp-activity-reflection{font-size:13.5px; font-style:italic; margin:0; padding-top:8px; border-top:1px dashed rgba(0,0,0,.15)}

.acp-activity-analog{background:#eafaf1; border-color:#1f9d63}
.acp-activity-analog h3{color:#0f6b42}
.acp-activity-analog .acp-icon{stroke:#1f9d63}

.acp-activity-digital{background:var(--acp-light); border-color:var(--acp-border)}
.acp-activity-digital h3{color:var(--acp-accent)}
.acp-activity-digital .acp-icon{stroke:var(--acp-accent-bright)}

/* Labeled diagrams -- the real visual aids, not just decorative icons. */
.acp-diagram{
	margin:14px 0; padding:14px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm);
	text-align:center;
}
.acp-diagram-svg{width:100%; max-width:340px; height:auto; color:var(--ink)}
.acp-diagram figcaption{margin-top:8px; font-size:13px; font-weight:700; color:var(--acp-accent)}

/* ---------- Dark mode (opt-in, NOT automatic) ---------- */
/* Light stays the default for every visitor regardless of
   OS/browser preference -- these rules only apply under an
   explicit data-theme="dark" on <html>, which nothing currently
   sets. Kept for a future manual toggle instead of deleted. */
:root[data-theme="dark"]{
	--acp-accent:#c4b8ff; --acp-accent-bright:#9d8cff; --acp-accent-dark:#120c30;
	--acp-light:#241c52; --acp-border:#453a8f;
}
/* .acp-header's gradient uses --acp-accent-bright, which in dark mode
   becomes a light purple (correct for badges/borders on a dark
   surface, wrong for a header background) -- white header text had
   only ~2.75:1 contrast near that end. Hardcode a dark-safe gradient
   instead, same fix pattern as styles.css's .site-header. */
[data-theme="dark"] .acp-header{background:linear-gradient(160deg, #2e2470, #0f0b28)}
[data-theme="dark"] .acp-domain-card p{color:var(--ink)}
[data-theme="dark"] .acp-objective .code{color:#0c0824}
[data-theme="dark"] .acp-update{background:#3a1d0a; border-color:#8a5330; color:#ffd9b8}
[data-theme="dark"] .acp-activity-reflection{border-color:rgba(255,255,255,.15)}
[data-theme="dark"] .acp-activity-analog{background:#0e2f22; color:#bdf5d8; border-color:#2bb583}
[data-theme="dark"] .acp-activity-analog h3{color:#5be3a8}
[data-theme="dark"] .acp-activity-analog .acp-icon{stroke:#5be3a8}
[data-theme="dark"] .acp-activity-digital .acp-icon{stroke:var(--acp-accent-bright)}