/*
Theme Name: Jadav Canvas
Author: jadavsanjay
Author URI: https://profiles.wordpress.org/jadavsanjay/
Description: A clean, responsive classic WordPress theme for blogs, portfolios, and small business websites.
Requires at least: 6.0
Tested up to: 7.1
Requires PHP: 7.4
Version: 1.0.3
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jadav-canvas
Domain Path: /languages
Tags: blog, portfolio, one-column, two-columns, right-sidebar, custom-background, custom-logo, custom-menu, featured-images, sticky-post, threaded-comments, translation-ready
*/

:root {
	--jc-bg: #f7f8f5;
	--jc-surface: #ffffff;
	--jc-text: #17231f;
	--jc-muted: #5e6a64;
	--jc-line: #dce2dd;
	--jc-primary: #116a63;
	--jc-primary-dark: #0d4f4a;
	--jc-accent: #c56b34;
	--jc-shadow: 0 18px 50px rgba(23, 35, 31, 0.08);
	--jc-radius: 8px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background: var(--jc-bg);
	color: var(--jc-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 18px;
	line-height: 1.7;
	margin: 0;
}

a {
	color: var(--jc-primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

a:hover,
a:focus {
	color: var(--jc-primary-dark);
}

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

button,
input,
select,
textarea {
	font: inherit;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	overflow: hidden;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background: var(--jc-surface);
	clip: auto !important;
	color: var(--jc-text);
	display: block;
	font-weight: 700;
	height: auto;
	left: 12px;
	padding: 12px 16px;
	top: 12px;
	width: auto;
	z-index: 100000;
}

.site-header {
	background: var(--jc-surface);
	border-bottom: 1px solid var(--jc-line);
	position: sticky;
	top: 0;
	z-index: 20;
}

.admin-bar .site-header {
	top: 32px;
}

.site-header__inner,
.site-footer__inner,
.site-content {
	margin: 0 auto;
	max-width: 1180px;
	padding-left: 24px;
	padding-right: 24px;
}

.site-header__inner {
	align-items: center;
	display: flex;
	gap: 24px;
	justify-content: space-between;
	min-height: 82px;
}

.site-branding {
	align-items: center;
	display: flex;
	gap: 14px;
	min-width: 0;
}

.custom-logo-link {
	display: inline-flex;
	flex: 0 0 auto;
}

.custom-logo {
	border-radius: 6px;
	max-height: 52px;
	width: auto;
}

.site-title {
	font-size: 24px;
	font-weight: 800;
	line-height: 1.1;
	margin: 0;
}

.site-title a {
	color: var(--jc-text);
	text-decoration: none;
}

.site-description {
	color: var(--jc-muted);
	font-size: 14px;
	margin: 4px 0 0;
}

.primary-menu {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a {
	border-radius: 6px;
	color: var(--jc-text);
	display: block;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 12px;
	text-decoration: none;
}

.primary-menu a:hover,
.primary-menu a:focus,
.primary-menu .current-menu-item > a {
	background: #e8f1ee;
	color: var(--jc-primary-dark);
}

.site-content {
	padding-bottom: 56px;
	padding-top: 48px;
}

.home-hero {
	background: #eef6f1;
	border: 1px solid var(--jc-line);
	border-radius: var(--jc-radius);
	display: grid;
	gap: 32px;
	grid-template-columns: minmax(0, 0.95fr) minmax(320px, 0.75fr);
	margin-bottom: 22px;
	min-height: 420px;
	overflow: hidden;
	position: relative;
}

.home-hero::before {
	background: var(--jc-primary);
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 10px;
}

.home-hero__content {
	align-self: center;
	max-width: 680px;
	padding: 56px 44px 56px 58px;
	position: relative;
	z-index: 2;
}

.home-hero__eyebrow {
	color: var(--jc-primary-dark);
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.home-hero h1 {
	color: var(--jc-text);
	font-size: 56px;
	line-height: 1.04;
	margin: 0;
	max-width: 620px;
}

.home-hero__description {
	color: var(--jc-muted);
	font-size: 20px;
	margin: 18px 0 0;
	max-width: 590px;
}

.home-hero__button {
	background: var(--jc-accent);
	border-radius: 6px;
	color: #fff;
	display: inline-flex;
	font-size: 15px;
	font-weight: 800;
	margin-top: 30px;
	padding: 13px 20px;
	text-decoration: none;
}

.home-hero__button:hover,
.home-hero__button:focus {
	background: #9f5529;
	color: #fff;
}

.home-hero__visual {
	align-self: stretch;
	background: #17231f;
	background-position: center;
	background-size: cover;
	border-left: 1px solid rgba(255, 255, 255, 0.12);
	min-height: 100%;
	position: relative;
}

.home-hero__visual::before {
	background: #f3fbf7;
	content: "";
	height: 74%;
	left: 44px;
	position: absolute;
	top: 50px;
	width: 74%;
}

.home-hero__paper,
.home-hero__note {
	position: absolute;
}

.home-hero__paper {
	background: #fff;
	border: 1px solid #dce2dd;
	box-shadow: 0 24px 46px rgba(23, 35, 31, 0.18);
}

.home-hero__paper span,
.home-hero__paper strong,
.home-hero__paper em,
.home-hero__note span {
	display: block;
}

.home-hero__paper--main {
	height: 222px;
	left: 18px;
	padding: 24px;
	top: 84px;
	width: 280px;
	z-index: 3;
}

.home-hero__paper--main span {
	background: var(--jc-primary);
	height: 78px;
	margin-bottom: 22px;
	width: 100%;
}

.home-hero__paper--main strong {
	background: var(--jc-text);
	height: 16px;
	margin-bottom: 12px;
	width: 74%;
}

.home-hero__paper--main em {
	background: #c5cdc7;
	height: 10px;
	width: 92%;
}

.home-hero__paper--side {
	height: 150px;
	padding: 20px;
	right: 34px;
	top: 154px;
	width: 178px;
	z-index: 2;
}

.home-hero__paper--side span {
	background: #f0d9cb;
	height: 52px;
	margin-bottom: 20px;
	width: 100%;
}

.home-hero__paper--side strong {
	background: #c5cdc7;
	height: 12px;
	width: 76%;
}

.home-hero__note {
	background: var(--jc-accent);
	bottom: 76px;
	height: 86px;
	left: 92px;
	padding: 18px;
	width: 168px;
	z-index: 4;
}

.home-hero__note span {
	background: rgba(255, 255, 255, 0.76);
	height: 9px;
	margin-bottom: 10px;
	width: 100%;
}

.home-hero__note span:last-child {
	width: 62%;
}

.home-features {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-bottom: 34px;
}

.home-feature {
	background: var(--jc-surface);
	border: 1px solid var(--jc-line);
	border-radius: var(--jc-radius);
	padding: 24px;
}

.home-feature__icon {
	align-items: center;
	background: #e8f1ee;
	border-radius: 999px;
	color: var(--jc-primary-dark);
	display: inline-flex;
	font-size: 13px;
	font-weight: 800;
	height: 42px;
	justify-content: center;
	margin-bottom: 12px;
	width: 42px;
}

.home-feature h2 {
	font-size: 18px;
	line-height: 1.3;
	margin: 0 0 8px;
}

.home-feature p {
	color: var(--jc-muted);
	font-size: 14px;
	line-height: 1.5;
	margin: 0;
}

.is-style-jadav-canvas-accent {
	border-left: 5px solid var(--jc-accent);
	color: var(--jc-text);
	padding-left: 18px;
}

.jadav-canvas-pattern-callout {
	background: #eef6f1;
	border-left: 6px solid var(--jc-primary);
	padding: 28px;
}

.content-area {
	display: grid;
	gap: 34px;
	grid-template-columns: minmax(0, 1fr) 320px;
}

.content-area.no-sidebar {
	grid-template-columns: minmax(0, 820px);
	justify-content: center;
}

.page-header,
.entry,
.widget,
.comments-area,
.no-results,
.not-found {
	background: var(--jc-surface);
	border: 1px solid var(--jc-line);
	border-radius: var(--jc-radius);
	box-shadow: var(--jc-shadow);
}

.page-header {
	margin-bottom: 22px;
	padding: 28px;
}

.page-title {
	font-size: 34px;
	line-height: 1.2;
	margin: 0;
}

.archive-description {
	color: var(--jc-muted);
	margin-top: 10px;
}

.entry,
.no-results,
.not-found {
	margin-bottom: 24px;
	overflow: hidden;
}

.entry__media img {
	aspect-ratio: 16 / 8;
	display: block;
	object-fit: cover;
	width: 100%;
}

.entry__inner {
	padding: 30px;
}

.entry-title {
	font-size: 34px;
	line-height: 1.2;
	margin: 0 0 12px;
}

.entry-title a {
	color: var(--jc-text);
	text-decoration: none;
}

.entry-title a:hover,
.entry-title a:focus {
	color: var(--jc-primary);
}

.entry-meta,
.entry-footer {
	color: var(--jc-muted);
	font-size: 14px;
}

.entry-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin-bottom: 18px;
}

.entry-content,
.entry-summary {
	margin-top: 18px;
}

.entry-content > *:first-child,
.entry-summary > *:first-child {
	margin-top: 0;
}

.entry-content > *:last-child,
.entry-summary > *:last-child {
	margin-bottom: 0;
}

.read-more,
.button,
button,
input[type="submit"] {
	background: var(--jc-primary);
	border: 1px solid var(--jc-primary);
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	font-weight: 800;
	line-height: 1.2;
	padding: 11px 16px;
	text-decoration: none;
}

.read-more:hover,
.read-more:focus,
.button:hover,
.button:focus,
button:hover,
button:focus,
input[type="submit"]:hover,
input[type="submit"]:focus {
	background: var(--jc-primary-dark);
	border-color: var(--jc-primary-dark);
	color: #fff;
}

.entry-footer {
	border-top: 1px solid var(--jc-line);
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
	margin-top: 24px;
	padding-top: 18px;
}

.sidebar {
	min-width: 0;
}

.widget {
	margin-bottom: 20px;
	padding: 22px;
}

.widget-title,
.widget h2,
.widget h3 {
	font-size: 20px;
	line-height: 1.25;
	margin: 0 0 14px;
}

.widget ul {
	margin-bottom: 0;
	padding-left: 20px;
}

.wp-block-search__inside-wrapper,
.search-form {
	display: flex;
	gap: 8px;
}

input[type="search"],
input[type="text"],
input[type="email"],
input[type="url"],
textarea {
	background: #fff;
	border: 1px solid #c5cdc7;
	border-radius: 6px;
	color: var(--jc-text);
	padding: 10px 12px;
	width: 100%;
}

textarea {
	min-height: 150px;
}

.post-navigation,
.posts-navigation {
	margin: 28px 0;
}

.nav-links {
	display: flex;
	gap: 16px;
	justify-content: space-between;
}

.nav-previous,
.nav-next {
	max-width: 48%;
}

.comments-area {
	margin-top: 28px;
	padding: 30px;
}

.comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.comment-body {
	border-bottom: 1px solid var(--jc-line);
	padding: 18px 0;
}

.children {
	list-style: none;
	margin-left: 24px;
	padding-left: 18px;
}

.comment-metadata,
.comment-notes,
.logged-in-as {
	color: var(--jc-muted);
	font-size: 14px;
}

.bypostauthor .comment-body {
	border-left: 4px solid var(--jc-accent);
	padding-left: 14px;
}

.site-footer {
	background: #17231f;
	color: #dfe8e3;
	margin-top: 28px;
}

.site-footer__inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
	padding-bottom: 30px;
	padding-top: 30px;
}

.site-footer a {
	color: #ffffff;
}

.alignwide {
	margin-left: -40px;
	margin-right: -40px;
	max-width: calc(100% + 80px);
}

.alignleft {
	float: left;
	margin: 0 24px 18px 0;
}

.alignright {
	float: right;
	margin: 0 0 18px 24px;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.alignfull {
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

.wp-caption,
.gallery-caption {
	color: var(--jc-muted);
	font-size: 14px;
	max-width: 100%;
}

.wp-caption-text {
	margin: 8px 0 0;
	text-align: center;
}

.sticky .entry__inner {
	border-top: 5px solid var(--jc-accent);
}

@media (max-width: 900px) {
	.admin-bar .site-header {
		top: 46px;
	}

	.site-header {
		position: relative;
		top: auto;
	}

	.site-header__inner,
	.site-footer__inner {
		align-items: flex-start;
		flex-direction: column;
	}

	.content-area {
		grid-template-columns: 1fr;
	}

	.home-hero {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.home-hero__content {
		padding: 42px 32px;
	}

	.home-hero h1 {
		font-size: 40px;
	}

	.home-hero__visual {
		min-height: 320px;
	}

	.home-hero__paper--main {
		left: 30px;
		top: 48px;
	}

	.home-hero__paper--side {
		right: 30px;
		top: 104px;
	}

	.home-hero__note {
		bottom: 34px;
	}

	.sidebar {
		order: 2;
	}

	.entry-title,
	.page-title {
		font-size: 28px;
	}

	.alignwide {
		margin-left: 0;
		margin-right: 0;
		max-width: 100%;
	}
}

@media (max-width: 600px) {
	body {
		font-size: 16px;
	}

	.site-header__inner,
	.site-footer__inner,
	.site-content {
		padding-left: 18px;
		padding-right: 18px;
	}

	.entry__inner,
	.page-header,
	.comments-area {
		padding: 22px;
	}

	.home-hero__content {
		padding: 34px 24px;
	}

	.home-hero h1 {
		font-size: 34px;
	}

	.home-hero__description {
		font-size: 17px;
	}

	.home-features {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.home-hero__visual {
		min-height: 280px;
	}

	.home-hero__paper--main {
		height: 190px;
		left: 22px;
		top: 42px;
		width: 220px;
	}

	.home-hero__paper--side {
		right: 18px;
		top: 98px;
		width: 145px;
	}

	.home-hero__note {
		bottom: 26px;
		left: 64px;
	}

	.primary-menu {
		align-items: stretch;
		flex-direction: column;
		width: 100%;
	}

	.nav-links {
		flex-direction: column;
	}

	.nav-previous,
	.nav-next {
		max-width: 100%;
	}
}

/* Keep long titles inside flex and grid columns, including unbroken words. */
.site-branding, .site-branding__text, .main-navigation, .site-main,
.content-area > *, .home-hero > *, .home-feature { min-width: 0; }
.site-title, .site-description, .entry-title, .page-title, .widget-title,
.home-hero h1, .home-hero__content, .home-feature, .primary-menu a {
    overflow-wrap: anywhere;
    word-break: normal;
}
.main-navigation { max-width: 100%; }
.main-navigation [hidden] { display: none !important; }
.primary-menu li { position: relative; min-width: 0; }
.primary-menu ul { list-style: none; margin: 0; padding: 8px 12px; }
.navigation-ready .primary-menu li:has(> .submenu-toggle) > a { padding-inline-end: 44px; }
.menu-toggle, .submenu-toggle { color: var(--jc-primary-dark); background: #e8f1ee; border: 1px solid var(--jc-line); border-radius: 6px; cursor: pointer; font: inherit; }
.menu-toggle { padding: 10px 18px; }
.submenu-toggle { position: absolute; inset-inline-end: 0; top: 2px; width: 40px; min-height: 40px; padding: 4px; line-height: 1; }
.main-navigation a:focus-visible, .main-navigation button:focus-visible { outline: 2px solid var(--jc-primary); outline-offset: 3px; }
.navigation-ready .primary-menu > li > ul { position: absolute; inset-inline-end: 0; top: 100%; width: 260px; max-width: calc(100vw - 48px); z-index: 30; background: var(--jc-surface); border: 1px solid var(--jc-line); border-radius: 6px; box-shadow: 0 8px 24px #17231f22; }
.navigation-ready .primary-menu ul ul { position: static; padding-inline: 12px 0; border-inline-start: 2px solid var(--jc-line); }
@media (max-width: 900px) {
    .main-navigation { width: 100%; }
    .navigation-ready .primary-menu { display: flex; flex-direction: column; align-items: stretch; margin-top: 12px; }
    .navigation-ready .primary-menu > li > ul { position: static; width: auto; max-width: 100%; box-shadow: none; }
    .home-hero__content { max-width: 100%; }
}
