/* Elementor pages: let the theme's classes and tokens work on Elementor widget markup. */

/* Elementor content spans the full width; its sections handle their own boxed width and padding. */
.elementor-page .wp-block-post-content.has-global-padding { padding-left: 0; padding-right: 0; }
.elementor-page .wp-block-post-content > .elementor { max-width: none; }
.elementor-page .wp-block-post-content.has-global-padding > .alignfull { margin-left: 0 !important; margin-right: 0 !important; }

/* Paragraph spacing inside text widgets. */
.elementor-widget-text-editor > :last-child,
.elementor-widget-text-editor > * > :last-child { margin-bottom: 0; }
.elementor-widget-text-editor p:first-child { margin-top: 0; }

/* Elementor removes link underlines; keep the theme's underlined links in body text. */
.elementor-widget-text-editor a:not(.elementor-button) { text-decoration: underline; }

/* Elementor buttons take the theme button style. Per-widget colours set in Elementor still win,
   since they use a more specific selector. */
.elementor .elementor-button {
	background-color: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--ink);
	border-radius: 3px;
	padding: .85rem 1.4rem;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
}
.elementor .elementor-button:hover,
.elementor .elementor-button:focus { background-color: var(--wp--preset--color--gold-light); color: var(--wp--preset--color--ink); }

/* Hairline dividers between columns of a strip (class "is-divided" on the column containers). */
@media (min-width: 768px) { .e-con.is-divided { border-left: 1px solid var(--wp--preset--color--line); } }
@media (max-width: 767px) { .e-con.is-divided { border-top: 1px solid var(--wp--preset--color--line); padding-top: var(--wp--preset--spacing--50) !important; } }

/* Image widgets: theme ratios and captions. */
.elementor-widget-image img { width: 100%; }
.elementor-widget-image.ratio-portrait img { aspect-ratio: 4 / 5; object-fit: cover; }
.elementor-widget-image.ratio-wide img { aspect-ratio: 3 / 2; object-fit: cover; }
.elementor-widget-image.ratio-square img { aspect-ratio: 1; object-fit: cover; }
.elementor-widget-image .widget-image-caption { margin-top: .6rem; font-size: var(--wp--preset--font-size--small); color: var(--wp--preset--color--muted); text-align: left; }

/* Image Carousel: even slide heights (4:3 crops); slides open Elementor's lightbox. */
.elementor-image-carousel .swiper-slide-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.elementor-image-carousel a { cursor: zoom-in; }

/* Tanglaw: the theme's classes sit on Elementor's widget wrappers, so the rules below reach the
   heading or paragraph inside, and win over Elementor's own widths (.e-con > .elementor-widget). */

/* Buttons: outline in green (the quiet one) and outline in white on the hero. !important: Elementor
   writes button colours per widget. */
.elementor .tr-btn-outline .elementor-button { background: transparent !important; color: var(--wp--preset--color--green) !important; border: 2px solid var(--wp--preset--color--green); padding: calc(.85rem - 2px) calc(1.4rem - 2px); }
.elementor .tr-btn-outline .elementor-button:hover, .elementor .tr-btn-outline .elementor-button:focus { background: var(--wp--preset--color--green) !important; color: #fff !important; }
.elementor .tr-btn-light .elementor-button { background: transparent !important; color: #fff !important; border: 2px solid #fff; padding: calc(.85rem - 2px) calc(1.4rem - 2px); }
.elementor .tr-btn-light .elementor-button:hover, .elementor .tr-btn-light .elementor-button:focus { background: #fff !important; color: var(--wp--preset--color--green) !important; }

/* Elementor removes every link underline (.elementor a); put back the ones the theme underlines in
   the plugin's widgets: the contact details, the map link and the "read more" links. */
.elementor :is(.tr-contact__list, .tr-map, .tr-feature__more, .tr-notices__more) a { text-decoration: underline; }

/* Headings take the theme's sizes (style.css and theme.json), not Elementor's. */
.elementor .elementor-heading-title { line-height: 1.15; }
.elementor h2.elementor-heading-title { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 600; letter-spacing: -.022em; }
.elementor h3.elementor-heading-title { font-size: var(--wp--preset--font-size--large); }
.elementor .tr-panel__title h2.elementor-heading-title { font-size: var(--wp--preset--font-size--large); }
.elementor .tr-panel__sub h3.elementor-heading-title { font-size: var(--wp--preset--font-size--medium); }

/* Text widths. */
/* !important: Elementor caps every widget at max-width: 100% with a more specific selector. */
.elementor .tr-intro { max-width: min(60ch, 100%) !important; }
.elementor .tr-lead { max-width: min(58ch, 100%) !important; }
.elementor .tr-welcome__quote { max-width: min(46ch, 100%) !important; }
.elementor .tr-hero__lead { max-width: min(40ch, 100%) !important; }
.elementor .tr-prose > .elementor-widget-text-editor { max-width: min(68ch, 100%) !important; }
.elementor .tr-prose > .elementor-widget-text-editor:has(.tr-table, .tr-cards) { max-width: 100% !important; }

/* Section head rows: the head and its button side by side, the button wrapping under on phones. */
.elementor .e-con.tr-head-row > .e-con { --width: auto; width: auto; }
.elementor .tr-intro p, .elementor .tr-lead p { margin: 0; }

/* Home hero: the photo fills the section behind the gradient; the welcome and the ribbon sit on it. */
.elementor .e-con.tr-hero { padding: 0 !important; }
.elementor .e-con.tr-hero > .tr-hero__photo { position: absolute !important; inset: 0; z-index: 0; width: 100% !important; max-width: none !important; margin: 0 !important; }
.elementor .tr-hero__photo :is(.elementor-widget-container, img) { width: 100%; height: 100% !important; }
.elementor .tr-hero__photo img { object-fit: cover; object-position: 60% 50%; border-radius: 0; }
.elementor .e-con.tr-hero > .e-con:not(.tr-hero__photo) { position: relative; z-index: 2; }
.elementor .e-con.tr-hero__inner { width: min(100% - 2 * var(--wp--preset--spacing--50), var(--wp--style--global--wide-size)); margin-inline: auto; padding-block: clamp(4rem, 9vw, 8rem) clamp(3rem, 6vw, 5rem); }
.elementor .e-con.tr-hero__text { max-width: 36rem; }
.elementor .tr-hero__title .elementor-heading-title { font-size: clamp(2.8rem, 1.6rem + 4.6vw, 5.5rem); line-height: .98; letter-spacing: -.035em; color: #fff; }
.elementor .tr-kicker p, .elementor .tr-hero__lead p { margin: 0; }
.elementor .e-con.tr-hero__ribbon { padding: 1rem var(--wp--preset--spacing--50) !important; }
.elementor .e-con.tr-hero__ribbon > .elementor-widget { width: min(100%, var(--wp--style--global--wide-size)) !important; margin-inline: auto; }

/* The head of school's welcome, and the section heads. */
.elementor .tr-kicker-dark p, .elementor .tr-welcome__quote p, .elementor .tr-welcome__sign p, .elementor .tr-quote__label p { margin: 0; }
.elementor .tr-portrait { margin: 0 auto; }

/* Vision and mission: the quote mark sits on the widget, the text in it. */
.elementor .tr-quote p { margin: 0; }

/* Inner page heads: the title in large display serif with its gold rule. */
.elementor .e-con.tr-page-head { border-bottom: 1px solid var(--tr-line); }
.elementor .tr-page-head h1.elementor-heading-title { margin: 0; line-height: 1; max-width: 20ch; font-size: clamp(2.6rem, 1.6rem + 3.6vw, 4.75rem); }
.elementor .tr-page-head h1.elementor-heading-title::after { content: ""; display: block; width: 3.5rem; height: 2px; margin-top: 1.1rem; background: var(--wp--preset--color--gold); }
.elementor .tr-page-head .tr-lead { font-size: 1.1875rem; color: var(--wp--preset--color--muted); }

/* Students, Parents, Staff: the text column, "On this page" beside it. */
.elementor .tr-prose > .elementor-widget-heading:not(:first-child) { margin-top: 1.25rem; }
@media (min-width: 782px) { .elementor .tr-with-toc__aside { position: sticky; top: 7rem; align-self: flex-start; } }

/* Contact: the panel beside the form. */
.elementor .e-con.tr-panel { padding: 1.75rem; border-top: 6px solid var(--wp--preset--color--green); border-radius: 0 0 var(--tr-radius) var(--tr-radius); background: #fff; }