/*
 * Seth Godin Blog Template — Unified Stylesheet
 * Architecture: Design Tokens → Reset/Base → Layout → Components → Utilities → Responsive
 * Naming: BEM-influenced with backward-compatible legacy selectors
 * Version: 2.0.0
 * Last Updated: 2026-02-11
 */

/* ==========================================================================
   Section 1: DESIGN TOKENS
   Centralised custom properties for colour, typography, spacing, and motion.
   ========================================================================== */

/* --- Local @font-face: Lato (400, 400i, 700, 700i) --- */

@font-face {
	font-family: "Lato";
	src:
		url("../fonts/lato-regular.woff2") format("woff2"),
		url("../fonts/lato-regular.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lato";
	src:
		url("../fonts/lato-regular-italic.woff2") format("woff2"),
		url("../fonts/lato-regular-italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Lato";
	src:
		url("../fonts/lato-bold.woff2") format("woff2"),
		url("../fonts/lato-bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lato";
	src:
		url("../fonts/lato-bold-italic.woff2") format("woff2"),
		url("../fonts/lato-bold-italic.woff") format("woff");
	font-weight: 700;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Colour Palette */
	--color-text-primary: #4a4949;
	--color-text-secondary: #6b6a6a;
	--color-text-inverse: #ffffff;
	--color-text-link: #00a2e8;

	--color-bg-body: #ffffff;
	--color-bg-muted: #f7f7f7;
	--color-bg-input: #f1efef;
	--color-bg-accent: #00a2e8;
	--color-bg-accent-hover: #008ec9;

	--color-border-light: #efeaea;
	--color-border-dark: #000000;

	--color-scrollbar-track: #fafafa;
	--color-scrollbar-thumb: #e9e8e8;

	/* Typography */
	--font-family-body: "Lato", sans-serif;
	--font-size-base: 1rem;
	--font-size-sm: 0.875rem;
	--font-size-md: 1.1rem;
	--font-size-lg: 1.2rem;
	--font-size-h6: 1.6rem;
	--font-size-h4: 2rem;
	--font-size-h3: 2.4rem;
	--font-size-h2: 2.8rem;
	--font-size-h1: 3.2rem;
	--line-height-body: 1.551;
	--line-height-tight: 1.4;

	/* Spacing Scale (4px base) */
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 20px;
	--space-xl: 30px;
	--space-2xl: 40px;
	--space-3xl: 70px;

	/* Sidebar Dimensions */
	--sidebar-width: 250px;
	--sidebar-max-width: 350px;
	--sidebar-flex-basis: 30%;
	--sidebar-padding: var(--space-xl);

	/* Borders */
	--radius-sm: 5px;
	--radius-pill: 50%;
	--radius-comment: 35px 55px;

	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-slide: 1s ease;

	/* Scrollbar */
	--scrollbar-width: 5px;

	/* Z-Index Scale */
	--z-behind: -1;
	--z-base: 1;
	--z-sidebar: 10;
}

/* ==========================================================================
   Section 2: RESET & BASE
   Minimal reset and foundational element styles.
   ========================================================================== */

::-webkit-scrollbar {
	width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
	background: var(--color-scrollbar-track);
}

::-webkit-scrollbar-thumb {
	background: var(--color-scrollbar-thumb);
}

html,
body {
	margin: 0;
	padding: 0;
	font-family: var(--font-family-body);
	color: var(--color-text-primary);
	background-color: var(--color-bg-body);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6,
ul,
ol,
p,
figure,
blockquote {
	margin: 0;
	padding: 0;
}

h1 {
	font-size: var(--font-size-h1);
	font-weight: 400;
	color: var(--color-text-primary);
}

h2 {
	font-size: var(--font-size-h2);
	font-weight: 400;
	color: var(--color-text-primary);
}

h3 {
	font-size: var(--font-size-h3);
	font-weight: 400;
	color: var(--color-text-primary);
}

h4 {
	font-size: var(--font-size-h4);
	font-weight: 400;
	color: var(--color-text-primary);
}

h6 {
	font-size: var(--font-size-h6);
}

p {
	font-size: var(--font-size-lg);
	line-height: var(--line-height-tight);
}

ul {
	list-style-type: none;
}

a {
	color: inherit;
	text-decoration: none;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Section 3: LAYOUT — Wrapper & Structural Containers
   ========================================================================== */

.wrapper {
	display: flex;
	gap: var(--space-2xl);
}

.wrapper::before {
	content: "";
	width: var(--sidebar-flex-basis);
	flex: 0 0 var(--sidebar-flex-basis);
	max-width: var(--sidebar-max-width);
	min-width: var(--sidebar-width);
	position: relative;
	z-index: var(--z-behind);
}

/* ==========================================================================
   Section 4: COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   4a. Sidebar
   -------------------------------------------------------------------------- */

.sidebar {
	flex: 0 0 var(--sidebar-width);
	width: var(--sidebar-flex-basis);
	max-width: var(--sidebar-max-width);
	min-width: var(--sidebar-width);
	padding: var(--sidebar-padding);
	position: fixed;
	left: 0;
	top: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
}

.header-top {
	display: flex;
	margin: 0 auto var(--space-2xl) auto;
	align-items: center;
}

picture.picture {
	margin: auto;
}

.picture img {
	display: block;
	margin: auto;
	width: 80%;
	max-width: 200px;
	border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   4b. Sidebar Navigation Menus
   -------------------------------------------------------------------------- */

.menu {
	margin: var(--space-lg) auto;
}

.menu a {
	font-size: var(--font-size-md);
	color: var(--color-text-primary);
	text-decoration: none;
	transition: color var(--transition-fast);
}

.menu a:hover {
	color: var(--color-text-link);
}

.menu li {
	margin: var(--space-xs) auto;
	padding: 2px 0;
}

/* --------------------------------------------------------------------------
   4c. Search & Email Forms
   -------------------------------------------------------------------------- */

.tform {
	margin-bottom: var(--space-md);
}

.tinput {
	display: flex;
	max-width: 100%;
	flex-wrap: wrap;
}

.email-search-box {
	flex: 1;
	min-width: 0;
	padding: 7px;
	border-radius: var(--radius-sm) 0 0 var(--radius-sm);
	border: 2px solid var(--color-border-light);
	font-family: var(--font-family-body);
	font-size: var(--font-size-lg);
	transition: border-color var(--transition-fast);
}

.email-search-box:focus {
	border-color: var(--color-bg-accent);
}

.email-search-btn {
	flex-shrink: 0;
	padding: 7px var(--space-lg);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	border: 2px solid var(--color-border-light);
	font-family: var(--font-family-body);
	font-weight: 700;
	font-size: var(--font-size-lg);
	background: var(--color-bg-input);
	color: var(--color-border-dark);
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}

.email-search-btn:hover {
	background: var(--color-text-primary);
	color: var(--color-text-inverse);
}

.email-search-box-2 {
	border-color: var(--color-bg-accent);
}

.email-search-btn-2 {
	background: var(--color-bg-accent);
	border-color: var(--color-bg-accent);
	color: var(--color-text-inverse);
}

.email-search-btn-2:hover {
	background: var(--color-bg-accent-hover);
	border-color: var(--color-bg-accent-hover);
}

/* --------------------------------------------------------------------------
   4d. Hamburger Menu (hidden on desktop, visible on mobile)
   -------------------------------------------------------------------------- */

.whamburger {
	display: none;
}

.wtoggle {
	cursor: pointer;
	outline: none;
	width: 35px;
	height: 21px;
	border: none;
	border-top: 3px solid var(--color-border-dark);
	border-bottom: 3px solid var(--color-border-dark);
	background: none;
	position: relative;
	transition: all var(--transition-fast);
	transform: rotate(0deg);
}

.wtoggle::before,
.wtoggle::after {
	position: absolute;
	top: 6px;
	left: 0;
	content: "";
	display: block;
	width: 35px;
	height: 3px;
	background: var(--color-border-dark);
	transition: all var(--transition-fast);
	transform: rotate(0deg);
}

body.clicked .wtoggle {
	border-color: transparent;
}

body.clicked .wtoggle::before {
	transform: rotate(45deg);
}

body.clicked .wtoggle::after {
	transform: rotate(-45deg);
}

/* --------------------------------------------------------------------------
   4e. Article Feed & Single Post Content
   -------------------------------------------------------------------------- */

.article {
	display: flex;
	flex-direction: column;
	flex: 1 0 0%;
	gap: 60px;
	margin-right: 50px;
	padding: var(--sidebar-padding);
	transition: opacity var(--transition-fast);
}

.article-feed {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

.article article {
	flex: 1 0 auto;
	margin: auto;
}

.article p a {
	color: var(--color-text-link);
	text-decoration: none;
}

.article p a:hover {
	font-weight: 700;
	border-bottom: 2px solid var(--color-text-link);
}

.article p {
	margin: var(--space-lg) auto;
}

/* --------------------------------------------------------------------------
   4f. Timestamp & Social Icons Row
   -------------------------------------------------------------------------- */

.timesocial {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
}

.time {
	background: var(--color-bg-input);
	color: var(--color-border-dark);
	padding: 10px;
	border-radius: var(--radius-sm);
	border: 2px solid var(--color-border-light);
	font-weight: 700;
	font-size: var(--font-size-base);
}

.social {
	display: flex;
	align-items: center;
	gap: 10px;
}

.social img {
	transition: opacity var(--transition-fast);
}

.social img:hover {
	opacity: 0.7;
}

/* --------------------------------------------------------------------------
   4g. Post Navigation (Back / Random / Next)
   -------------------------------------------------------------------------- */

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 25px;
}

.post-tag {
	background-color: #f7f7f7;
	color: var(--color-border-dark);
	font-weight: 700;
	padding: 5px 25px;
	font-size: var(--font-size-sm);
	border: none;
	border-radius: 50px;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}

.post-tag:hover {
	background-color: var(--color-border-dark);
	color: var(--color-text-inverse);
}

.backnext {
	display: flex;
	justify-content: space-between;
	gap: var(--space-md);
}

.backnext button {
	background-color: var(--color-bg-body);
	color: var(--color-border-dark);
	font-weight: 700;
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--font-size-lg);
	border: 2px solid var(--color-border-dark);
	flex: 1 0 0%;
	border-radius: var(--radius-sm);
	max-width: 150px;
	cursor: pointer;
	transition:
		background-color var(--transition-fast),
		color var(--transition-fast);
}

.backnext button a {
	text-decoration: none;
	color: inherit;
}

.backnext button:hover {
	background-color: var(--color-border-dark);
	color: var(--color-text-inverse);
}

/* --------------------------------------------------------------------------
   4h. Post Heading Link
   -------------------------------------------------------------------------- */

.hclass {
	color: var(--color-text-primary);
}

.hclass:hover {
	text-decoration: none;
	font-weight: 400;
	border-bottom: none;
}

/* --------------------------------------------------------------------------
   4i. Comment List
   -------------------------------------------------------------------------- */

.commentlist {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.commentlist ol {
	display: flex;
	gap: 10px;
	background-color: var(--color-bg-muted);
	padding: var(--space-lg);
	border-radius: var(--radius-comment);
}

.commentlist p {
	margin: 0;
}

.col-1 {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	flex-shrink: 0;
}

.col-1 figure {
	width: 60px;
}

.col-1 img {
	width: 100%;
	border-radius: var(--radius-pill);
}

.col-1 button {
	border: none;
	background-color: var(--color-border-dark);
	color: var(--color-text-inverse);
	padding: var(--space-xs) 0;
	cursor: pointer;
	font-family: var(--font-family-body);
	font-size: var(--font-size-sm);
	transition: background-color var(--transition-fast);
}

.col-1 button:hover {
	background-color: var(--color-text-primary);
}

.col-2 {
	display: flex;
	gap: 10px;
	flex-direction: column;
	align-items: flex-start;
}

/* --------------------------------------------------------------------------
   4j. Comment Form
   -------------------------------------------------------------------------- */

.wcomment {
	display: flex;
	gap: var(--space-2xl);
	width: 100%;
	flex-wrap: wrap;
}

.wcomment textarea {
	width: 100%;
	overflow: auto;
	resize: none;
	padding: 10px;
	font-family: var(--font-family-body);
	font-size: var(--font-size-md);
	border: 2px solid var(--color-border-light);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

.wcomment textarea:focus {
	border-color: var(--color-bg-accent);
}

.wcomment input[type="text"],
.wcomment input[type="email"] {
	height: 40px;
	flex: 0 0 calc(50% - 20px);
	padding: 10px;
	font-family: var(--font-family-body);
	font-size: var(--font-size-md);
	border: 2px solid var(--color-border-light);
	border-radius: var(--radius-sm);
	transition: border-color var(--transition-fast);
}

.wcomment input[type="text"]:focus,
.wcomment input[type="email"]:focus {
	border-color: var(--color-bg-accent);
}

.wcomment input[type="submit"] {
	margin-left: auto;
	border-radius: var(--radius-sm);
	cursor: pointer;
}

/* ==========================================================================
   Section 5: UTILITIES
   ========================================================================== */

.mobsidebar {
	margin-bottom: var(--space-xl);
	display: none;
}

/* ==========================================================================
   Section 6: RESPONSIVE — Mobile (max-width: 700px)
   ========================================================================== */

@media only screen and (max-width: 700px) {
	/* Layout Reset */
	.wrapper {
		display: flex;
		flex-direction: column;
	}

	.wrapper::before {
		display: none;
	}

	/* Sidebar → Top Bar */
	.sidebar {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		padding: 10px var(--space-lg);
		position: static;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.header-top {
		display: flex;
		justify-content: space-between;
		margin: 0;
	}

	.header-bottom {
		margin: var(--space-2xl) 0;
	}

	.tform {
		max-width: 400px;
	}

	.picture img {
		max-width: 100px;
		margin: 0;
	}

	picture.picture {
		margin: 0;
	}

	/* Hamburger Visibility */
	.whamburger {
		position: relative;
		display: flex;
		align-items: center;
	}

	/* Slide-in Panel */
	.hide {
		top: 80px;
		bottom: auto;
		display: block;
		position: absolute;
		background: var(--color-bg-body);
		opacity: 0.7;
		transform: translateX(-100vw);
		transition: transform var(--transition-slide);
		z-index: var(--z-sidebar);
		padding: var(--space-lg);
	}

	body.clicked .hide {
		display: block;
		transform: translateX(0);
	}

	body.clicked .article {
		opacity: 0.03;
		pointer-events: none;
	}

	/* Content Centering */
	.article {
		margin-right: 0;
	}

	.article h3,
	.article h4 {
		text-align: center;
	}

	.article p {
		text-align: center;
	}

	/* Timestamp & Social Stacking */
	.timesocial {
		flex-direction: column;
		margin: 0 auto var(--space-lg) auto;
	}

	.time {
		max-width: 150px;
		text-align: center;
		margin: auto;
	}

	.social {
		margin: 15px auto;
	}

	/* Form Inputs */
	.email-search-btn {
		padding: 7px;
		width: 50%;
	}

	.email-search-box {
		padding: 7px;
		width: 50%;
		font-size: var(--font-size-lg);
	}
}

/* ==========================================================================
   Section 7: RESPONSIVE — Tablet (max-width: 960px) and (min-width: 701px)
   ========================================================================== */

@media only screen and (max-width: 960px) and (min-width: 701px) {
	.sidebar {
		min-width: 200px;
		flex: 0 0 200px;
		padding: var(--space-lg);
	}

	.wrapper::before {
		min-width: 200px;
		flex: 0 0 200px;
	}

	.article {
		margin-right: var(--space-lg);
		gap: var(--space-2xl);
	}

	.picture img {
		max-width: 120px;
	}
}

/* ==========================================================================
   Section 8: PRINT
   ========================================================================== */

@media print {
	.sidebar,
	.whamburger,
	.social,
	.backnext,
	.wcomment {
		display: none;
	}

	.wrapper {
		display: block;
	}

	.wrapper::before {
		display: none;
	}

	.article {
		margin: 0;
		padding: 0;
	}

	body {
		font-size: 12pt;
		color: #000;
	}

	a {
		color: #000;
		text-decoration: underline;
	}
}