/*
Theme Name: News Theme Child
Theme URI: https://autopulsehq.co.uk/
Description: Child theme for AutoPulse HQ. Overrides the header off-canvas panel so the mobile menu shows one clean navigation list instead of repeating the same categories three times.
Author: AutoPulse
Template: news-theme
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.en.html
Text Domain: news-theme-child
*/

/* Parent theme styles are enqueued from functions.php. */

/* -------------------------------------------------------------------------
   Dynamic secondary ("sub") menu
   --------------------------------------------------------------------------
   functions.php renders the items itself. They are printed inside the theme's
   `.newsx-header-menu-secondary-wrapper`, but the filter replaces the whole
   wp_nav_menu() output, so the theme's own `.newsx-header-menu-secondary`
   <nav> is not printed and the theme's secondary-menu rules - the spacing
   between items, the 13px type and the muted grey - never match them. The
   items then fall back to the primary-menu look (uppercase, and the plain
   `a` colour).

   The rules below restate that sub-menu look against the markup that really
   is printed: 13px sentence-case labels, 18px apart, muted grey, accent on
   hover. The two greys are the theme's own: #67737e is the default
   "Secondary Menu" link colour (Appearance > Customize > Header > Secondary
   Menu) and #c4c4c4 is what the theme's dark mode uses for this menu. Both
   are restated here so the row reads correctly in light and in dark mode;
   the theme's light and dark rules themselves are untouched.

   The selectors carry `body.nt-theme` (and `.newsx-nav-menu`) so they outrank
   the design system's blanket `body.nt-theme .newsx-middle-section-wrap
   .newsx-nav-menu > .menu-item > a` at equal document position. */

body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
}

body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item {
	margin: 0;
}

body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 4px 0;
	white-space: nowrap;
	font-family: var(--nt-font-body, inherit);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .01em;
	text-transform: none;
	color: #67737e;
	transition: color .2s ease;
}

/* Keep the underline effect even when the theme's pointer class is absent. */
body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 0;
	height: 1px;
	background-color: currentColor;
	opacity: 0;
	transition: all 0.3s ease;
}

body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a:hover:after,
body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item.current-menu-item > a:after {
	width: 100%;
	opacity: 1;
}

body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a:hover,
body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a:focus-visible,
body.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item.current-menu-item > a {
	color: var(--nt-color-accent, #e10600);
}

/* Dark mode: the same row, in the theme's dark-mode grey, white on hover. */
body.newsx-dark-mode.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a {
	color: #c4c4c4;
}

body.newsx-dark-mode.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a:hover,
body.newsx-dark-mode.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item > a:focus-visible,
body.newsx-dark-mode.nt-theme .newsx-header-menu-secondary-wrapper .newsx-nav-menu.autopulse-dynamic-menu > .menu-item.current-menu-item > a {
	color: #ffffff;
}

/* -------------------------------------------------------------------------
   Sidebar: every template except the front page
   --------------------------------------------------------------------------
   The front page draws its own sidebar in front-page.php (.nt-layout__side):
   a sticky column of .nt-panel cards holding a numbered "Trending Now" list
   and an "Explore" category list with a colour dot per category.

   Every other template - single posts, pages, archives - loads
   template-parts/sidebars/right-sidebar.php, which this child theme overrides
   to build the same panels from the same markup: .nt-panel, .nt-panel__title,
   .nt-trending and .nt-catlist. The parent stylesheet therefore styles them
   exactly as it styles the front page's, and this section has only two jobs:

     1. pin the column, which the front page does in .nt-layout__side and the
        theme offers to other sidebars only in its Pro package;
     2. tint the cards - the one deliberate difference, because the front page
        sets its white cards on the grey .nt-home background while these
        templates are white throughout, so a white card would have no edge.

   The search panel has no front page counterpart (the front page keeps its
   search in the header), so it is styled here.

   Selectors carry `body.nt-theme` so they outrank the parent stylesheet's
   `.newsx-sidebar ...` rules, which they are loaded after (functions.php
   makes the child stylesheet depend on the parent's `news-theme` handle). */

body.nt-theme .newsx-sidebar.newsx-general-sidebar {
	position: sticky;
	/* Space left above the column while it is pinned. Deliberately no negative
	   offset and no inner scrollbar: the first panel - "On this page" on an
	   article - is never clipped, which is how the front page behaves too. */
	top: 48px;
	display: grid;
	/* The front page's own .nt-layout__side gap. */
	gap: 24px;
}

/* Every panel takes its padding, radius, shadow and title from the parent
   stylesheet's .nt-panel; only the surface colour changes here. */
body.nt-theme .newsx-sidebar.newsx-general-sidebar > .nt-panel {
	background: var(--nt-color-bg);
}

/* Search. Scoped to this sidebar rather than to .widget_search, because the
   panel is built in the template and the theme's `.widget_search .search-field`
   rules do not reach a form outside a widget. The parent stylesheet also sets
   `.newsx-search-submit { display: none }`, for its icon-only header search,
   which would leave this form with no button at all. */
body.nt-theme .newsx-general-sidebar .search-form {
	background: none;
}

body.nt-theme .newsx-general-sidebar .search-form label {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

body.nt-theme .newsx-general-sidebar .search-field {
	width: 100%;
	padding: 10px 12px;
	font-size: 14px;
	color: var(--nt-color-ink);
	background: var(--nt-color-surface);
	border: 1px solid var(--nt-color-line);
	border-radius: var(--nt-radius-sm);
	outline: none;
}

body.nt-theme .newsx-general-sidebar .search-field:focus {
	border-color: var(--nt-color-accent);
}

body.nt-theme .newsx-general-sidebar .newsx-search-submit {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 42px;
	padding: 0;
	color: #fff;
	background: var(--nt-color-accent);
	border: 0;
	border-radius: var(--nt-radius-sm);
	cursor: pointer;
	transition: background-color .2s ease;
}

body.nt-theme .newsx-general-sidebar .newsx-search-submit:hover {
	background: var(--nt-color-accent-hover);
}

body.nt-theme .newsx-general-sidebar .newsx-search-submit .newsx-svg-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

body.nt-theme .newsx-general-sidebar .newsx-search-submit svg {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* The button carries the header's open and close icons; only the first is used. */
body.nt-theme .newsx-general-sidebar .newsx-search-submit svg + svg {
	display: none;
}

/* -------------------------------------------------------------------------
   "On this page" - the article's headings as anchors
   --------------------------------------------------------------------------
   Printed by the child theme's copy of template-parts/sidebars/right-sidebar.php
   from headings collected in functions.php while the article rendered, so the
   panel always lists the headings that are really on the page. The one panel
   with no front page counterpart. */

body.nt-theme .newsx-general-sidebar .nt-toc,
body.nt-theme .newsx-general-sidebar .nt-toc__sub {
	display: grid;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.nt-theme .newsx-general-sidebar .nt-toc a {
	display: block;
	padding: 5px 0 5px 12px;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.45;
	color: var(--nt-color-body);
	text-decoration: none;
	border-left: 2px solid var(--nt-color-line);
	transition: color .2s ease, border-color .2s ease;
}

body.nt-theme .newsx-general-sidebar .nt-toc a:hover,
body.nt-theme .newsx-general-sidebar .nt-toc a:focus-visible {
	color: var(--nt-color-accent);
	border-left-color: var(--nt-color-accent);
}

body.nt-theme .newsx-general-sidebar .nt-toc__item--sub a {
	padding-left: 22px;
	font-size: 12.5px;
	color: var(--nt-color-muted);
}

/* An anchored heading gets a little breathing room instead of landing hard
   against the top of the window. Nothing to clear here: the theme's header
   rows are not sticky on this site (no data-sticky="yes"). */
body.nt-theme .newsx-post-content :is(h2, h3)[id] {
	scroll-margin-top: 24px;
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* The front page stops sticking its sidebar at 980px; match it. */
@media (max-width: 980px) {
	body.nt-theme .newsx-sidebar.newsx-general-sidebar {
		position: static;
		top: auto;
	}
}