/*
 * Orthopaedic Associates (OAS): site styles. Loaded by oas-site.php.
 * Colours/fonts mirror the Elementor kit globals (var(--e-global-...)) so a kit change follows through.
 */

/* ---------- Content migrated from Drupal (body HTML keeps a few Bootstrap classes) ---------- */
.elementor-widget-theme-post-content img,
.elementor-widget-text-editor img { max-width: 100%; height: auto; }
.elementor-widget-theme-post-content a:not(.btn):not(.elementor-button),
.elementor-widget-text-editor a:not(.btn):not(.elementor-button),
.oas-acf-content a:not(.btn) { font-weight: 700; text-decoration: none; }
.elementor-widget-theme-post-content a:not(.btn):hover,
.elementor-widget-text-editor a:not(.btn):hover,
.oas-acf-content a:not(.btn):hover { text-decoration: underline; }

.btn {
	display: inline-block;
	font-family: var(--e-global-typography-822d1e5-font-family), sans-serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: .6em 1.5em;
	border: 0;
	border-radius: 50px;
	color: #fff !important;
	text-align: center;
	text-decoration: none !important;
	background: linear-gradient(0deg, var(--e-global-color-5bcb715) 0%, var(--e-global-color-secondary) 100%);
	transition: background .2s, color .2s;
}
.btn:hover, .btn:focus { background: var(--e-global-color-5bcb715); color: #fff; }
.btn-primary { background: linear-gradient(0deg, var(--e-global-color-accent) 0%, var(--e-global-color-f739cf9) 100%); }
.btn-primary:hover, .btn-primary:focus { background: var(--e-global-color-accent); }
.btn-outline-secondary {
	background: rgba(255, 255, 255, .55);
	border: 2px solid var(--e-global-color-secondary);
	color: var(--e-global-color-secondary) !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus { background: var(--e-global-color-secondary); color: #fff !important; }
.btn-block { display: block; width: 100%; }

.section-heading {
	border-top: 2px solid var(--e-global-color-secondary);
	border-bottom: 2px solid var(--e-global-color-secondary);
	padding: .6rem 0;
	margin-bottom: 1.25rem;
}
.text-white { color: #fff !important; }
.text-secondary { color: var(--e-global-color-secondary) !important; }
.text-dark { color: var(--e-global-color-text) !important; }
.text-uppercase { text-transform: uppercase; }
.font-weight-normal { font-weight: 400 !important; }
.font-weight-bold { font-weight: 700 !important; }
.text-align-center { text-align: center; }
.rteindent1 { margin-left: 40px; }
.rounded { border-radius: 8px; }
.w-100 { width: 100%; }
.mb-0 { margin-bottom: 0 !important; }
.mt-2 { margin-top: .5rem; } .my-2 { margin-top: .5rem; margin-bottom: .5rem; } .my-3 { margin-top: 1rem; margin-bottom: 1rem; }

/* Minimal Bootstrap grid for migrated content */
.elementor-widget-theme-post-content .row,
.oas-acf-content .row { display: flex; flex-wrap: wrap; margin-left: -15px; margin-right: -15px; }
.elementor-widget-theme-post-content .row > [class*="col"],
.oas-acf-content .row > [class*="col"] { padding-left: 15px; padding-right: 15px; width: 100%; }
.elementor-widget-theme-post-content .row > .col,
.oas-acf-content .row > .col { flex: 1 0 0%; }
@media (min-width: 768px) {
	.row > .col-md-6 { width: 50% !important; }
	.row > .col-md-12, .row > .col-med-12 { width: 100% !important; }
}
@media (min-width: 992px) {
	.row > .col-lg-4 { width: 33.333% !important; } .row > .col-lg-5 { width: 41.667% !important; }
	.row > .col-lg-6 { width: 50% !important; } .row > .col-lg-7 { width: 58.333% !important; }
	.row > .col-lg-8 { width: 66.667% !important; }
}
@media (min-width: 1200px) {
	.row > .col-xl-3 { width: 25% !important; } .row > .col-xl-4 { width: 33.333% !important; }
	.row > .col-xl-6 { width: 50% !important; } .row > .col-xl-7 { width: 58.333% !important; }
	.row > .col-xl-9 { width: 75% !important; }
}

/* Headings: two-tone (light words + <strong> bold words), as on the Drupal site */
.elementor-heading-title strong { font-weight: 700; }
.oas-two-tone .elementor-heading-title { font-weight: 400; }

/* Headings with green rules above and below (Drupal .section-heading): on a heading widget or a whole row */
.e-con.oas-rules,
.elementor-widget.oas-rules .elementor-heading-title { border-top: 2px solid var(--e-global-color-secondary); border-bottom: 2px solid var(--e-global-color-secondary); }
.elementor-widget.oas-rules .elementor-heading-title { padding: .6rem 0; }

/* "Where does it hurt" pills: outline style instead of the kit's gradient button */
.oas-pill .elementor-button { background-image: none !important; }

/* Links inside the coloured footer bands stay white */
.oas-connect-bar a,
.elementor-location-footer .elementor-widget-text-editor a { color: #fff; font-weight: 400; text-decoration: none; }
.elementor-location-footer .elementor-widget-text-editor a:hover { text-decoration: underline; }

/* Header: full desktop header from 1200px (the Drupal site's breakpoint), hamburger below. */
.e-con.oas-hdr-mobile { display: none; }
@media (max-width: 1199px) {
	.e-con.oas-hdr-desktop { display: none; }
	.e-con.oas-hdr-mobile { display: flex; }
}
/* 1200-1366: compact nav, utility links and buttons so nothing wraps */
@media (min-width: 1200px) and (max-width: 1366px) {
	.oas-hdr-desktop .oas-main-nav .elementor-nav-menu--main .elementor-item { font-size: 1.05rem !important; padding-left: 9px !important; padding-right: 9px !important; }
	.oas-hdr-desktop .elementor-widget-nav-menu:not(.oas-main-nav) .elementor-item { font-size: .9rem !important; padding-left: 6px !important; padding-right: 6px !important; }
	.oas-hdr-desktop .elementor-button { font-size: .9rem !important; padding: .55em 1.1em !important; }
}
.oas-hdr-desktop .elementor-button-text { white-space: nowrap; }

/* ---------- Locations (shortcodes) ---------- */
.oas-location-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.oas-location-card__icon img { width: 70px; height: auto; display: block; margin-bottom: 1rem; }
.oas-location-card__name { margin: 0 0 .25rem; font-family: var(--e-global-typography-secondary-font-family), sans-serif;
	font-size: 1.75rem; line-height: 1.2; font-weight: 700; }
.oas-location-card__name a { color: var(--e-global-color-primary); text-decoration: none; }
.oas-location-card__address { margin: 0; }
.oas-location-card__address a { color: var(--e-global-color-secondary); font-weight: 400; }
@media (max-width: 1024px) { .oas-location-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .oas-location-cards { grid-template-columns: 1fr; } }

.oas-footer-locations { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; color: #fff; }
.oas-footer-location p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.6; }
.oas-footer-location a { color: #fff; text-decoration: none; }
.oas-footer-location a:hover { text-decoration: underline; }
.oas-footer-location__name { font-size: 1.3rem !important; font-weight: 700; margin-bottom: .25rem !important; }
@media (max-width: 767px) { .oas-footer-locations { grid-template-columns: 1fr; } }

.oas-map { width: 100%; border-radius: 8px; overflow: hidden; z-index: 1; }

/* ---------- Footer: Google Translate picker ---------- */
.oas-google-translate { text-align: center; color: #fff; }
.oas-google-translate .goog-te-gadget { color: #fff; font-size: 11px; }
.oas-google-translate .goog-te-gadget a { color: #fff !important; }
.oas-google-translate .goog-te-combo { border-radius: 5px; height: 50px; padding: 0 45px 0 25px; border: 0; color: #444; max-width: 100%; }
