/* ==========================================================================
   Elementor design polish for MSU Library Pro
   --------------------------------------------------------------------------
   A global baseline that makes every Elementor-built page read as part of
   the theme: theme fonts (enforced), a consistent type scale and vertical
   rhythm, tidy buttons / links / images, and safe width + mobile behaviour.

   Everything is scoped to `.elementor` / `body.elementor-page` so ordinary
   (non-Elementor) pages are untouched. Loaded AFTER Elementor's own CSS.
   `:where()` is used wherever a rule should be a *default* that any explicit
   per-widget setting still overrides.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts — the theme families, made to stick
   Elementor stores a font family on many individual widgets; !important on
   these few family declarations is the reliable way to beat the per-widget
   <style> blocks Elementor injects.
   -------------------------------------------------------------------------- */

body.elementor-page,
body.elementor-page .elementor-widget-text-editor,
body.elementor-page .elementor-widget-text-editor .elementor-widget-container,
body.elementor-page .elementor-widget-text-editor p,
body.elementor-page .elementor-widget-text-editor li,
body.elementor-page .elementor-widget-text-editor td,
body.elementor-page .elementor-widget-text-editor th,
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-text,
body.elementor-page .elementor-widget-icon-box .elementor-icon-box-content,
body.elementor-page .elementor-widget-icon-box .elementor-icon-box-description,
body.elementor-page .elementor-tab-title,
body.elementor-page .elementor-tab-content,
body.elementor-page .elementor-toggle .elementor-tab-title,
body.elementor-page .elementor-toggle .elementor-tab-content,
body.elementor-page .elementor-widget-button .elementor-button,
body.elementor-page .elementor-button,
body.elementor-page .elementor-widget-form,
body.elementor-page .elementor-field-group,
body.elementor-page .elementor-widget-nav-menu,
body.elementor-page .elementor-nav-menu a {
	font-family: var(--sans) !important;
}

body.elementor-page .elementor h1,
body.elementor-page .elementor h2,
body.elementor-page .elementor h3,
body.elementor-page .elementor h4,
body.elementor-page .elementor h5,
body.elementor-page .elementor h6,
body.elementor-page .elementor-heading-title,
body.elementor-page .elementor-widget-heading .elementor-heading-title,
body.elementor-page .elementor-icon-box-title,
body.elementor-page .elementor-image-box-title,
body.elementor-page .elementor-post__title,
body.elementor-page .elementor-widget-theme-post-title .elementor-heading-title,
body.elementor-page .elementor-price-table__title,
body.elementor-page .elementor-cta__title {
	font-family: var(--serif) !important;
}

/* (Icon fonts — Font Awesome / eicons — set their own family on the <i>/<svg>
   itself, so the family rules above never reach a glyph.) */

/* --------------------------------------------------------------------------
   2. Type scale + vertical rhythm (defaults — explicit widget sizes win)
   -------------------------------------------------------------------------- */

body.elementor-page :where(.elementor-heading-title) {
	line-height: 1.18;
	color: var(--ink);
	text-wrap: balance;
	margin: 0;
}

body.elementor-page :where(.elementor-widget-heading) {
	margin-bottom: 0;
}

body.elementor-page :where(h1.elementor-heading-title) { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem); }
body.elementor-page :where(h2.elementor-heading-title) { font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.35rem); }
body.elementor-page :where(h3.elementor-heading-title) { font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); }
body.elementor-page :where(h4.elementor-heading-title) { font-size: clamp(1.1rem, 1rem + .4vw, 1.3rem); }

body.elementor-page :where(.elementor-widget-text-editor) {
	color: var(--ink);
	line-height: 1.7;
	font-size: clamp(1rem, .97rem + .15vw, 1.06rem);
}

body.elementor-page .elementor-widget-text-editor p { margin: 0 0 1.1em; }
body.elementor-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }

body.elementor-page .elementor-widget-text-editor h2,
body.elementor-page .elementor-widget-text-editor h3,
body.elementor-page .elementor-widget-text-editor h4 {
	margin: 1.4em 0 .5em;
	line-height: 1.25;
}

body.elementor-page .elementor-widget-text-editor ul,
body.elementor-page .elementor-widget-text-editor ol {
	margin: 0 0 1.1em;
	padding-left: 1.4em;
}

body.elementor-page .elementor-widget-text-editor li { margin: .35em 0; }

body.elementor-page .elementor-widget-text-editor blockquote {
	margin: 1.4em 0;
	padding: .4em 0 .4em 1.1em;
	border-left: 3px solid var(--gold);
	font-style: italic;
	color: var(--ink-soft);
}

body.elementor-page .elementor-widget-text-editor a,
body.elementor-page .elementor-widget-icon-list .elementor-icon-list-text a {
	color: var(--blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .16em;
	transition: color .18s var(--ease, ease);
}

body.elementor-page .elementor-widget-text-editor a:hover { color: var(--blue-dark); }

/* --------------------------------------------------------------------------
   3. Section / container rhythm — give un-padded sections room to breathe
      (:where() = zero specificity, so any Elementor padding wins)
   -------------------------------------------------------------------------- */

body.elementor-page :where(.elementor-section.elementor-top-section),
body.elementor-page :where(.elementor > .e-con.e-con-full),
body.elementor-page :where(.elementor > .e-con.e-con-boxed) {
	padding-top: clamp(30px, 5vw, 64px);
	padding-bottom: clamp(30px, 5vw, 64px);
}

/* Inner sections should not double up that padding */
body.elementor-page :where(.elementor-inner-section) {
	padding-top: 0;
	padding-bottom: 0;
}

body.elementor-page :where(.elementor-widget:not(:last-child)) {
	margin-bottom: clamp(14px, 2vw, 22px);
}

/* --------------------------------------------------------------------------
   4. Buttons — align shape / weight / motion with the theme button
   -------------------------------------------------------------------------- */

body.elementor-page .elementor-button,
body.elementor-page .elementor-widget-button .elementor-button {
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.1;
	border-radius: 4px;
	padding-block: 13px;
	padding-inline: 26px;
	transition: transform .18s var(--ease, ease), box-shadow .18s var(--ease, ease), background-color .18s var(--ease, ease), filter .18s var(--ease, ease);
}

body.elementor-page .elementor-button:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
}

body.elementor-page .elementor-button:active { transform: translateY(0); }

body.elementor-page .elementor-button:focus-visible {
	outline: 2px solid var(--ring, var(--blue));
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Images & media — safe, tidy, no overflow
   -------------------------------------------------------------------------- */

body.elementor-page .elementor img {
	max-width: 100%;
	height: auto;
}

body.elementor-page .elementor-widget-image img,
body.elementor-page .elementor-widget-image-box .elementor-image-box-img img {
	display: block;
}

body.elementor-page .elementor iframe,
body.elementor-page .elementor video,
body.elementor-page .elementor .wp-video,
body.elementor-page .elementor .elementor-video {
	max-width: 100%;
}

body.elementor-page .elementor-widget-image-box .elementor-image-box-title { margin-bottom: .35em; }
body.elementor-page .elementor-widget-icon-box .elementor-icon-box-title { margin-bottom: .35em; }

body.elementor-page :where(.elementor-icon-box-title, .elementor-image-box-title) {
	font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
	line-height: 1.3;
}

body.elementor-page :where(.elementor-icon-box-description, .elementor-image-box-description) {
	color: var(--ink-soft);
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   6. Icon lists
   -------------------------------------------------------------------------- */

body.elementor-page :where(.elementor-icon-list-item) {
	padding-top: 7px;
	padding-bottom: 7px;
}

body.elementor-page :where(.elementor-icon-list-icon) {
	color: var(--gold);
}

body.elementor-page :where(.elementor-icon-list-text) {
	color: var(--ink);
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   7. Tabs, toggles & accordions — theme palette
   -------------------------------------------------------------------------- */

body.elementor-page :where(.elementor-tabs .elementor-tab-title),
body.elementor-page :where(.elementor-toggle .elementor-tab-title),
body.elementor-page :where(.elementor-accordion .elementor-tab-title) {
	font-weight: 600;
	color: var(--ink);
}

body.elementor-page :where(.elementor-tabs .elementor-tab-title.elementor-active),
body.elementor-page :where(.elementor-toggle .elementor-tab-title.elementor-active),
body.elementor-page :where(.elementor-accordion .elementor-tab-title.elementor-active) {
	color: var(--blue-dark);
}

body.elementor-page :where(.elementor-tab-content),
body.elementor-page :where(.elementor-toggle .elementor-tab-content),
body.elementor-page :where(.elementor-accordion .elementor-tab-content) {
	color: var(--ink);
	line-height: 1.7;
}

body.elementor-page :where(.elementor-tabs .elementor-tab-title),
body.elementor-page :where(.elementor-toggle-item),
body.elementor-page :where(.elementor-accordion-item) {
	border-color: var(--border);
}

/* --------------------------------------------------------------------------
   8. Dividers & separators
   -------------------------------------------------------------------------- */

body.elementor-page :where(.elementor-widget-divider) {
	--divider-color: var(--border);
}

/* --------------------------------------------------------------------------
   9. Tables (native + any left-over add-on markup) — scroll on small screens
   -------------------------------------------------------------------------- */

body.elementor-page .elementor-widget-container > table,
body.elementor-page .elementor-widget-text-editor table {
	width: 100%;
	border-collapse: collapse;
	font-size: .95rem;
}

body.elementor-page .elementor-widget-text-editor table :is(th, td) {
	padding: 10px 12px;
	border: 1px solid var(--border);
	text-align: left;
}

body.elementor-page .elementor-widget-text-editor table th {
	background: var(--pale);
	font-weight: 700;
}

@media (max-width: 700px) {
	body.elementor-page .elementor-widget-text-editor table {
		display: block;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* --------------------------------------------------------------------------
   10. Width, alignment & overflow safety
   -------------------------------------------------------------------------- */

body.elementor-page .elementor,
body.elementor-page .elementor-section,
body.elementor-page .elementor-container,
body.elementor-page .elementor-row,
body.elementor-page .elementor-column,
body.elementor-page .elementor-widget-wrap,
body.elementor-page .elementor-widget,
body.elementor-page .e-con,
body.elementor-page .e-con-inner,
body.elementor-page .e-child {
	min-width: 0;
	max-width: 100%;
}

body.elementor-page .elementor-widget-container {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/* Full-width stretched sections must never cause a horizontal scrollbar */
body.elementor-page .elementor-section.elementor-section-stretched {
	overflow-x: clip;
}

/* --------------------------------------------------------------------------
   11. Mobile — calmer padding + capped headings so pages don't feel shouty
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	body.elementor-page :where(.elementor-section.elementor-top-section),
	body.elementor-page :where(.elementor > .e-con) {
		padding-top: clamp(22px, 6vw, 40px);
		padding-bottom: clamp(22px, 6vw, 40px);
	}

	body.elementor-page .elementor-widget-heading .elementor-heading-title { line-height: 1.25; }

	/* Keep two-up icon/image boxes readable when they wrap */
	body.elementor-page .elementor-widget-icon-box .elementor-icon-box-wrapper,
	body.elementor-page .elementor-widget-image-box .elementor-image-box-wrapper {
		text-align: center;
	}
}

/* Tablet band only — progressive heading shrink. Phones (<=640px) are handled
   by the theme's fixed small-screen type system in main.css. */
@media (min-width: 641px) and (max-width: 767px) {
	body.elementor-page .elementor-widget-heading h1.elementor-heading-title { font-size: clamp(1.85rem, 6vw, 2.5rem) !important; }
	body.elementor-page .elementor-widget-heading h2.elementor-heading-title { font-size: clamp(1.55rem, 5vw, 2.1rem) !important; }
	body.elementor-page .elementor-widget-heading h3.elementor-heading-title { font-size: clamp(1.25rem, 4vw, 1.7rem) !important; }
}

@media (max-width: 480px) {
	body.elementor-page .elementor-button,
	body.elementor-page .elementor-widget-button .elementor-button {
		width: 100%;
		justify-content: center;
	}
}

/* --------------------------------------------------------------------------
   12. Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	body.elementor-page .elementor-button,
	body.elementor-page .elementor-widget-text-editor a { transition: none; }
	body.elementor-page .elementor-button:hover { transform: none; }
}