/*
 * Chandan Digital - Responsive Stylesheet
 *
 * Two jobs, in this order:
 *
 * 1. Containment. Nothing on any page may be wider than the viewport. The rules in
 *    section 1 are deliberately blunt and come first, because a single overflowing
 *    element is what makes a phone page drift left and right as you scroll.
 * 2. Layout. Breakpoints at 1600, 1280, 1024, 834, 768, 600, 480, 414, 360 and 320.
 *    Most grids are auto-fit in main.css and reflow on their own; the breakpoints
 *    below handle the parts that genuinely need a decision (navigation, two-column
 *    sections, typography and absolutely positioned decoration).
 */

/* =========================================================
   1. HORIZONTAL OVERFLOW CONTAINMENT
   ========================================================= */

/* The root element clamps the viewport's horizontal scroll. It has to stay `hidden`:
   the root's overflow propagates to the viewport, and a viewport whose horizontal
   axis is `clip` refuses to scroll vertically too. The body then uses `clip` where
   it is supported, because clip contains a stray wide child without turning the body
   into a scroll container - which is what would break the sticky header. */
html { overflow-x: hidden; }
body { width: 100%; max-width: 100%; overflow-x: hidden; }
@supports (overflow: clip) {
	body { overflow-x: clip; }
}

/* Replaced media never widens its column. */
img, svg, video, canvas, iframe, embed, object, audio { max-width: 100%; }
img, video { height: auto; }

/* Embeds (YouTube, Maps, tweets) fill their column instead of a fixed pixel width. */
.wp-block-embed__wrapper iframe,
.cd-rich-text iframe,
.entry-content iframe { width: 100%; max-width: 100%; }

/* Tables scroll inside their own box. display: block is scoped to the wrapper the
   theme adds around content tables so real table layout is preserved everywhere
   else - the previous global rule also broke comment and widget tables. */
.cd-table-scroll {
	display: block;
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.cd-table-scroll > table { min-width: 480px; }
@media (max-width: 480px) {
	.cd-table-scroll > table { min-width: 420px; }
}
.cd-rich-text .wp-block-table,
.cd-rich-text figure.wp-block-table { max-width: 100%; overflow-x: auto; }

/* Code, preformatted text and long unbroken strings. */
pre, code, kbd, samp { max-width: 100%; }
pre { overflow-x: auto; }
.cd-rich-text code { overflow-wrap: break-word; }

/* Anything the editor or a plugin drops in that is still too wide. */
.cd-rich-text > *,
.entry-content > * { max-width: 100%; }

/* Full-bleed blocks stay inside the viewport. The usual margin-left: calc(50% - 50vw)
   trick adds a scrollbar width of overflow on desktop, so it is neutralised here. */
.cd-rich-text .alignfull,
.entry-content .alignfull { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; }
.cd-rich-text .alignwide,
.entry-content .alignwide { max-width: 100%; }

/* Floated images stop floating once there is no room for text beside them. */
@media (max-width: 600px) {
	.cd-rich-text .alignleft,
	.cd-rich-text .alignright,
	.entry-content .alignleft,
	.entry-content .alignright { float: none; margin-left: 0; margin-right: 0; display: block; }
}

/* Form controls inherit the box, never their default intrinsic width. */
input, select, textarea, button { max-width: 100%; }
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], input[type="number"], input[type="password"], textarea, select {
	width: 100%;
	min-width: 0;
}

/* Flex and grid items default to min-width: auto, which is how a single wide child
   stretches a whole row past the viewport. */
.cd-header-inner > *,
.cd-hero-inner > *,
.cd-about-inner > *,
.cd-contact-inner > *,
.cd-content-area > *,
.cd-post-inner > *,
.cd-service-page-inner > *,
.cd-footer-grid > * { min-width: 0; }

/* =========================================================
   2. LARGE DESKTOP (1600px and up)
   ========================================================= */
@media (min-width: 1600px) {
	.cd-container { max-width: calc(var(--cd-container-width) + 100px); }
}

/* =========================================================
   3. SMALL DESKTOP / LARGE LAPTOP (1280px and below)
   ========================================================= */
@media (max-width: 1280px) {
	.cd-why-choose-grid,
	.cd-team-grid,
	.cd-stats-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* =========================================================
   4. LAPTOP / LANDSCAPE TABLET (1024px and below)
   ========================================================= */
@media (max-width: 1024px) {
	.cd-hero-inner,
	.cd-about-inner,
	.cd-contact-inner { grid-template-columns: minmax(0, 1fr); }
	.cd-hero-visual { order: -1; max-width: min( 420px, 100% ); margin: 0 auto; }
	.cd-content-area { grid-template-columns: minmax(0, 1fr); }
	.cd-content-area .cd-sidebar { order: 2; }
	.cd-team-single-grid { grid-template-columns: minmax(0, 1fr); }
	.cd-team-single-photo { max-width: min( 320px, 100% ); margin: 0 auto; }
	.cd-portfolio-grid,
	.cd-blog-grid,
	.cd-testimonials-track,
	.cd-pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Decorative cards float over the hero image; at this width there is no longer
	   room outside the column for them, so pull them back inside it. */
	.cd-float-1 { left: 0; }
	.cd-float-2 { right: 0; }
	.cd-hero-floating-card { max-width: min(230px, 70%); }
	.cd-about-badge { right: 0; bottom: 0; }
}

/* =========================================================
   5. TABLET (834px and below) - desktop nav gives way to the hamburger
   ========================================================= */
@media (max-width: 834px) {
	.cd-primary-navigation { display: none; }
	.cd-hamburger { display: flex; }
	.cd-header-cta { display: none; }
	.cd-portfolio-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cd-why-choose-grid,
	.cd-team-grid,
	.cd-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cd-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-md) var(--cd-space-lg); }
}

/* =========================================================
   6. PORTRAIT TABLET / LARGE PHONE (768px and below)
   ========================================================= */
@media (max-width: 768px) {
	:root { --cd-header-height: 68px; --cd-space-2xl: 64px; --cd-space-xl: 40px; }
	.cd-hero { padding-top: calc(var(--cd-space-xl) + 20px); }
	.cd-hero-floating-card { display: none; }
	.cd-about-badge { position: static; margin-top: -40px; display: inline-flex; flex-direction: column; }

	/* Cards get a little more breathing room once they are wider than a column. */
	.cd-process-step,
	.cd-service-card { padding: var(--cd-space-md); }
	.cd-process-icon { width: 50px; height: 50px; margin-top: 10px; }

	.cd-footer-body { padding-top: var(--cd-space-lg); }
	.cd-footer-grid { gap: var(--cd-space-lg) var(--cd-space-md); padding-bottom: var(--cd-space-lg); }
	.cd-footer-glow-1 { width: min(320px, 70%); opacity: 0.4; }
	.cd-footer-glow-2 { width: min(280px, 62%); }
}

/* =========================================================
   7. PHONE (600px and below)
   ========================================================= */
@media (max-width: 600px) {
	.cd-why-choose-grid,
	.cd-team-grid,
	.cd-portfolio-grid,
	.cd-blog-grid,
	.cd-testimonials-track,
	.cd-pricing-grid { grid-template-columns: minmax(0, 1fr); }

	/* The Google rating summary stacks rather than squeezing four items onto a row. */
	.cd-greviews-summary {
		flex-direction: column;
		text-align: center;
		gap: var(--cd-space-sm);
		padding: var(--cd-space-md);
	}
	.cd-greviews-score { justify-content: center; }
	.cd-greviews-cta { width: 100%; }
	.cd-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cd-space-sm); }
	.cd-section-heading { margin-bottom: var(--cd-space-lg); }
}

/* =========================================================
   8. SMALL PHONE (480px and below) - single column everywhere
   ========================================================= */
@media (max-width: 480px) {
	.cd-container { padding-inline: 16px; }

	.cd-services-grid,
	.cd-why-choose-grid,
	.cd-team-grid,
	.cd-stats-grid,
	.cd-process-timeline,
	.cd-portfolio-grid,
	.cd-blog-grid,
	.cd-testimonials-track,
	.cd-pricing-grid,
	.cd-footer-grid,
	.cd-portfolio-meta-grid { grid-template-columns: minmax(0, 1fr); }

	.cd-hero-title { font-size: 2rem; }
	.cd-hero-buttons { flex-direction: column; align-items: stretch; }
	.cd-hero-buttons .btn { width: 100%; }
	.cd-hero-trust { flex-direction: column; gap: 8px; }

	/* A long button label wraps instead of forcing the page wider. */
	.btn { white-space: normal; text-align: center; }

	.cd-pricing-card.is-recommended { transform: none; }
	.cd-footer-bottom-inner { flex-direction: column; text-align: center; }
	.cd-footer-legal a { margin: 0 8px; }
	.cd-footer-social a { width: 40px; height: 40px; }

	.cd-mobile-nav { width: min(340px, 88%); }
	.cd-back-to-top { bottom: 16px; right: 16px; width: 42px; height: 42px; }

	.cd-404-code { font-size: 4rem; }
}

/* =========================================================
   9. 414px / 390px / 375px / 360px / 320px - text and spacing tuning
   ========================================================= */
@media (max-width: 414px) {
	body { font-size: 15px; }
	.cd-section-title { font-size: 1.5rem; }
	.btn { padding: 12px 20px; font-size: 0.9rem; }
	.cd-team-photo img { aspect-ratio: 1/1; }
	.cd-process-number { font-size: 1.7rem; }
}

@media (max-width: 360px) {
	.cd-hero-title { font-size: 1.7rem; }
	.cd-eyebrow { font-size: 0.75rem; }
	.cd-stat-number { font-size: 1.7rem; }
	.cd-stats-grid { grid-template-columns: minmax(0, 1fr); }
	.cd-footer-social a { width: 38px; height: 38px; }
}

@media (max-width: 320px) {
	:root { --cd-space-md: 18px; --cd-space-lg: 28px; }
	.cd-container { padding-inline: 12px; }
	.cd-process-icon,
	.cd-service-icon { width: 48px; height: 48px; }
	.cd-table-scroll > table { min-width: 0; }
}

/* =========================================================
   10. RESPONSIVE LOGO SIZING
   Below 768px the theme swaps to the dedicated mobile logo when one is uploaded,
   and otherwise narrows the main logo to the mobile width setting.
   ========================================================= */
@media (max-width: 768px) {
	.cd-logo { max-width: var(--cd-logo-width-mobile, 140px); max-height: 44px; }
	.custom-logo { max-width: var(--cd-logo-width-mobile, 140px); max-height: 44px; }
	.cd-logo-desktop-only { display: none; }
	.cd-logo-mobile-only { display: block; }
	.cd-site-title-inline { display: none; }
}

@media (max-width: 1024px) and (min-width: 769px) {
	/* Tablet: keep the logo from crowding the nav. */
	.cd-logo,
	.custom-logo { max-width: min(var(--cd-logo-width, 180px), 160px); }
}

/* =========================================================
   11. TOUCH AND PRINT
   ========================================================= */
@media (hover: none) {
	/* Hover lifts are meaningless on touch and leave cards stuck mid-transform. */
	.cd-service-card:hover,
	.cd-process-step:hover,
	.cd-portfolio-card:hover,
	.cd-blog-card:hover { transform: none; }
}

@media print {
	.cd-header, .cd-mobile-nav, .cd-search-overlay, .cd-back-to-top,
	.cd-footer-curve, .cd-footer-glow, .cd-share { display: none !important; }
	.cd-footer-body { background: none; color: #000; }
}


/* ---------- Article and service content on small screens ----------
   Tables already scroll inside the .cd-table-scroll wrapper the theme adds
   around them, so the table itself must NOT become a second scroll container:
   nesting the two made the table wider than its own wrapper and pushed the
   first column out of reach. The wrapper does the scrolling; the cells simply
   wrap their text. */
@media (max-width: 768px) {
	.cd-rich-text th,
	.cd-rich-text td {
		padding: 10px 12px;
		vertical-align: top;
	}

	/* The first column labels every row, so it stays pinned while the rest of a
	   comparison table scrolls - without it you scroll across and lose track of
	   which row you are reading. A shadow draws the divider because collapsed
	   table borders do not paint reliably on a sticky cell. */
	.cd-table-scroll th:first-child,
	.cd-table-scroll td:first-child {
		position: sticky;
		left: 0;
		z-index: 1;
		background: var(--cd-bg-alt-color);
		box-shadow: 1px 0 0 var(--cd-border-color);
	}

	/* Deeply nested table-of-contents entries lose most of the line to
	   indentation on a narrow screen, so tighten the steps. */
	.cd-toc-level-3 a { padding-left: 24px; }
	.cd-toc-level-4 a { padding-left: 34px; }
	.cd-toc-level-5 a { padding-left: 44px; }
	.cd-toc-level-6 a { padding-left: 54px; }
}

/* ---------- Client logo strip on small screens ---------- */
@media (max-width: 768px) {
	.cd-logo-strip { gap: var(--cd-space-md) var(--cd-space-lg); }
	.cd-logo-strip img,
	.cd-client-logo { max-height: 32px; max-width: 120px; }
}