/*
Theme Name: My Theme
Description: An HTML5 version.
Version: 1.0
Tags: html5, naked, clean, basic
*/

/* ==========================================================================
   Where the CSS lives

   style.css      — everything below: tokens and all base (desktop-first) rules.
   responsive.css — every @media block, loaded after this file.
   css/reset.css, css/layout.css — imported below.

   Both are enqueued from functions.php (crystal_enqueue_assets), with
   responsive.css declared as depending on this file so it always comes second.

   Nothing lives in Appearance > Customize > Additional CSS any more; it was
   moved here so there is one place to look.
   ========================================================================== */

@import "css/reset.css";
@import "css/layout.css";

/* ==========================================================================
   Crystal India Holidays — brand tokens

   On :root, not on a wrapper class, because .crystal-banner sits OUTSIDE
   .custom-blog-template on the listings (so the gradient can run full width)
   and still needs these values.

   --crystal-container: the site-wide content width (1320px).
   ========================================================================== */

:root {
	--crystal-blue: #1689CF;
	--crystal-blue-deep: #0B4A72;
	--crystal-orange: #F68B2D;
	--crystal-red: #EF3136;
	--crystal-yellow: #F9C63A;
	--crystal-charcoal: #222222;
	--crystal-gray-bg: #F5F7FA;
	--crystal-container: 1320px;
}

/* --------------------------------------------------------------------------
   box-sizing

   css/reset.css is Eric Meyer's 2011 reset, which predates box-sizing, so the
   default content-box is in force: any "width: 100%" element ALSO adds its
   padding and border on top and overflows its parent. The sidebar month
   dropdown (width: 100% + 24px padding + 2px border) did exactly that, which
   made the document wider than the viewport, let the page scroll sideways and
   ate the right-hand gutter on narrow screens.

   Scoped to our own blocks rather than "*" so Elementor's header/footer and
   WooCommerce keep whatever sizing they already rely on.
   -------------------------------------------------------------------------- */
/* Headings */
h1 {
    font-size: 36px;
    line-height: 1.2;
    font-weight: 700;
    margin: 0 0 20px;
}

h2 {
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
    margin: 0 0 18px;
}

h3 {
    font-size: 26px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 16px;
}

h4 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
    margin: 0 0 14px;
}

h5 {
    font-size: 18px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 12px;
}

h6 {
    font-size: 16px;
    line-height: 1.4;
    font-weight: 700;
    margin: 0 0 10px;
}


/* Paragraph */
p {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 16px;
}


/* Bold */
strong,
b {
    font-weight: 700;
}


/* Italic */
em,
i {
    font-style: italic;
}


/* Unordered List */
ul {
    list-style-type: disc;
    padding-left: 25px;
    margin: 0 0 20px;
}


/* Ordered List */
ol {
    list-style-type: decimal;
    padding-left: 25px;
    margin: 0 0 20px;
}


/* List Items */
ul li,
ol li {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 8px;
}


/* Links */
a {
    text-decoration: underline;
}


/* Blockquote */
blockquote {
    margin: 20px 0;
    padding: 15px 20px;
    border-left: 4px solid #ddd;
    font-style: italic;
}


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


/* Mobile */
@media (max-width: 767px) {

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 26px;
    }

    h3 {
        font-size: 22px;
    }

    h4 {
        font-size: 20px;
    }

    h5 {
        font-size: 18px;
    }

    h6 {
        font-size: 16px;
    }

    p,
    ul li,
    ol li {
        font-size: 15px;
    }
}

.crystal-banner,
.custom-blog-template,
.crystal-single,
.crystal-banner *,
.custom-blog-template *,
.crystal-single *,
.crystal-banner *::before,
.custom-blog-template *::before,
.crystal-single *::before,
.crystal-banner *::after,
.custom-blog-template *::after,
.crystal-single *::after {
	box-sizing: border-box;
}

.custom-blog-template,
.crystal-single {
	font-family: 'Inter', sans-serif;
	background: var(--crystal-gray-bg);
}

/* ==========================================================================
   Page banner — shared by the blog listings, single posts, blog.php and 404
   ========================================================================== */

.crystal-banner {
	background: linear-gradient(135deg, var(--crystal-blue-deep) 0%, var(--crystal-blue) 100%);
	font-family: 'Inter', sans-serif;
	padding: 30px 20px;
	text-align: center;
}
/* Breadcrumb-only banners stay slim; a heading earns the full height. */
.crystal-banner:has(.crystal-banner-heading) {
	padding: 76px 20px;
}
.crystal-banner-inner {
	max-width: var(--crystal-container);
	margin: 0 auto;
}

/* Deliberately larger than the 32px article <h1>: this is the page-level
   banner headline on the listings. */
.crystal-banner-heading {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 40px;
	line-height: 50px;
	color: #fff;
	margin: 0;
	overflow-wrap: break-word;
}

.crystal-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0;
	font-size: 0.85rem;
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: .02em;
	color: rgba(255, 255, 255, .72);
	overflow-wrap: break-word;
}
.crystal-banner-heading + .crystal-breadcrumb { margin-top: 16px; }
.crystal-breadcrumb a {
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	transition: color .15s ease;
}
.crystal-breadcrumb a:hover { color: var(--crystal-yellow); }
.crystal-breadcrumb-sep { color: rgba(255, 255, 255, .45); }
.crystal-breadcrumb-current { color: #fff; }

.crystal-banner-sub {
	max-width: 70ch;
	margin: 16px auto 0;
	font-size: 0.95rem;
	line-height: 1.6;
	color: rgba(255, 255, 255, .8);
}

/* Single posts: breadcrumb sits at the left edge of the container, not centred. */
.crystal-single .crystal-banner { text-align: left; }
.crystal-single .crystal-breadcrumb { justify-content: flex-start; }

/* ==========================================================================
   Elementor-built hero on the blog index

   Rendered by content-blog-archive.php from the Posts page's own content, and
   deliberately outside .custom-blog-template so Elementor sections can run full
   width and keep their own typography / background. Only image safety is
   enforced here — do not add styling that Elementor would have to fight.
   ========================================================================== */

.blog-elementor-hero { width: 100%; }
.blog-elementor-hero img { max-width: 100%; height: auto; }

/* ==========================================================================
   Blog listings — home.php, search.php, category.php, tag.php, archive.php
   (all render content-blog-archive.php), plus blog.php
   ========================================================================== */

.custom-blog-template .blog-container {
	max-width: var(--crystal-container);
	margin: 0 auto;
	padding: 50px 20px;
}

/* Layout: content + sidebar. Shared with single.php. */
.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 40px;
	align-items: start;
}
.blog-main { min-width: 0; }

/* Post grid */
.blog-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 26px;
}

/* Exactly one result — single full-width stacked card.
   Selector is deliberately more specific than the responsive .blog-grid rules
   in responsive.css, so it stays one column at every breakpoint. */
.custom-blog-template .blog-grid--single {
	grid-template-columns: 1fr;
}

.blog-card {
	background: #fff;
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 2px 14px rgba(22, 137, 207, 0.08);
	border: 1px solid #EAEEF2;
	display: flex;
	flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease;
}
.blog-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 10px 24px rgba(22, 137, 207, 0.16);
}
.blog-card-thumb {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
}
.blog-card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .3s ease;
}
.blog-card-thumb-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--crystal-blue) 0%, var(--crystal-orange) 100%);
	opacity: .85;
}
.blog-card:hover .blog-card-thumb img { transform: scale(1.05); }
.blog-card-body {
	padding: 20px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
.blog-card-meta {
	font-size: 0.72rem;
	font-weight: 500;
	color: #8a8f98;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	text-transform: uppercase;
	letter-spacing: .04em;
	flex-wrap: wrap;
}
.blog-card-cat a {
	color: #fff;
	background: var(--crystal-orange);
	padding: 3px 10px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 0.68rem;
	letter-spacing: .02em;
}
/* Card headings are an <h2> in the markup but a UI label, not body copy —
   sized independently of the article h2 below. */
.blog-card-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1.08rem;
	margin: 0 0 10px;
	line-height: 1.4;
	overflow-wrap: break-word;
}
.blog-card-title a { color: var(--crystal-charcoal); text-decoration: none; }
.blog-card-title a:hover { color: var(--crystal-blue); }
.blog-card-excerpt {
	color: #5b5f66;
	font-size: 0.9rem;
	line-height: 1.55;
	flex: 1;
	margin-bottom: 16px;
	overflow-wrap: break-word;
}
.blog-card-readmore {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--crystal-blue);
	text-decoration: none;
	align-self: flex-start;
	transition: color .15s ease;
}
.blog-card-readmore:hover { color: var(--crystal-orange); }

/* Wide variant of the card, used when a listing has a single result */
.blog-card--wide .blog-card-thumb { aspect-ratio: 21 / 9; }
.blog-card--wide .blog-card-body { padding: 28px 30px; }
.blog-card--wide .blog-card-meta { font-size: 0.75rem; margin-bottom: 12px; }
.blog-card--wide .blog-card-title {
	font-size: 1.5rem;
	line-height: 1.35;
	margin-bottom: 12px;
}
.blog-card--wide .blog-card-excerpt {
	font-size: 0.98rem;
	line-height: 1.65;
	max-width: 70ch;
	margin-bottom: 20px;
}
.blog-card--wide .blog-card-readmore { font-size: 0.9rem; }
/* A full-width block lifting off the page reads as a glitch, not a hover. */
.blog-card--wide:hover { transform: none; }

/* Pagination */
.blog-pagination {
	margin-top: 40px;
	display: flex;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
}
.blog-pagination .page-numbers {
	padding: 9px 15px;
	border-radius: 8px;
	background: #fff;
	border: 1px solid #E2E7ED;
	color: var(--crystal-charcoal);
	text-decoration: none;
	font-size: 0.9rem;
	font-weight: 500;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.blog-pagination .page-numbers.current {
	background: var(--crystal-blue);
	border-color: var(--crystal-blue);
	color: #fff;
}
.blog-pagination .page-numbers:hover:not(.current) {
	background: var(--crystal-blue);
	border-color: var(--crystal-blue);
	color: #fff;
}

/* Empty search / archive */
.blog-noresults {
	background: #fff;
	border: 1px solid #EAEEF2;
	border-radius: 14px;
	padding: 44px 30px;
	text-align: center;
	box-shadow: 0 2px 14px rgba(22, 137, 207, 0.06);
}
.blog-noresults h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1.3rem;
	line-height: 1.4;
	color: var(--crystal-charcoal);
	margin: 0 0 10px;
}
.blog-noresults p {
	color: #5b5f66;
	font-size: 0.94rem;
	line-height: 1.6;
	margin: 0 auto 22px;
	max-width: 440px;
	overflow-wrap: break-word;
}
.blog-noresults-form {
	max-width: 380px;
	margin: 0 auto;
}
.no-posts-found { text-align: center; color: #777; }

/* --------------------------------------------------------------------------
   Blog sidebar — shared by the listings and single posts.
   Blocks: Search, Categories, Recent Posts, Browse by Month, CTA.
   -------------------------------------------------------------------------- */

.blog-sidebar {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 22px;
	min-width: 0;
}
.side-block {
	background: #fff;
	border: 1px solid #EAEEF2;
	border-radius: 14px;
	padding: 20px;
	box-shadow: 0 2px 14px rgba(22, 137, 207, 0.06);
	min-width: 0;
}
.side-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--crystal-charcoal);
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 2px solid #F0F3F7;
	position: relative;
}
.side-title::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 42px;
	height: 2px;
	background: var(--crystal-orange);
}
.side-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Sidebar — search (form styling also reused by the 404 and no-results blocks) */
.side-searchform { display: flex; gap: 8px; }
.side-searchform input[type="search"] {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #E2E7ED;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 0.88rem;
	color: var(--crystal-charcoal);
	background: #fff;
}
.side-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--crystal-blue);
	box-shadow: 0 0 0 3px rgba(22, 137, 207, .12);
}
.side-searchform button {
	flex: 0 0 auto;
	padding: 0 15px;
	border: 0;
	border-radius: 8px;
	background: var(--crystal-blue);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	min-height: 40px;
	cursor: pointer;
	transition: background .15s ease;
}
.side-searchform button:hover { background: var(--crystal-orange); }

/* Sidebar — categories */
.side-cats { list-style: none; margin: 0; padding: 0; }
.side-cats li + li { border-top: 1px solid #F2F5F8; }
.side-cats a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	text-decoration: none;
	color: #4b5058;
	font-size: 0.9rem;
	transition: color .15s ease, padding-left .15s ease;
}
.side-cats a:hover { color: var(--crystal-blue); padding-left: 5px; }
.side-cat-name { min-width: 0; overflow-wrap: break-word; }
.side-count {
	flex: 0 0 auto;
	min-width: 26px;
	text-align: center;
	background: #F0F4F8;
	color: #7b828c;
	border-radius: 20px;
	padding: 2px 8px;
	font-size: 0.72rem;
	font-weight: 600;
}
.side-cats a:hover .side-count { background: var(--crystal-blue); color: #fff; }

/* Sidebar — recent posts */
.side-recent { list-style: none; margin: 0; padding: 0; }
.side-recent li + li { margin-top: 14px; padding-top: 14px; border-top: 1px solid #F2F5F8; }
.side-recent-link { display: flex; gap: 12px; text-decoration: none; align-items: center; }
.side-recent-thumb {
	flex: 0 0 64px;
	width: 64px;
	height: 64px;
	border-radius: 10px;
	overflow: hidden;
	display: block;
	background: #F0F4F8;
}
.side-recent-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-recent-thumb-fallback {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--crystal-blue) 0%, var(--crystal-orange) 100%);
	opacity: .85;
}
.side-recent-text { display: block; min-width: 0; }
.side-recent-title {
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.86rem;
	line-height: 1.4;
	color: var(--crystal-charcoal);
	margin-bottom: 4px;
	transition: color .15s ease;
	overflow-wrap: break-word;
}
.side-recent-link:hover .side-recent-title { color: var(--crystal-blue); }
.side-recent-date { display: block; font-size: 0.72rem; color: #9aa1ab; }

/* Sidebar — month filter */
.side-archives {
	width: 100%;
	max-width: 100%;
	padding: 10px 12px;
	border: 1px solid #E2E7ED;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 0.88rem;
	color: var(--crystal-charcoal);
	background: #fff;
	cursor: pointer;
}
.side-archives:focus {
	outline: none;
	border-color: var(--crystal-blue);
	box-shadow: 0 0 0 3px rgba(22, 137, 207, .12);
}

/* Sidebar — CTA */
.side-cta {
	background: linear-gradient(135deg, var(--crystal-blue-deep) 0%, var(--crystal-blue) 100%);
	border: 0;
	color: #fff;
	text-align: center;
}
.side-cta h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.4;
	margin: 0 0 8px;
	color: #fff;
}
.side-cta p {
	font-size: 0.86rem;
	line-height: 1.55;
	margin: 0 0 16px;
	color: rgba(255, 255, 255, .88);
}
.side-cta-btn {
	display: inline-block;
	max-width: 100%;
	background: var(--crystal-orange);
	color: #fff;
	font-weight: 600;
	font-size: 0.86rem;
	padding: 11px 20px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.side-cta-btn:hover {
	background: var(--crystal-yellow);
	color: var(--crystal-charcoal);
	transform: translateY(-2px);
}

/* ==========================================================================
   404 (404.php)
   Narrower than the listings — a dead end should not sprawl.
   ========================================================================== */

.crystal-404 {
	max-width: 900px;
	margin: 0 auto;
}
.crystal-404-card {
	background: #fff;
	border: 1px solid #EAEEF2;
	border-radius: 14px;
	padding: 52px 40px;
	text-align: center;
	box-shadow: 0 2px 14px rgba(22, 137, 207, 0.08);
}
.crystal-404-code {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 84px;
	line-height: 1;
	letter-spacing: -.02em;
	margin-bottom: 18px;
	/* Solid fallback first — see the @supports block below. */
	color: var(--crystal-blue);
}
/* Gradient numerals, but only where background-clip: text actually works.
   Applying "color: transparent" unconditionally would render invisible text
   in any engine that ignores the clip. */
@supports (background-clip: text) or (-webkit-background-clip: text) {
	.crystal-404-code {
		background: linear-gradient(135deg, var(--crystal-blue-deep) 0%, var(--crystal-blue) 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}
}
.crystal-404-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 26px;
	line-height: 36px;
	color: var(--crystal-charcoal);
	margin: 0 0 12px;
	overflow-wrap: break-word;
}
.crystal-404-text {
	font-size: 1rem;
	line-height: 1.7;
	color: #5b5f66;
	max-width: 52ch;
	margin: 0 auto 26px;
}
.crystal-404-form {
	max-width: 420px;
	margin: 0 auto 26px;
}
.crystal-404-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.crystal-404-btn {
	display: inline-block;
	max-width: 100%;
	background: var(--crystal-blue);
	border: 1px solid var(--crystal-blue);
	color: #fff;
	font-weight: 600;
	font-size: 0.9rem;
	padding: 12px 22px;
	border-radius: 8px;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.crystal-404-btn:hover {
	background: var(--crystal-blue-deep);
	border-color: var(--crystal-blue-deep);
	transform: translateY(-2px);
}
.crystal-404-btn--ghost {
	background: transparent;
	border-color: #CFE0EE;
	color: var(--crystal-blue);
}
.crystal-404-btn--ghost:hover {
	background: var(--crystal-orange);
	border-color: var(--crystal-orange);
	color: #fff;
}
.crystal-404-suggest-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 32px;
	color: var(--crystal-charcoal);
	margin: 46px 0 22px;
	text-align: center;
}

/* ==========================================================================
   Single post (single.php)
   Reuses .crystal-banner above and .blog-layout / .blog-main / .blog-sidebar.
   ========================================================================== */

.crystal-single { padding: 0 0 50px; }

.crystal-single .blog-container {
	max-width: var(--crystal-container);
	margin: 0 auto;
	padding: 40px 20px 0;
}

/* --------------------------------------------------------------------------
   Article card. Order: title → featured image → date/category → body.
   -------------------------------------------------------------------------- */

.crystal-single-container {
	max-width: none;
	margin: 0;
	background: #fff;
	border-radius: 14px;
	padding: 40px;
	box-shadow: 0 2px 14px rgba(22, 137, 207, 0.08);
	border: 1px solid #EAEEF2;
}

/* Article h1 */
.crystal-single-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 42px;
	color: var(--crystal-charcoal);
	margin: 0 0 20px;
	overflow-wrap: break-word;
}
.crystal-single-thumb {
	margin: 0 0 18px;
	border-radius: 10px;
	overflow: hidden;
}
.crystal-single-thumb img {
	width: 100%;
	height: auto;
	display: block;
}
.crystal-single-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	font-size: 0.75rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #8a8f98;
	margin: 0 0 26px;
}
.crystal-single-cat a {
	color: #fff;
	background: var(--crystal-orange);
	padding: 3px 10px;
	border-radius: 20px;
	text-decoration: none;
	font-size: 0.7rem;
}
.crystal-single-content {
	font-size: 1.02rem;
	line-height: 1.75;
	color: #333;
	max-width: 78ch;
	overflow-wrap: break-word;
}

/* --------------------------------------------------------------------------
   Headings inside post content.

   css/reset.css sets "font: inherit" on h1–h6, which wipes their size as well
   as their weight — without these rules editor headings render at body size and
   the article has no visible hierarchy.

   The scale is spaced so each level is obvious at a glance: 32 / 26 / 21 / 18,
   i.e. 6px, 5px and 3px steps rather than 2px gaps that made h2 and h3 look
   identical. Below ~18px size alone stops carrying the difference — body copy is
   ~16.3px Inter — so h5 and h6 lean on weight, the Poppins face and, for h6,
   uppercase tracking instead.
   -------------------------------------------------------------------------- */

.crystal-single-content h1,
.crystal-single-content h2,
.crystal-single-content h3,
.crystal-single-content h4,
.crystal-single-content h5,
.crystal-single-content h6 {
	font-family: 'Poppins', sans-serif;
	color: var(--crystal-charcoal);
	overflow-wrap: break-word;
}
.crystal-single-content h1 {
	font-size: 32px;
	line-height: 42px;
	font-weight: 700;
	margin: 40px 0 16px;
}
.crystal-single-content h2 {
	font-size: 26px;
	line-height: 36px;
	font-weight: 700;
	margin: 36px 0 14px;
}
.crystal-single-content h3 {
	font-size: 21px;
	line-height: 30px;
	font-weight: 600;
	margin: 30px 0 12px;
}
.crystal-single-content h4 {
	font-size: 18px;
	line-height: 28px;
	font-weight: 600;
	margin: 26px 0 10px;
}
.crystal-single-content h5 {
	font-size: 16px;
	line-height: 26px;
	font-weight: 700;
	margin: 22px 0 8px;
}
.crystal-single-content h6 {
	font-size: 14px;
	line-height: 22px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #5b616a;
	margin: 20px 0 8px;
}
/* A heading opening the article should not push a gap above itself. */
.crystal-single-content > :first-child { margin-top: 0; }

.crystal-single-content a { color: var(--crystal-blue); }
.crystal-single-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* Gutenberg blocks inside post content.
   Deliberately matched on the block's base class only — the instance classes
   Gutenberg adds (wp-block-gallery-1, is-layout-flex, columns-5, …) vary per
   gallery and per editor version, so keying off them would style one gallery
   and silently miss the rest. */
.crystal-single-content .wp-block-table {
	margin: 20px 0;
	/* A wide table scrolls inside its own box instead of widening the page. */
	max-width: 100%;
	overflow-x: auto;
}
.crystal-single-content .wp-block-image.size-full { margin: 20px 0; }
.crystal-single-content .wp-block-gallery { margin: 20px 0 0; }

.crystal-page-links {
	margin-top: 20px;
	font-size: 0.9rem;
}

/* The post's own tag list, in the article footer. This is NOT the sidebar
   "Popular Tags" block — that was removed. */
.crystal-single-footer { margin-top: 30px; }
.crystal-single-tags { font-size: 0.85rem; overflow-wrap: break-word; }
.crystal-single-tags a {
	color: var(--crystal-blue);
	text-decoration: none;
	margin-right: 6px;
}

/* --------------------------------------------------------------------------
   Prev / next post navigation — two cards.
   The next card is pinned to column 2 so it stays on the right even when
   there is no previous post.
   -------------------------------------------------------------------------- */

.crystal-single-nav {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
	padding-top: 28px;
	border-top: 1px solid #EAEEF2;
}
.crystal-nav-link {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	padding: 16px 18px;
	border: 1px solid #E7ECF2;
	border-radius: 12px;
	background: #FAFCFE;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.crystal-nav-link:hover {
	border-color: var(--crystal-blue);
	background: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(22, 137, 207, 0.12);
}
.crystal-nav-next {
	grid-column: 2;
	text-align: right;
	align-items: flex-end;
}
.crystal-nav-label {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--crystal-orange);
}
.crystal-nav-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--crystal-charcoal);
	transition: color .15s ease;
	overflow-wrap: break-word;
}
.crystal-nav-link:hover .crystal-nav-title { color: var(--crystal-blue); }

/* ==========================================================================
   [customtravel_form] — "Customize Your India Tour"

   Moved here from Appearance > Customize > Additional CSS. Two things that
   were learned there and still matter:

   1. Field spacing uses flexbox gap on the container, not margins on children.
      The Customizer escaped the child combinator on save, so ".space-y-4 > div
      + div" arrived as "&gt;" and was silently dropped. Gap has no such
      problem, and is now the house style for this form either way.

   2. ".travel-form input { width: 100%; height: 44px }" also matches the
      destination checkboxes and inflates each into a full-width 44px box. The
      [type="checkbox"] rule below is more specific, so it wins.

   The utility class names in the markup (space-y-4, flex items-center) come
   from the live site, where Tailwind is loaded. It is not loaded here, so the
   ones that carry layout are given real rules.
   ========================================================================== */

.travel-form {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	background: #fff;
	border: 1px solid #EAEEF2;
	border-radius: 14px;
	box-shadow: 0 2px 14px rgba(22, 137, 207, 0.08);
	padding: 40px;
	box-sizing: border-box;
}
.travel-form *,
.travel-form *::before,
.travel-form *::after {
	box-sizing: border-box;
}

.travel-form h2 {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
	font-size: 30px;
	line-height: 40px;
	color: var(--crystal-charcoal);
	text-align: center;
	margin: 0 0 34px;
}

/* Section columns */
.travel-form .formwrapper {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}
.travel-form .space-y {
	width: 100%;
	background: var(--crystal-gray-bg);
	border: 1px solid #EAEEF2;
	border-radius: 12px;
	padding: 26px 24px;
}
/* Section heading: "1 Destinations" — a plain number, not a badge. */
.travel-form .space-y h3 {
	font-family: 'Poppins', sans-serif;
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: var(--crystal-charcoal);
	margin: 0 0 24px;
}
.travel-form .number-circle {
	display: inline;
	margin-right: 7px;
	font-weight: 700;
	color: var(--crystal-blue);
}

/* Fields */
.travel-form .space-y-4 {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.travel-form label {
	font-family: 'Inter', sans-serif;
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: #4b5058;
}
.travel-form input,
.travel-form select,
.travel-form textarea {
	width: 100%;
	box-sizing: border-box;
	border: 1px solid #E2E7ED;
	border-radius: 8px;
	background: #fff;
	color: var(--crystal-charcoal);
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	padding: 10px 12px;
	outline: none;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.travel-form input,
.travel-form select { height: 44px; }
.travel-form textarea {
	min-height: 104px;
	resize: vertical;
	display: block;
}
.travel-form input::placeholder,
.travel-form textarea::placeholder { color: #9aa1ab; }
.travel-form input:focus,
.travel-form select:focus,
.travel-form textarea:focus {
	border-color: var(--crystal-blue);
	box-shadow: 0 0 0 3px rgba(22, 137, 207, .12);
}

/* Destination list: capped and scrollable, so adding entries to the
   $destinations array in functions.php never makes this column — and therefore
   the page — any taller. 420px clears the current 15 rows, so nothing scrolls
   today; item 16 onwards goes behind the scrollbar. */
.travel-form .space-y .grid {
	display: flex;
	flex-direction: column;
	gap: 13px;
	max-height: 420px;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-right: 8px;
	scrollbar-width: thin;
	scrollbar-color: #C9D4DE transparent;
}
.travel-form .space-y .grid::-webkit-scrollbar { width: 6px; }
.travel-form .space-y .grid::-webkit-scrollbar-track { background: transparent; }
.travel-form .space-y .grid::-webkit-scrollbar-thumb {
	background: #C9D4DE;
	border-radius: 3px;
}
.travel-form .space-y .grid::-webkit-scrollbar-thumb:hover { background: var(--crystal-blue); }

.travel-form .space-y .flex {
	display: flex;
	align-items: center;
	gap: 10px;
}
.travel-form .space-y .flex label {
	margin: 0;
	font-weight: 500;
	font-size: 14px;
	color: #4b5058;
	cursor: pointer;
	transition: color .15s ease;
}
.travel-form .space-y .flex label:hover { color: var(--crystal-blue); }
.travel-form input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	min-height: 0;
	margin: 0;
	padding: 0;
	accent-color: var(--crystal-blue);
	cursor: pointer;
}

/* Submit */
.travel-form .btnwrapper {
	width: 100%;
	margin-top: 40px;
	display: flex;
	justify-content: center;
}
.travel-form .submit-form {
	width: auto;
	min-width: 190px;
	min-height: 46px;
	border: 0;
	border-radius: 8px;
	background: var(--crystal-orange);
	color: #fff;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	padding: 13px 40px;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(246, 139, 45, .25);
	transition: background .2s ease, transform .2s ease;
}
.travel-form .submit-form:hover {
	background: #E07A1C;
	transform: translateY(-1px);
}
.travel-form .submit-form:disabled {
	opacity: .7;
	cursor: not-allowed;
	transform: none;
}