/* ==========================================================================
   Odisha Careers: responsive layer (loads last, on every page)
   1. Overflow safety   2. Header   3. Content   4. Touch targets
   5. Sticky Apply bar  6. Wide screens   7. Landscape phones   8. Print
   ========================================================================== */

/* ==========================================================================
   1. Overflow safety
   `clip` hides stray overflow without creating a scroll container, so the
   sticky header keeps working. Find the real cause with the audit snippet.
   ========================================================================== */
.oc-site { overflow-x: clip; }

.oc-breadcrumb__item { max-width: 100%; }
.oc-breadcrumb__item[aria-current="page"] span {
	max-width: min(46ch, calc(100vw - (2 * var(--oc-gutter))));
}

.oc-archive-head__count { max-width: 100%; border-radius: 16px; line-height: 1.4; }
.oc-cat__name,
.oc-side-links__label,
.oc-facts__value { overflow-wrap: anywhere; }

/* ==========================================================================
   2. Header
   ========================================================================== */
.oc-logo__text { min-width: 0; overflow: hidden; }
.oc-logo__tagline { max-width: 100%; }

@media (min-width: 1024px) and (max-width: 1199.98px) {
	.oc-menu { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 359px) {
	.oc-header__inner { gap: 6px; }
	.oc-logo { gap: 8px; }
	.oc-logo__mark { width: 34px; height: 34px; font-size: 0.9375rem; }
	.oc-logo__name { font-size: 0.9375rem; }
	.oc-icon-btn { min-width: 42px; padding: 0 8px; }
}

/* ==========================================================================
   3. Content (articles, Gutenberg blocks)
   ========================================================================== */
.oc-entry-content a { overflow-wrap: anywhere; }

.oc-entry-content .alignwide,
.oc-entry-content .alignfull { max-width: 100%; margin-inline: 0; }

.oc-entry-content .wp-block-image img,
.oc-entry-content .wp-block-video video { max-width: 100%; height: auto; }

.oc-entry-content .wp-block-embed iframe,
.oc-entry-content .wp-block-embed__wrapper iframe { max-width: 100%; }

@media (max-width: 599px) {
	.oc-entry-content .alignleft,
	.oc-entry-content .alignright {
		float: none;
		display: block;
		margin: 1em auto;
	}
	.oc-entry-content { font-size: 1rem; line-height: 1.7; }
	.oc-entry-content pre { font-size: 0.8125rem; }
	.oc-article { padding: 14px; }
}

/* ==========================================================================
   4. Touch targets and touch-screen behaviour
   ========================================================================== */
@media (pointer: coarse) {
	.oc-btn--sm { min-height: 44px; padding: 8px 14px; }
	.oc-card__more { min-height: 44px; }
	.oc-widget__more { min-height: 44px; }
	.oc-footer__menu a { min-height: 44px; }
	.oc-footer__social a { min-height: 44px; }
	.oc-side-links a { min-height: 44px; }
	.oc-article__badges .oc-chip--link { min-height: 36px; padding-inline: 12px; }
	.oc-section__link { display: inline-flex; align-items: center; min-height: 44px; }
	.oc-row { padding-block: 12px; }
}

@media (hover: none) {
	.oc-card:hover,
	.oc-cat:hover { transform: none; box-shadow: var(--oc-shadow-sm); }
}

/* ==========================================================================
   5. Sticky Apply bar (single online jobs, below 1024px)
   Markup: inc/jobs.php. Visibility: assets/js/apply-bar.js.
   ========================================================================== */
.oc-applybar { display: none; }

@media (max-width: 1023.98px) {
	.oc-applybar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		display: block;
		padding: 10px var(--oc-gutter) calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--oc-border-strong);
		background: #fff;
		box-shadow: 0 -4px 16px rgba(11, 31, 58, 0.14);
	}

	/* With JavaScript the bar slides in only while the main Apply button is off-screen.
	   Hidden state uses visibility, so the link leaves the tab order. */
	.oc-js .oc-applybar {
		visibility: hidden;
		transform: translateY(100%);
		transition: transform 0.2s ease, visibility 0s linear 0.2s;
	}
	.oc-js .oc-applybar.is-visible {
		visibility: visible;
		transform: none;
		transition: transform 0.2s ease;
	}

	.oc-has-apply-bar .oc-footer { padding-bottom: 84px; }
}

.oc-applybar__inner { display: flex; align-items: center; gap: 12px; max-width: var(--oc-container); margin-inline: auto; }
.oc-applybar__text { flex: 1 1 auto; min-width: 0; }

.oc-applybar__title {
	display: block;
	overflow: hidden;
	color: var(--oc-navy);
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.oc-applybar__meta { display: block; color: var(--oc-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.4; }
.oc-applybar__meta--urgent { color: #9a3412; }

.oc-applybar__btn { flex: none; min-height: 48px; padding-inline: 20px; text-transform: uppercase; letter-spacing: 0.04em; }

/* ==========================================================================
   6. Wide screens (opt-in: add_filter( 'odisha_careers_wide_layout', '__return_true' ))
   Homepage only. Below 1600px the two extra cards per grid are hidden so
   the 4-column grids still end on a full row.
   ========================================================================== */
@media (min-width: 1600px) {
	body.oc-wide.home { --oc-container: 1520px; }
}

@media (max-width: 1599.98px) {
	body.oc-wide.home .oc-home-section--jobs .oc-grid > :nth-child(n+9),
	body.oc-wide.home .oc-home-section--updates .oc-grid > :nth-child(n+9) { display: none; }
}

/* ==========================================================================
   7. Short landscape screens (phones turned sideways)
   ========================================================================== */
@media (max-width: 1023.98px) and (max-height: 500px) and (orientation: landscape) {
	.oc-header { position: relative; }
	.oc-nav__panel { max-height: 70vh; max-height: 70dvh; }
	.oc-applybar { padding-block: 6px; }
}

/* ==========================================================================
   8. Print (job pages and posts)
   ========================================================================== */
@media print {
	@page { margin: 14mm; }

	.oc-header,
	.oc-footer,
	.oc-sidebar,
	.oc-skip-link,
	.oc-share,
	.oc-follow,
	.oc-google,
	.oc-newsletter,
	.oc-related,
	.oc-notify,
	.oc-applybar,
	.oc-breadcrumb,
	.oc-actions__buttons,
	.oc-edit,
	.oc-page-links { display: none !important; }

	body.oc-theme { background: #fff; color: #000; font-size: 11pt; }
	.oc-layout { display: block; }
	.oc-article { padding: 0; border: 0; box-shadow: none; }
	.oc-summary,
	.oc-keydetails,
	.oc-links,
	.oc-table-wrap,
	.oc-entry-content table { break-inside: avoid; }

	.oc-entry-content a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
	.oc-linkbtn { border: 0; padding: 2pt 0; min-height: 0; }
	.oc-linkbtn::after { content: " — " attr(href); font-size: 9pt; font-weight: 400; word-break: break-all; }
	.oc-table-wrap { overflow: visible; border: 0; }
	.oc-entry-content table { min-width: 0; }
}