/*
Theme Name: DongChannel
Theme URI: https://dongchannel.com/
Author: DongChannel
Description: Lightweight block theme for DongChannel — an independent publisher reviewing and comparing digital tools for online business. Built for speed, structured affiliate content, and technical SEO. Presentation only; all product and affiliate data lives in the dc-core plugin.
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.2.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dongchannel
Tags: blog, news, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style, featured-images, translation-ready
*/

/*
 * Design tokens, layout and element styles live in theme.json so the owner can
 * change them from Appearance > Editor > Styles without touching code.
 * Only rules theme.json cannot express belong in this file.
 */

/* ---------------------------------------------------------------
   Accessibility (PRD 11.7)
   --------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-radius: 2px;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--ground);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	padding: 0.75rem 1.25rem;
	z-index: 100000;
}

/* ---------------------------------------------------------------
   Header
   --------------------------------------------------------------- */

/*
 * A sticky bar needs to sit *above* the page, not merely in front of it. A
 * hairline says "edge of a box"; a soft shadow says "this floats". That one
 * difference does more for how alive the header feels than any colour change.
 */
.dc-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--wp--preset--color--ground);
	box-shadow: 0 4px 6px -1px rgba(22, 32, 58, 0.08), 0 2px 4px -2px rgba(22, 32, 58, 0.06);
}

/* A 3px band of the brand's two colours. The only gradient on the site, and
   it earns its place by giving the header a defined top edge when the page
   scrolls under it. */
.dc-header-rule {
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--dc-type-workflow) 0%,
		var(--wp--preset--color--brand) 35%,
		var(--dc-cta) 100%
	);
}

/* The shadow already draws the edge, so the bar needs no border of its own. */
.dc-header-bar {
	border-bottom: none;
}

.dc-wordmark a {
	transition: color 0.15s ease;
}

.dc-wordmark a:hover,
.dc-wordmark a:focus-visible {
	color: var(--dc-cta);
}

/* About and Contact live in the footer on desktop; they only join the menu
   when it collapses, where there is room for the full map. */
@media (min-width: 901px) {
	.dc-nav-overflow {
		display: none;
	}
}

/* Brand lockup: drawer trigger, logo, wordmark. */
.dc-brand {
	gap: 0.75rem !important;
}

.dc-wordmark a,
.dc-wordmark {
	font-family: var(--wp--preset--font-family--sans) !important;
	font-weight: 800 !important;
	font-size: 1.15rem !important;
	letter-spacing: 0.02em !important;
	text-transform: uppercase;
	white-space: nowrap;
}

/*
 * The mark is a gold D behind a lotus on an opaque gold ground, and at header
 * size the D really does disappear into its own background — that part of the
 * original note was right. What it got wrong was the conclusion.
 *
 * Left out, the header had a 151px wordmark floating in 1180px of nothing, and
 * the owner's word for it was "trống trải". The fix is to stop asking the mark
 * to be read as a letter. Rounded and bordered at 40px it works the way an app
 * icon works: nobody parses the glyph, they recognise the shape and the colour.
 * The wordmark beside it carries the name, so the mark never has to.
 *
 * Same treatment as the footer seal, half the size.
 */
.dc-mark img,
.dc-footer-mark img {
	display: block;
	border-radius: 10px;
	border: 1px solid rgba(252, 251, 249, 0.16);
}

.dc-mark img {
	border-radius: 9px;
	border-color: rgba(20, 25, 40, 0.12);
	box-shadow: 0 1px 3px rgba(20, 25, 40, 0.12);
}

/* Brand and navigation belong to each other. Left as three separate children
   of a space-between row, the wordmark and the menu were pushed nearly 200px
   apart and the gap read as an omission rather than as breathing room. */
.dc-header-left {
	gap: 2rem !important;
	min-width: 0;
}

.dc-brand-text {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

/* Says what the site is to someone who has never seen it before, in the words
   the About page already uses. Hidden on narrow screens, where the wordmark
   alone has to do. */
.dc-tagline {
	margin: 0 !important;
	font-size: 0.68rem;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
	white-space: nowrap;
}

@media (max-width: 1100px) {
	.dc-tagline {
		display: none;
	}
}

/* A hairline between the brand lockup and the menu, so the two read as
   separate jobs rather than one long run of links.
 *
 * The child combinator is load-bearing. The navigation block copies its own
 * classes onto the <ul> inside the responsive container, so `.dc-header-left
 * .dc-nav` matched three elements and painted three rules: two stacked beside
 * the wordmark, which read as "||", and a third before the overflow items. */
@media (min-width: 901px) {
	.dc-header-left > .dc-nav {
		padding-left: 2rem;
		border-left: 1px solid var(--wp--preset--color--rule);
	}
}

/* "Start Here" is the entry point for a first-time reader, so it carries more
   weight than its siblings without becoming a button. */
.dc-nav .dc-nav-start > a {
	color: var(--wp--preset--color--ink);
	font-weight: 700;
}

.dc-nav .wp-block-navigation-item__label {
	font-weight: 600;
}

/*
 * Each top-level item grows an underline from the centre on hover, and keeps
 * it while you are inside that section. The second half is the part that
 * matters: on a single review nothing in a stock WordPress menu lights up, so
 * a reader three clicks deep has no idea where they are.
 */
.dc-nav > ul > li > a {
	position: relative;
	padding-block: 0.35rem;
	transition: color 0.15s ease;
}

.dc-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	right: 50%;
	bottom: -0.1rem;
	height: 2px;
	border-radius: 2px;
	background: var(--dc-cta);
	transition: left 0.18s ease, right 0.18s ease;
}

.dc-nav > ul > li > a:hover::after,
.dc-nav > ul > li > a:focus-visible::after {
	left: 0;
	right: 0;
}

/*
 * Two selectors because the marker lands in two places. On a plain menu item
 * it lands on that item; on an item with a dropdown it lands on the matching
 * child inside the dropdown instead, so the parent is matched through :has().
 * Either way the top-level item is what lights up, which is the one a reader
 * is looking for.
 */
.dc-nav > ul > li.dc-nav-current > a,
.dc-nav > ul > li:has(.dc-nav-current) > a {
	color: var(--wp--preset--color--ink);
}

.dc-nav > ul > li.dc-nav-current > a::after,
.dc-nav > ul > li:has(.dc-nav-current) > a::after {
	left: 0;
	right: 0;
}

/* Inside a dropdown the marker is a weight change, not a second underline. */
.dc-nav .wp-block-navigation__submenu-container .dc-nav-current > a {
	color: var(--dc-cta);
	font-weight: 700;
}

.dc-nav .wp-block-navigation__submenu-container {
	border-color: var(--wp--preset--color--rule);
	border-radius: 6px;
	box-shadow: var(--dc-lift);
	padding-block: 0.35rem;
	min-width: 14rem;
}

.dc-nav .wp-block-navigation__submenu-container a:hover {
	color: var(--dc-cta);
}

/* Search collapses to an icon and expands on click, so the bar keeps its
   space for navigation. */
.dc-header-tools .dc-search .wp-block-search__button {
	background: transparent;
	border: none;
	color: var(--wp--preset--color--ink);
	padding: 0.3rem;
}

.dc-header-tools .dc-search .wp-block-search__button:hover,
.dc-header-tools .dc-search .wp-block-search__button:focus-visible {
	background: transparent;
	color: var(--dc-cta);
	box-shadow: none;
	transform: none;
}

.dc-header-tools .dc-search .wp-block-search__input {
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 100px;
	background: var(--wp--preset--color--ground);
	padding: 0.4rem 0.9rem;
}

/* The one button on the site that is allowed to shout. */
.dc-subscribe .wp-block-button__link {
	background: var(--dc-cta);
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 800;
	font-size: 0.75rem;
	padding: 0.6rem 1.2rem;
	border-radius: 5px;
}

.dc-subscribe .wp-block-button__link:hover,
.dc-subscribe .wp-block-button__link:focus-visible {
	background: var(--dc-cta-strong);
	box-shadow: 0 6px 16px rgba(204, 85, 0, 0.3);
}

@media (max-width: 900px) {
	.dc-wordmark a,
	.dc-wordmark {
		font-size: 1rem !important;
	}

	.dc-subscribe {
		display: none;
	}
}

/* ---------------------------------------------------------------
   Footer
   --------------------------------------------------------------- */

.dc-footer-list {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
}

.dc-footer-list a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.dc-footer-list a:hover,
.dc-footer-list a:focus-visible {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/* ---------------------------------------------------------------
   Wide content
   --------------------------------------------------------------- */

/*
 * Comparison tables scroll inside their own container rather than forcing the
 * page body sideways. PRD 11.2 requires readability to survive small screens,
 * and 11.7 requires the scroll region to be reachable by keyboard — hence the
 * tabindex applied to this wrapper by dc-core.
 */
.dc-table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.dc-table-scroll:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 4px;
}

.dc-table-scroll > table {
	min-width: 40rem;
}

.wp-block-table td,
.wp-block-table th {
	border-color: var(--wp--preset--color--rule);
}

.wp-block-table thead th {
	background: var(--wp--preset--color--surface);
	font-size: var(--wp--preset--font-size--small);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-faint);
}

/* Figures line up when digits are in columns. */
.wp-block-table td {
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------
   Semantic colour
   ---------------------------------------------------------------
   These are system colours, not editorial choices, so they live here
   rather than in the theme.json palette — putting them in the picker
   would invite them being used decoratively, which is the one thing
   that would break the scheme.

   Each content type owns a hue. Colour that carries meaning is the
   kind a reader learns without being told; colour sprinkled for
   variety is the kind that makes a page look busy.
   --------------------------------------------------------------- */

:root {
	--dc-type-review: #1B3A6B;
	--dc-type-best: #A85C16;
	--dc-type-compare: #125C66;
	--dc-type-guide: #3F6B33;
	--dc-type-workflow: #6A4076;
	--dc-type-deal: #A33B2E;

	/* Copper is too dark to read on the ink hero; this is its counterpart. */
	--dc-accent-on-dark: #E0913F;

	/*
	 * Conversion orange, brighter than the editorial copper.
	 * Copper is right for rating numbers and section rules, where the job is
	 * to look considered. A subscribe or affiliate button has the opposite
	 * job, so it gets the louder end of the same hue rather than a new colour.
	 */
	/*
	 * Measured, not guessed. White on the reference site's #FF6B00 scores
	 * 2.86:1 and white on our previous #CC5500 scored 4.31:1 — both below the
	 * 4.5:1 WCAG AA needs for button text. This is the brightest orange that
	 * clears it, at 5.18:1. Liveliness comes from depth and motion instead of
	 * pushing saturation past the point a reader can still read the label.
	 */
	--dc-cta: #C2410C;
	--dc-cta-strong: #9A340A;

	--dc-lift: 0 1px 2px rgba(22, 32, 58, 0.06), 0 10px 26px rgba(22, 32, 58, 0.07);
}

/* ---------------------------------------------------------------
   Hero — the one deliberately loud surface on the site
   --------------------------------------------------------------- */

.dc-hero {
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ground);
	position: relative;
	overflow: hidden;
}

/* A single soft copper wash, off-centre. Enough to stop the panel
   reading as a flat rectangle, quiet enough not to become a gradient. */
.dc-hero::before {
	content: "";
	position: absolute;
	inset: -40% -10% auto auto;
	width: 46rem;
	height: 46rem;
	background: radial-gradient(circle, rgba(224, 145, 63, 0.16), transparent 62%);
	pointer-events: none;
}

.dc-hero > * {
	position: relative;
}

.dc-hero :where(h1, h2, p) {
	color: var(--wp--preset--color--ground);
}

.dc-hero .dc-eyebrow {
	color: var(--dc-accent-on-dark);
}

.dc-hero .dc-trust-strip {
	color: rgba(252, 251, 249, 0.62);
}

.dc-hero .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(252, 251, 249, 0.35);
	color: var(--wp--preset--color--ground);
	background: transparent;
}

.dc-hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.dc-hero .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	border-color: var(--dc-accent-on-dark);
	color: var(--dc-accent-on-dark);
}

/* ---------------------------------------------------------------
   Section rhythm
   ---------------------------------------------------------------
   Alternating bands give a long homepage a pulse. Without them every
   section runs into the next and the page reads as one grey column.
   --------------------------------------------------------------- */

.dc-band-tint {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--wp--preset--color--rule);
}

/* ---------------------------------------------------------------
   Editorial furniture
   --------------------------------------------------------------- */

/* Small uppercase labels: eyebrows above a headline, kickers on a card. */
.dc-eyebrow,
.dc-kicker {
	text-transform: uppercase;
	letter-spacing: 0.11em;
	font-weight: 700;
	margin-bottom: 0;
}

/* A kicker is a filled chip rather than coloured text: it reads as a label at
   a glance, and it is where each content type shows its hue. */
.dc-kicker {
	display: inline-block;
	align-self: flex-start;
	font-size: 0.66rem;
	padding: 0.22rem 0.6rem;
	border-radius: 3px;
	background: var(--wp--preset--color--accent-soft);
	color: var(--dc-type-best);
}

.dc-kicker--review {
	background: var(--wp--preset--color--brand-soft);
	color: var(--dc-type-review);
}

.dc-kicker--compare {
	background: #E2F0F1;
	color: var(--dc-type-compare);
}

.dc-kicker--guide {
	background: #E8F1E3;
	color: var(--dc-type-guide);
}

.dc-kicker--workflow {
	background: #EFE7F2;
	color: var(--dc-type-workflow);
}

/* Section headings sit on a rule, the way a print section head does, with a
   short accent stub so the eye finds the start of each block. */
.dc-section-title {
	border-bottom: 1px solid var(--wp--preset--color--rule);
	padding-bottom: 0.6rem;
	position: relative;
}

.dc-section-title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 3.5rem;
	height: 3px;
	background: var(--wp--preset--color--accent);
	border-radius: 2px;
}

.dc-trust-strip {
	margin-bottom: 0;
}

.dc-byline {
	padding-block: 0.7rem;
	row-gap: 0.3rem;
}

/* Cards carry a coloured top edge for their content type, and lift on hover so
   the whole card reads as the target rather than just the title link. */
.dc-card {
	height: 100%;
	background: var(--wp--preset--color--ground) !important;
	border-top: 3px solid var(--dc-type-best) !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.dc-card--review {
	border-top-color: var(--dc-type-review) !important;
}

.dc-card--compare {
	border-top-color: var(--dc-type-compare) !important;
}

.dc-card:hover,
.dc-card:focus-within {
	transform: translateY(-2px);
	box-shadow: var(--dc-lift);
}

.dc-card .wp-block-post-title {
	margin: 0;
}

.dc-card .wp-block-post-title a {
	text-decoration: none;
}

.dc-card .wp-block-post-title a:hover,
.dc-card .wp-block-post-title a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Category tiles: one per niche, each carrying its own hue on the left edge so
   the row reads as six distinct places rather than six grey boxes. */
.dc-cat-grid ul,
ul.dc-cat-grid {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: grid;
	gap: 0.7rem;
	grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
}

.dc-cat-grid li a {
	display: block;
	border: 1px solid var(--wp--preset--color--rule);
	border-left: 4px solid var(--dc-type-review);
	border-radius: 5px;
	background: var(--wp--preset--color--ground);
	padding: 0.85rem 1rem;
	text-decoration: none;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.dc-cat-grid li:nth-child(6n + 2) a { border-left-color: var(--dc-type-best); }
.dc-cat-grid li:nth-child(6n + 3) a { border-left-color: var(--dc-type-compare); }
.dc-cat-grid li:nth-child(6n + 4) a { border-left-color: var(--dc-type-guide); }
.dc-cat-grid li:nth-child(6n + 5) a { border-left-color: var(--dc-type-workflow); }
.dc-cat-grid li:nth-child(6n + 6) a { border-left-color: var(--dc-type-deal); }

.dc-cat-grid li a:hover,
.dc-cat-grid li a:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--dc-lift);
	color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
   Footer — dark, to bookend the hero and close the page
   --------------------------------------------------------------- */

.dc-footer {
	background: var(--wp--preset--color--ink) !important;
	color: rgba(252, 251, 249, 0.72);
	border-top: none !important;
}

.dc-footer :where(h6) {
	color: var(--dc-accent-on-dark);
}

.dc-footer :where(p) {
	color: rgba(252, 251, 249, 0.62);
}

.dc-footer .wp-block-site-title a {
	color: var(--wp--preset--color--ground);
}

.dc-footer .dc-footer-list a {
	color: rgba(252, 251, 249, 0.78);
}

.dc-footer .dc-footer-list a:hover,
.dc-footer .dc-footer-list a:focus-visible {
	color: var(--dc-accent-on-dark);
}

.dc-footer .wp-block-separator {
	border-color: rgba(252, 251, 249, 0.14);
	color: rgba(252, 251, 249, 0.14);
}

/* ---------------------------------------------------------------
   Buttons
   --------------------------------------------------------------- */

.wp-block-button__link {
	transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(168, 92, 22, 0.28);
}

/* ---------------------------------------------------------------
   Reading comfort
   --------------------------------------------------------------- */

.wp-block-post-content p,
.wp-block-post-content li {
	max-width: 68ch;
}

.wp-block-post-content > * + * {
	margin-top: var(--wp--preset--spacing--40);
}