/**
 * Blewspaper — Unified Stylesheet
 *
 * Single consolidated stylesheet for the Blewspaper static HTML theme.
 * Contains all component, layout, and page-level styles merged from the
 * original partials in their exact cascade order. No visual output has
 * been altered; this is a structural and documentary refactor only.
 *
 * Original file merge order (matching the HTML link-tag sequence):
 *   layout.css → home.css → common.css → hamburger.css →
 *   post.css → comment.css → search.css
 *
 * Deduplication notes:
 *   - The hamburger toggle block (.whamburger, .wtoggle, body.clicked
 *     state transforms) existed identically in both common.css and
 *     hamburger.css. The canonical version is retained in Section 4
 *     (Hamburger & Slide Menu) and removed from Section 3 (Common).
 *
 * @package    Blewspaper
 * @author     AnKish
 * @version    1.0.0
 * @since      2026-02-13
 *
 * Table of Contents:
 *   1. Reset, Base & Typography       (from layout.css)
 *   2. Layout Grid & Wrappers         (from layout.css)
 *   3. Common Components              (from common.css — hamburger dupes removed)
 *   4. Hamburger & Slide Menu         (from hamburger.css — canonical source)
 *   5. Home Page                      (from home.css)
 *   6. Post & Single Article          (from post.css)
 *   7. Comments                       (from comment.css)
 *   8. Search Results                 (from search.css)
 */

/* ==========================================================================
   1. RESET, BASE & TYPOGRAPHY
   ==========================================================================
   Global resets, box model, font imports, base element styles, and the
   heading scale. This section establishes the typographic foundation that
   every subsequent section inherits.

   Source: layout.css
   ========================================================================== */

@import url("https://fonts.googleapis.com/css?family=PT+Sans");
@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,400;0,600;0,700;0,900;1,400;1,600;1,700;1,900&display=swap");

html,
body {
	margin: 0;
	padding: 0;
	font-family: lato;
	background-color: #f7f7f7;
	font-family: "Source Sans Pro", sans-serif;
	scroll-behavior: smooth;
}

* {
	box-sizing: border-box;
}

ul {
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
	padding: 0;
}
figure {
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	margin: 0;
	font-weight: normal;
	color: #544e4e;
}

h1 {
	font-size: 90px;
}
h2 {
	font-size: 70px;
}
h3 {
	font-size: 3.75rem;
	font-weight: normal;
}
h4 {
	font-size: 50px;
}
h5 {
	font-size: 40px;
}
h6 {
	font-size: 25px;
}

a {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}

p {
	font-size: 17px;
	font-family: "Lato", sans-serif;
	line-height: 1.475em;
}

/* ==========================================================================
   2. LAYOUT GRID & WRAPPERS
   ==========================================================================
   The structural skeleton: wrapper, theme-width constraint, content/sidebar
   flex grid, inner-row nesting, and layout variant modifiers (.wrap2 through
   .wrap4). Also includes header and footer positioning.

   Source: layout.css
   ========================================================================== */

.wrapper {
	display: flex;
	flex-direction: column;
	gap: 40px;
	padding: 0px;
	margin: 0px;
	opacity: 1;
	transition: opacity 0.5s ease 0.2s;
}
.theme-width {
	width: 100%;
	max-width: 1280px;
}
.theme-color {
	color: #00a2e8;
}

.wrap {
	margin: 0px auto;
}
.wrap-margin {
	margin: 60px auto;
}
.margin-gap {
	margin: 40px auto;
}

/* --- Header & Footer shared positioning --- */

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.header .left {
	max-width: 200px;
	display: flex;
	gap: 20px;
}
.header .left img {
	width: 100%;
}

.header,
.footer {
	margin: auto;
	margin-top: 0;
	padding: 10px 20px;
	background-color: #ffffff;
}

/* --- Content / Sidebar flex grid --- */

.content {
	display: flex;
	margin: 0 0 0 -1rem;
}

.main-column {
	flex-grow: 1;
	/* keep separate for ie11 bug */
	flex-basis: calc(70% - 1rem);
	/* keep separate for ie11 bug */
	margin: 0 0 0 1rem;
}

.sidebar {
	flex-grow: 1;
	/* keep separate for ie11 bug */
	flex-basis: calc(30% - 1rem);
	/* keep separate for ie11 bug */
	background: #ffffff;
	padding: 20px;
	margin: 0 0 0 1rem;
}

/* --- Inner row nesting --- */

.inner-row:first-child {
	background: #ffffff;
}

.inner-row .main-column {
	background: #ffffff;
	padding: 20px;
}

.inner-row {
	padding: 20px;
	margin-bottom: 10px;
}

.inner-row:last-child {
	margin-bottom: 0;
	border: none;
	padding: 0;
}
.inner-row:first-child {
	padding: 20px;
	margin-bottom: 10px;
}

/* --- Layout variant modifiers ---
   .wrap2: sidebar-first on outer level
   .wrap3: sidebar-first outer, sidebar-last inner
   .wrap4: sidebar hidden outer, visible inner
*/

.wrap2 .sidebar {
	order: -1;
}
.wrap3 .sidebar {
	order: -1;
}
.wrap3 .inner-row .sidebar {
	order: 1;
}
.wrap4 .sidebar {
	display: none;
}
.wrap4 .inner-row .sidebar {
	display: block;
}

.wrapwhite {
	background-color: #ffffff;
	margin: 40px auto;
}

.none {
	display: none;
}

/* ==========================================================================
   3. COMMON COMPONENTS
   ==========================================================================
   Shared UI elements used across multiple pages: header actions, shamburger
   side panel, navigation menus, search modal, sidebar widgets, back-to-top
   arrow, footer, newsletter, and utility classes.

   Note: The hamburger toggle (.whamburger, .wtoggle, body.clicked states)
   previously duplicated here has been removed. The canonical version lives
   in Section 4 — Hamburger & Slide Menu.

   Source: common.css (lines 1-66 and 118-371, hamburger duplicate stripped)
   ========================================================================== */

/* --- Picture element reset --- */

picture {
	display: flex;
}

/* --- Header right-side actions --- */

.header .hright {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.header a {
	text-decoration: none;
}

.hright .contribute {
	padding: 2px 10px;
	font-size: 1rem;
	font-weight: bold;
	border: 2px solid var(--color1);
	background-color: var(--color1);
	text-transform: uppercase;
	color: #ffffff;
}
.hright .contribute:hover {
	border: 2px solid var(--color1);
	background-color: #ffffff;
	color: var(--color1);
}
.searchicon img {
	width: 22px;
	height: 22px;
	display: flex;
	align-items: center;
}

/* --- Shamburger side panel ---
   Full-height off-canvas panel that slides in from the left.
   Triggered by body.clicked state via JavaScript.
*/

.shamburger {
	display: flex;
	flex-direction: column;
	gap: 30px;
	background-color: #ffffff;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	max-width: 400px;
	height: 100vh;
	overflow-y: scroll;
	padding: 40px 30px;
	transition: transform 1s linear 0.3s;
	transform: translateX(-100vw);
	z-index: 1000;
	opacity: 1;
	margin: 20px auto;
}
body.clicked .shamburger {
	transform: translateX(0);
}
.wrapper {
	transition: opacity 0.3s linear 0.3s;
}
body.clicked .wrapper,
body.clicked header {
	opacity: 0.1;
}

/* --- Hamburger navigation list ---
   The list items inside the shamburger panel. Distinct from the toggle
   button itself which lives in Section 4.
*/

.hamnav {
	list-style-type: none;
	font-size: 1.3rem;
	font-weight: 500;
	margin: 20px auto;
}
.hamnav a {
	all: unset;
	cursor: pointer;
}
.hamnav a:hover {
	font-weight: 700;
	background-color: var(--color1);
	color: #ffffff;
	padding: 3px 10px;
}

/* --- Search modal ---
   Centred overlay that scales in from zero when body.active is set.
   Contains the full-width search input field and close button.
*/

.searchmodal {
	position: fixed;
	top: 50%;
	left: 0;
	right: 0;
	background-color: #ffffff;
	width: 100%;
	max-width: 900px;
	margin: auto;
	padding: 150px 70px;
	text-align: center;
	z-index: 4;
	cursor: pointer;
	transform: translateY(-50%) scale(0);
	transition: all 0.3s ease 0.2s;
}
body.active .searchmodal {
	transform: translateY(-50%) scale(1);
}
body.active .wrapper {
	opacity: 0.05;
}
.searchfield input {
	height: 80px;
	border: 0;
	border-bottom: 3px solid #eee;
	line-height: 40px;
	padding: 15px;
	width: 100%;
	font-size: 3.3rem;
	padding-left: 70px;
}
.modalclose {
	text-transform: uppercase;
	position: absolute;
	right: 10px;
	top: 10px;
	padding: 2px 10px;
	font-size: 1rem;
	font-weight: bold;
	border: 2px solid var(--color1);
	background-color: #ffffff;
	color: var(--color1);
}
.modalclose:hover {
	background-color: var(--color1);
	color: #ffffff;
}
.searchfield img {
	position: absolute;
	left: 70px;
	top: 0;
	bottom: 0;
	padding: 0px 10px;
	margin: auto;
	color: #c8cdd1;
	width: 60px;
	height: 60px;
}

/* --- Sidebar widgets ---
   Generic widget container (.tio) with titled header (.tio-title)
   and recursive list items (.tiorecursive). Supports two-column
   and three-column variants.
*/

.sidebar.widgets {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.tio {
	border: 2px solid #dcdcdc;
}
.tio-title {
	background-color: #dcdcdc;
	padding: 10px;
	text-align: center;
}
.tio-title h6 {
	font-size: 1.7rem;
	font-weight: 600;
}
.tiorecursive {
	display: flex;
	gap: 15px;
	margin: 10px 25px;
	padding: 10px 0px;
	align-items: center;
	border-bottom: 1px solid #bdbdbd;
}
.tiorecursive.three {
	justify-content: space-between;
}

.tiorecursive:last-child {
	border: 0px;
}
.tiorecursive .counter p {
	font-size: 1.7rem;
	padding: 5px;
	color: #bdbdbd;
}
.tiorecursive a {
	font-size: 1.169rem;
	color: #544e4e;
	text-decoration: none;
}
.tiorecursive .counter img {
	max-width: 90px;
}
.tio.archive .tiorecursive a {
	font-size: 1.3rem;
	color: #bdbdbd;
	padding: 10px;
}
.tio.archive .tiorecursive a:first-child {
	color: #544e4e;
}

/* --- Back-to-top arrow ---
   Fixed-position button at bottom-right. Hidden off-screen by default,
   slides up when .arrowScrollUp class is added via scroll detection.
*/

.top.arrow {
	position: fixed;
	bottom: -3.5rem;
	right: 1.25rem;
	width: 3.125rem;
	height: 3.125rem;
	text-decoration: none;
	transition: bottom 1s ease;
	cursor: pointer;
}
.top.arrow.arrowScrollUp {
	bottom: 1.25rem;
}

/* --- Footer --- */

footer.footer {
	display: flex;
	gap: 30px;
	align-items: center;
}
.footer .col-1 {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 20px;
}
.footer .col-2 {
	flex: 0 1 33%;
}

/* --- Newsletter signup --- */

.newsletter {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	background: #f7f7f7;
	padding: 40px;
}
form.fnewsletter {
	display: flex;
	border: 2px solid var(--color1);
}
form.fnewsletter input {
	outline: none;
	border: none;
	padding: 10px;
}
form.fnewsletter svg {
	width: 20px;
	fill: #ffffff;
	margin-right: 5px;
}
.fnewsletter a {
	display: flex;
	align-items: center;
	font-size: 1.2rem;
	padding: 5px 10px;
	background-color: var(--color1);
	color: #ffffff;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: 800;
}

/* --- Custom navigation --- */

.nav.cus.tom {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.nav.cus.tom ul {
	display: flex;
	gap: 10px;
	list-style-type: none;
	flex-wrap: wrap;
}
.nav.cus.tom ul a {
	text-decoration: none;
	font-size: 1.1rem;
	color: #000000;
}

/* --- Utility: extra padding --- */

.extrapadding {
	padding: 40px 20px;
}

/* --- Sticky header animation ---
   The header menu bar uses .hmanimate for sticky scroll behaviour.
   Starts off-screen (top: -100px) and slides into view when .active
   is toggled by the scroll handler.
*/

.hmanimate {
	z-index: 999;
	top: -100px;
	transition: all 1s;
	position: sticky;
}
.hmanimate.active {
	top: 0px;
	margin: auto;
	border-bottom: 1px solid #dcdcdc;
	transition-duration: 0.5s;
}

/* --- Tag cloud --- */

.tagcloud {
	padding: 5px 20px;
	background-color: #f7f7f7;
	border: 1px solid #e6e1e1;
	border-radius: 10px;
}
.tag.cloud {
	display: flex;
	flex-wrap: wrap;
}

/* ==========================================================================
   4. HAMBURGER & SLIDE MENU
   ==========================================================================
   The three-line toggle button, its animated cross transformation on click,
   and the slide-in menu panel. This is the canonical source for these
   selectors — the duplicate that previously existed in common.css has
   been removed.

   Source: hamburger.css
   ========================================================================== */

/* --- Toggle button ---
   Three-line icon built from border-top, border-bottom, and a ::before
   pseudo-element. On body.clicked, the borders go transparent and the
   pseudo-elements rotate into an X.
*/

.whamburger {
	position: relative;
	z-index: 500;
	display: flex;
	align-items: center;
	gap: 20px;
}

.wtoggle {
	cursor: pointer;
	outline: none;
	width: 35px;
	height: 21px;
	border: none;
	border-top: 3px solid #000000;
	border-bottom: 3px solid #000000;
	text-decoration: none;
	outline: 0;
	background: none;
}
.wtoggle:before,
.wtoggle:after {
	position: absolute;
	top: 6px;
	left: 0;
	content: "";
	display: block;
	width: 35px;
	height: 3px;
	background: #000000;
}
.wtoggle,
.wtoggle:before,
.wtoggle:after {
	transition: all 0.2s ease;
	transform: rotate(0deg);
}
body.clicked .wtoggle {
	border-color: transparent;
}
body.clicked .wtoggle:before {
	transform: rotate(45deg);
}
body.clicked .wtoggle:after {
	transform: rotate(-45deg);
}

/* --- Slide menu panel ---
   Off-canvas navigation that translates in from the left on body.clicked.
   Distinct from the .shamburger panel in Section 3 — this is the
   hamburger.css variant with its own max-width and padding.
*/

.slidemenu {
	width: 100%;
	max-width: 320px;
	left: 0px;
	top: 0;
	bottom: 0;
	position: fixed;
	overflow-y: auto;
	overflow-x: hidden;
	background-color: #ffffff;
	z-index: 100;
	transform: translateX(-320px);
	transition: all 0.2s ease;
	padding: 60px 20px;
}

body.clicked .slidemenu {
	transform: translateX(0px);
}
.whamburger span {
	display: flex;
}

/* --- Close button ---
   Displayed only when the menu is open (body.clicked).
*/

.whamburger .close {
	display: none;
	text-transform: uppercase;
	padding: 2px 10px;
	font-size: 1rem;
	font-weight: bold;
	border: 2px solid #00a2e8;
	background-color: #ffffff;
	text-transform: uppercase;
	color: #00a2e8;
	z-index: 500;
}
body.clicked .close {
	display: flex;
}

/* ==========================================================================
   5. HOME PAGE
   ==========================================================================
   Styles specific to the home page template: the video container with its
   rotated heading, the home snippet cards (.homesnippet / .hsrecursive),
   and the author-date-category meta strip (.autdatcat).

   Source: home.css
   ========================================================================== */

/* --- Video container ---
   Responsive aspect-ratio wrapper using the padding-top technique.
   The adjacent h1 is absolutely positioned and rotated -90deg to
   sit vertically alongside the video.
*/

.wrap .content .main-column .inner-row {
	position: relative;
}

.iframeholder {
	width: 100%;
	margin: auto;
	position: relative;
	padding: 70% 0 0;
	padding-top: 75%;
}
.iframeholder iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}

.wrap .content .main-column .inner-row .video {
	padding-left: 12.5em;
	box-sizing: border-box;
	padding-left: calc(12.5em - 15px);
}

.wrap .content .main-column .inner-row .video + h1 {
	position: absolute;
	display: block;
	font-size: 10.5em;
	left: 15px;
	top: 0;
	margin: 0;
	transform-origin: top right;
	transform: translateX(-100%) rotate(-90deg);
	top: 50%;
	transform-origin: top left;
	transform: rotate(-90deg) translateX(-50%);
}

/* --- Home snippet cards ---
   Horizontal card layout with thumbnail on the left (.child-1) and
   text content on the right (.child-2). Used on the home page for
   article previews.
*/

.homesnippet {
	display: flex;
	flex-direction: column;
	gap: 60px;
}
.homesnippet .hsrecursive {
	display: flex;
	gap: 30px;
	justify-content: space-between;
	align-items: center;
}
.hsrecursive .child-1 {
	flex: 0 0 38%;
}
.hsrecursive .child-1 img {
	width: 100%;
}
.hsrecursive a {
	text-decoration: none;
	font-size: 2.2rem;
	color: #544e4e;
}
.hsrecursive .child-2 {
	display: flex;
	flex-direction: column;
	gap: 15px;
	justify-content: space-between;
}
.hsrecursive h5 {
	line-height: 2.5rem;
}

/* --- Author / Date / Category meta strip --- */

.autdatcat {
	display: flex;
	gap: 20px;
	align-items: center;
	justify-content: space-between;
}
.autdatcat .child-left {
	display: flex;
	gap: 10px;
	align-items: center;
}
.autdatcat .child-left span {
	display: flex;
}
.autdatcat .pgravtar img {
	max-width: 45px;
	border-radius: 50%;
}
.autdatcat .calendar img {
	width: 20px;
}
.caldat {
	gap: 5px;
}
.autdatcat .child-left span a {
	font-size: 1.1rem;
}

/* ==========================================================================
   6. POST & SINGLE ARTICLE
   ==========================================================================
   Styles for single article pages: blog title headline, social sharing
   bar, post body typography, category tags, previous/next navigation,
   author meta box, sidebar snippet variants, and the horizontal top slider.

   Source: post.css
   ========================================================================== */

/* --- Blog title headline ---
   Flex row with coloured square accent blocks flanking the title.
*/

.blogtitle.headline {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.headline span {
	width: 30px;
	min-width: 30px;
	height: 30px;
	background: var(--color1);
}
.head.line {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.headline h2 {
	text-align: center;
}

/* --- Social sharing & author bar --- */

.socaut {
	display: flex;
	justify-content: space-between;
}
.socaut .le.ft {
	display: flex;
	gap: 15px;
	align-items: center;
}
.socaut .le.ft ul {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	list-style-type: none;
}
.socaut .le.ft ul li {
	padding: 5px 15px;
	background-color: #f7f7f7;
	border-radius: 25px;
	border: 2px solid var(--color1);
}
.socons li span svg {
	width: 30px;
}
.socons li a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	text-transform: uppercase;
	color: var(--color5);
	font-weight: 600;
}
.socons li a span {
	display: flex;
}

/* --- Post view counter --- */

.postviews {
	display: flex;
	flex-direction: column;
	font-size: 1.25em;
	padding-right: 10px;
	border-right: 1px solid #dddddd;
	text-transform: uppercase;
	color: #b0b9bd;
	text-align: center;
	font-weight: 600;
}

/* --- Post body typography --- */

.main-column.post p {
	font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1.625;
	margin: 17px auto;
}
.main-column.post p a {
	text-decoration: none;
	padding: 1px 5px;
	font-size: 1.3rem;
	font-weight: bold;
	color: var(--color1);
	border-bottom: 1px solid var(--color1);
}

/* --- Post category tags --- */

.wpostcat {
	display: flex;
	gap: 20px;
	flex-wrap: wrap;
	margin: 40px auto;
}
.wpostcat a {
	background-color: #f7f7f7;
	color: #000000;
	padding: 5px 10px;
	text-decoration: none;
	font-size: 1.125rem;
	text-transform: uppercase;
}

/* --- Previous / Next post navigation --- */

.prenext {
	display: flex;
	gap: 20px;
	justify-content: space-between;
}
.prenext a {
	text-decoration: none;
	padding: 5px 20px;
	text-transform: uppercase;
	font-weight: bold;
	font-size: 1.1rem;
	color: #000000;
	background-color: #ffffff;
	border: 2px solid #000000;
	display: flex;
	text-align: center;
}
.prenext a:hover:nth-child(2n + 1) {
	font-weight: bold;
	background-color: #000000;
	color: #ffffff;
	border: 2px solid #ffffff;
}
.prenext a:nth-child(2) {
	background-color: #000000;
	color: #ffffff;
}

/* --- Author meta box ---
   Appears below post content with avatar, name, social links, and bio.
*/

.auth.meta {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 40px auto;
	border-bottom: 1px solid #eeeeee;
	padding: 20px 0px;
}
.auth.meta .col-1 img {
	max-width: 90px;
	height: auto;
	border-radius: 50%;
}
.auth.meta .row-1 {
	display: flex;
	gap: 20px;
}
.auth.meta .row-1 ul {
	display: flex;
	list-style: none;
	align-items: center;
	gap: 10px;
}
.auth.meta .row-1 h6 {
	font-size: 1.3rem;
	font-weight: 600;
	padding-right: 10px;
	border-right: 1px solid #7b7a7a;
}

.auth.meta .row-2 p {
	margin: 0;
}

/* --- Sidebar snippet variants ---
   .sidebar.vl  = very large (grid of cards)
   .sidebar.s   = small (compact list, no excerpts)
   .sidebar.l   = large (stacked cards with excerpts)
*/

.sidebar.vl {
	background-color: #ffffff;
	margin: auto;
}

.sidebar.vl .psnippets {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.sidebar.s .psnippets,
.sidebar.l .psnippets {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.sidebar.s .psnippets h4 {
	font-size: 1.3rem;
}
.sidebar.s .row-2 p {
	display: none;
}

.psnippets .recurse {
	flex: 0 1 31.333%;
}

.sidebar.vl .recurse,
.sidebar.l .recurse {
	border: 1px solid #dcdcdc;
	box-sizing: border-box;
}

.recurse.col-1 {
	display: flex;
	flex-direction: column;
}
.recurse.col-1 img {
	width: 100%;
}

.recurse.col-1 h4 {
	color: #000;
	font-weight: 600;
	font-size: 1.5em;
}
.recurse.col-1 h4 a {
	all: inherit;
	cursor: pointer;
}
.recurse.col-1 .scategory {
	color: var(--color1);
	text-transform: uppercase;
}

.sidebar.vl .row-2,
.sidebar.l .row-2 {
	padding: 20px;
}

/* --- Horizontal top slider ---
   A row of category/topic chips that scroll horizontally. The number
   of visible items is controlled by the --slides-across token.
*/

:root {
	--slides-across: 4;
}
@media screen and (max-width: 1200px) {
	:root {
		--slides-across: 3;
	}
}
@media screen and (max-width: 1000px) {
	:root {
		--slides-across: 2;
	}
}
@media screen and (max-width: 600px) {
	:root {
		--slides-across: 1;
	}
}

.hslider {
	display: flex;
	flex-direction: row-reverse;
	overflow: hidden;
}
.header .navigator {
	margin-left: auto;
}
.header .navigator svg {
	width: 20px;
}
.hslide-wrap {
	width: 100%;
	transition: 1s ease;
}
.hrapper {
	display: flex;
	justify-content: space-between;
}
.hrecur {
	flex: 0 0 calc((100%) / var(--slides-across));
	transition: transform 0.5s;
	padding: 10px;
	display: flex;
	gap: 15px;
	align-items: center;
}
.hrecur p:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 25px;
	padding: 15px;
	border: 2px solid var(--color1);
	width: 30px;
	height: 30px;
}
.hrecur p,
.hrecur a {
	font-size: 1rem;
	color: #030303;
}

/* ==========================================================================
   7. COMMENTS
   ==========================================================================
   The comment section layout: two-column flex with discussion thread on the
   left (.discom) and sticky comment form on the right (.comform). Individual
   comment cards (.combox) with avatar, text, and reply button.

   Source: comment.css
   ========================================================================== */

.comm.ent {
	display: flex;
	gap: 40px;
	margin: auto;
	background-color: #ffffff;
	justify-content: space-between;
}
.discom {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.discom.full {
	width: 100%;
}
.discom h3 {
	position: relative;
	display: flex;
	gap: 10px;
	margin-right: auto;
	font-size: 2.75rem;
}
.discom .comcount {
	position: absolute;
	font-size: 2rem;
	right: -40px;
}

/* --- Comment form ---
   Sticky positioned so it remains visible while scrolling through
   the discussion thread.
*/

.comform {
	flex: 0 1 40%;
	display: flex;
	flex-direction: column;
	gap: 40px;
	position: sticky;
	top: 0;
	align-self: flex-start;
	background-color: #fff6db;
	padding: 20px;
}

.comform input,
.comform textarea {
	padding: 10px 20px;
	border: 2px solid #b7b4b4;
	font-size: 1.3em;
}
.comform input[type="submit"] {
	border: 2px solid var(--color1);
	background-color: var(--color1);
	padding: 5px 20px;
	max-width: 250px;
	margin: auto;
	font-weight: 700;
	color: #ffffff;
}
.comform input[type="submit"]:hover {
	border: 2px solid var(--color1);
	background-color: var(--color2);
	color: var(--color1);
}

/* --- Load more comments button --- */

.load.comments {
	border: 2px solid var(--color1);
	background-color: var(--color2);
	color: var(--color1);
	padding: 5px 15px;
	font-size: 1.3rem;
	text-decoration: none;
	font-weight: bold;
	margin: auto;
}
.load.comments:hover {
	border: 2px solid var(--color2);
	background-color: var(--color1);
	color: var(--color2);
}

/* --- Individual comment card --- */

.combox {
	display: flex;
	gap: 20px;
	padding: 20px;
	border-radius: 10px;
	background-color: var(--color4);
}
.combox .col-1 {
	flex: 0 0 50px;
}
.combox .col-1 img {
	width: 100%;
	border-radius: 50%;
}
.combox .col-2 .row-2 {
	margin: 15px auto;
}
.combox .col-2 button {
	padding: 3px 7px;
	font-weight: bold;
	background-color: var(--color2);
	border: 2px solid var(--color3);
	color: #4a4949;
}
.combox .col-2 button:hover {
	background-color: var(--color3);
	color: var(--color2);
}
.combox .col-2 .row-1 span:nth-child(2) {
	margin-left: 10px;
	font-size: 0.9rem;
}

/* ==========================================================================
   8. SEARCH RESULTS
   ==========================================================================
   Overrides specific to the search results page. Adjusts the home snippet
   layout to centre-justify results and narrows the thumbnail column.

   Source: search.css
   ========================================================================== */

.search .hsrecursive {
	justify-content: space-around;
}

.search .child-1 {
	flex: 0 0 25%;
}

.hsrecursive .child-2 {
	flex: 1;
}