/* ==========================================================================
   CareerHike — responsive fixes for every screen (phones 320px → large
   desktops). Loaded after Elementor, so it only adjusts sizes; the homepage
   content itself stays editable in Elementor.
   ========================================================================== */

/* No sideways scrolling on any device */
body { max-width: 100%; overflow-x: hidden; }
/* 'clip' stops the sideways scrollbar without breaking the sticky header */
@supports (overflow-x: clip) {
	html, body { overflow-x: clip !important; }
}
img, video, iframe, embed { max-width: 100%; }
body .elementor img { height: auto; }

/* Readable card text on desktop too (was 8–10px) */
body .ch-explore .ch-badge { font-size: 9.5px; }
body .ch-explore .ch-card-name { font-size: 12px; }
body .ch-explore .ch-card-btn { font-size: 11px; padding: 7px 6px; }
body .ch-explore .ch-sidebar-item .cat-sub { font-size: 10.5px; }
body .ch-tools .ch-tool-badge { font-size: 9.5px; }
body .ch-tools .ch-tool-name { font-size: 12px; }
body .ch-tools .ch-tool-btn { font-size: 11px; padding: 7px 6px; }
body .ch-uni-widget .ch-uni-name { font-size: 11.5px; }
body .ch-uni-widget .ch-explore-btn { font-size: 10.5px; }

/* ---------- Tablets (≤1024px) ---------- */
@media (max-width: 1024px) {
	body .ch-tools .ch-tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Large phones / small tablets (≤782px) ---------- */
@media (min-width: 600px) and (max-width: 782px) {
	/* room for the Sign Up button next to Compare */
	body .mud-hf-header .mud-hf-login-btn { display: inline-flex !important; font-size: 12px; padding: 6px 12px; border-radius: 6px; }
}
@media (max-width: 782px) {
	body .ch-explore .ch-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	body .ch-explore .ch-card-icon { font-size: 22px; }
	body .ch-explore .ch-card-top { padding: 7px 6px 4px; }
	body .ch-explore .ch-badge { font-size: 9px; padding: 2px 6px; white-space: normal; text-align: center; }
	body .ch-explore .ch-card-name { font-size: 12px; line-height: 1.3; padding: 4px 2px 7px; }
	body .ch-explore .ch-card-btn { font-size: 11px; padding: 7px 4px; letter-spacing: 0; }
	body .ch-explore .ch-sidebar-item .cat-title { font-size: 13px; }

	body .ch-tools .ch-tools-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
	body .ch-tools .ch-tool-icon { font-size: 22px; }
	body .ch-tools .ch-tool-card-top { padding: 7px 6px 4px; }
	body .ch-tools .ch-tool-badge { font-size: 9px; padding: 2px 6px; }
	body .ch-tools .ch-tool-name { font-size: 12px; line-height: 1.3; padding-bottom: 7px; }
	body .ch-tools .ch-tool-btn { font-size: 11px; padding: 7px 4px; letter-spacing: 0; }

	body .ch-uni-widget .ch-uni-name { font-size: 11px; }
	body .ch-uni-widget .ch-explore-btn { font-size: 10px; padding: 3px 9px; }

	/* section headings: readable pill, heading may wrap instead of overflowing */
	body .ch-uni-heading .ch-heading-pill,
	body .ch-heading-row .ch-heading-pill { font-size: 11.5px !important; padding: 7px 12px 7px 10px !important; }
	body .ch-uni-heading .ch-heading-title,
	body .ch-heading-row .ch-heading-title { white-space: normal; font-size: 24px; line-height: 1.2; }
	body .ch-tools .ch-eyebrow { font-size: 11.5px; }

	body .ch-blog-heading-row { flex-wrap: wrap; row-gap: 12px; }
	body .ch-blog-pill { font-size: 11.5px !important; }
	body .ch-blog-title { white-space: normal; font-size: 24px; line-height: 1.2; }
	body .ch-blog-btn { width: auto; height: auto; padding: 9px 16px; font-size: 11.5px; }
}

/* ---------- Phones (≤480px) ---------- */
@media (max-width: 480px) {
	body .ch-explore .ch-grid,
	body .ch-tools .ch-tools-grid { gap: 6px; }
	body .ch-explore .ch-badge,
	body .ch-tools .ch-tool-badge { font-size: 8.5px; padding: 2px 5px; }
	body .ch-explore .ch-card-name,
	body .ch-tools .ch-tool-name { font-size: 11.5px; }
	body .ch-explore .ch-card-btn,
	body .ch-tools .ch-tool-btn { font-size: 10.5px; padding: 6px 3px; }
	body .ch-explore .ch-card-icon,
	body .ch-tools .ch-tool-icon { font-size: 20px; }
	body .ch-explore .ch-sidebar-item .cat-title { font-size: 12.5px; }

	body .ch-uni-heading .ch-heading-title,
	body .ch-heading-row .ch-heading-title,
	body .ch-blog-title,
	body .ch-tools .ch-heading { font-size: 22px; }

	body .elementor-widget-heading .elementor-heading-title { overflow-wrap: anywhere; }
	body .elementor-element-364859d .elementor-heading-title { font-size: 28px !important; line-height: 1.2 !important; }
}

/* ---------- Small phones (≤360px) ---------- */
@media (max-width: 360px) {
	body .ch-explore .ch-badge,
	body .ch-tools .ch-tool-badge { font-size: 8px; padding: 1px 4px; }
	body .ch-explore .ch-card-name,
	body .ch-tools .ch-tool-name { font-size: 11px; }
	body .ch-explore .ch-card-btn,
	body .ch-tools .ch-tool-btn { font-size: 10px; }
	body .ch-uni-widget .ch-uni-name { font-size: 10.5px; }
	body .ch-uni-heading .ch-heading-title,
	body .ch-heading-row .ch-heading-title,
	body .ch-blog-title,
	body .ch-tools .ch-heading { font-size: 20px; }
	body .elementor-element-364859d .elementor-heading-title { font-size: 25px !important; }
}

/* ---------- Large screens (≥1600px): keep content centred, not stretched ---------- */
@media (min-width: 1600px) {
	body .ch-explore .ch-wrapper { max-width: 1280px; }
}