/* =========================================================================
   Doctor Smile - Site Custom CSS
   Every small tweak that used to live in "Simple Custom CSS and JS",
   in one file. Deactivate the plugin to turn all of it off.

   Contents
   1. FAQ accordion        (built by faq-accordion.js)
   2. Shared content tokens + disclaimer box
   3. Article content       (h2/p/ul/ol/table inside a text widget)
   4. Sidebar contact card  (CTA + Contact Form 7, right sidebar of posts)
   5. Site-wide tweaks      (header, nav, footer, single-post title, misc)
   ========================================================================= */


/* =========================================================================
   1. FAQ accordion
   Built by faq-accordion.js: <h4>question</h4><p>answer</p>, 2+ in a row,
   inside a text widget, turned into a click-to-open list.
   ========================================================================= */

.drsmile-faq {
	--faq-ink: #1b2733;
	--faq-mut: #5c6b75;
	--faq-line: #e3ebf2;
	--faq-accent: #0a5fa8;
	--faq-tint: #e7f2fc;
	margin: 1.5em 0;
	background: #fff;
	border: 1px solid var(--faq-line);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(27, 39, 51, 0.05);
}

.drsmile-faq .drsmile-faq__q {
	margin: 0;
	border-top: 1px solid var(--faq-line);
	font-size: inherit;
	font-weight: inherit;
}

.drsmile-faq .drsmile-faq__q:first-child {
	border-top: 0;
}

.drsmile-faq .drsmile-faq__q button {
	all: unset;
	box-sizing: border-box;
	width: 100%;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 18px 24px;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--faq-ink);
	transition: background-color 0.2s, color 0.2s;
}

.drsmile-faq .drsmile-faq__q button:hover {
	background: #f4f9fe;
}

.drsmile-faq .drsmile-faq__q button::after {
	content: "+";
	flex: none;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--faq-tint);
	color: var(--faq-accent);
	font-size: 1.375rem;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s, background-color 0.2s, color 0.2s;
}

.drsmile-faq .drsmile-faq__q button[aria-expanded="true"] {
	color: var(--faq-accent);
}

.drsmile-faq .drsmile-faq__q button[aria-expanded="true"]::after {
	transform: rotate(45deg);
	background: var(--faq-accent);
	color: #fff;
}

.drsmile-faq .drsmile-faq__q button:focus-visible {
	outline: 2px solid var(--faq-accent);
	outline-offset: -2px;
}

.drsmile-faq .drsmile-faq__a {
	margin: 0;
	padding: 0 24px 22px;
	max-width: 72ch;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--faq-mut);
}

.drsmile-faq .drsmile-faq__a[hidden] {
	display: none;
}

@media (max-width: 575px) {
	.drsmile-faq .drsmile-faq__q button {
		padding: 16px 18px;
		font-size: 1rem;
	}

	.drsmile-faq .drsmile-faq__a {
		padding: 0 18px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.drsmile-faq .drsmile-faq__q button,
	.drsmile-faq .drsmile-faq__q button::after {
		transition: none;
	}
}


/* =========================================================================
   2. Shared content tokens + disclaimer box
   Used by the content-generation tool's own "eks-*" class names.
   Kept as-is, unrelated to sections 1/3/4/5.
   ========================================================================= */

.eks-page {
	--eks-radius: 0.75rem;
	--eks-background: #f7fafd;
	--eks-foreground: #1a2733;
	--eks-card: #ffffff;
	--eks-primary: #3e7cb1;
	--eks-primary-foreground: #f7fafd;
	--eks-secondary-foreground: #23425e;
	--eks-muted: #e3eef8;
	--eks-muted-foreground: #4a6478;
	--eks-accent: #ffe0bd;
	--eks-border: #d9e6f2;
	--eks-input: #d9e6f2;
	--eks-surface-soft: #eff5fb;
	--eks-warn: #fff3e3;
	--eks-warn-foreground: #6b4a1e;
	line-height: 1.6;
}

.eks-disclaimer {
	/* Own values, not read from .eks-page. This box also appears on pages
	   that don't have an .eks-page wrapper, where var(--eks-warn) etc. would
	   otherwise be undefined and the box would show with no colour at all. */
	--eks-border: #d9e6f2;
	--eks-warn: #fff3e3;
	--eks-warn-foreground: #6b4a1e;
	margin-top: 2.5rem;
	border-radius: 0.75rem;
	border: 1px solid var(--eks-border);
	background-color: var(--eks-warn);
	padding: 1.25rem;
	font-size: 0.875rem;
	color: var(--eks-warn-foreground);
}


/* =========================================================================
   3. Article content
   <div class="textwidget"><section><h2>...<p>/<ul>/<ol>/
   <div class="eks-table-wrap"><table class="eks-table">...
   <a class="eks-inline-link">...

   No wrapper class needed. Scoped to "section" inside a text widget, and
   to the exact class names the content already uses (.eks-table-wrap,
   .eks-table, .eks-inline-link), so it applies to every article built
   this way without editing the article. Matches the tmj-blog article look
   (articles/*.html): same table style; the h2 underline was removed here
   on purpose (kept plain).
   ========================================================================= */

.textwidget section {
	--tac-ink: #1b2733;
	--tac-mut: #5c6b75;
	--tac-line: #e3ebf2;
	--tac-blue: var(--color-1, #0a86d6);
	--tac-blue-d: #0a5fa8;
	--tac-blue-s: #e7f2fc;
	color: var(--tac-ink);
}

.textwidget section + section {
	margin-top: 2.2em;
}

.textwidget section h2 {
	margin: 0 0 0.6em;
	padding-bottom: 8px;
	font-size: 23px;
	font-weight: 600;
	line-height: 1.3;
}

.textwidget section p {
	margin: 0 0 1.15em;
	font-size: 16px;
	line-height: 1.7;
	color: var(--tac-mut);
}

.textwidget section strong {
	color: var(--tac-ink);
}

.textwidget section a.eks-inline-link {
	color: var(--tac-blue);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.textwidget section ul,
.textwidget section ol {
	margin: 0 0 1.2em;
	padding-left: 1.3em;
	font-size: 16px;
	line-height: 1.7;
	color: var(--tac-mut);
}

.textwidget section li {
	margin-bottom: 0.5em;
}

.textwidget section .eks-table-wrap {
	margin: 1.3em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 10px;
}

.textwidget section table.eks-table {
	width: 100%;
	min-width: 480px;
	margin: 0;
	border-collapse: collapse;
	font-size: 15px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(10, 95, 168, 0.1);
}

.textwidget section table.eks-table th {
	padding: 11px 14px;
	background: var(--tac-blue);
	color: #fff;
	text-align: left;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.02em;
}

.textwidget section table.eks-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--tac-line);
	color: var(--tac-mut);
	vertical-align: top;
}

.textwidget section table.eks-table tr:last-child td {
	border-bottom: none;
}

.textwidget section table.eks-table tbody tr:nth-child(even) td {
	background: #f5fafd;
}

@media (max-width: 575px) {
	.textwidget section h2 {
		font-size: 22px;
	}
}


/* =========================================================================
   4. Sidebar contact card
   CTA (top half) + Contact Form 7 (bottom half), one rounded card.
   Only the right sidebar of posts. No theme files changed.
   ========================================================================= */

aside.sidebar {
	--sb-accent: var(--color-1, #007bff);
	--sb-accent-d: #0a5fa8;
	--sb-field: #f4f8fa;
	--sb-line: #e3ebf2;
	--sb-ink: #1b2733;
	--sb-mut: #5c6b75;
	--sb-radius: 16px;
}

/* Less empty space between sidebar widgets (was 48px). */
aside.sidebar .widget {
	margin-bottom: 32px;
}

/* ---------- CTA = top half of the card ---------- */

aside.sidebar .widget_sow-cta {
	margin-bottom: 0;
}

aside.sidebar .widget_sow-cta .sow-cta-base {
	background: linear-gradient(135deg, var(--sb-accent) 0%, var(--sb-accent-d) 100%);
	border: 0;
	border-radius: var(--sb-radius) var(--sb-radius) 0 0;
	padding: 22px 22px 20px;
}

aside.sidebar .widget_sow-cta .sow-cta-text {
	margin: 0 0 16px;
	text-align: left;
}

/*
 * SiteOrigin's script writes an inline margin-top (~44px) on the button to
 * center it next to the text. Here the button sits under the text, so only
 * !important can remove that inline value.
 */
aside.sidebar .widget_sow-cta .sow-cta-wrapper .so-widget-sow-button {
	margin: 0 !important;
}

aside.sidebar .widget_sow-cta .sow-cta-title {
	color: #fff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 6px;
}

aside.sidebar .widget_sow-cta .sow-cta-subtitle {
	color: rgba(255, 255, 255, .85);
	font-size: 13px;
	line-height: 1.5;
	margin: 0;
}

aside.sidebar .widget_sow-cta .ow-button-base a.sowb-button {
	align-items: center;
	border-radius: 999px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
	display: flex;
	font-size: 14px;
	font-weight: 600;
	justify-content: center;
	min-height: 46px;
	padding: 0 20px;
	width: 100%;
}

/* ---------- Form = bottom half of the card ---------- */

aside.sidebar .widget_orion_cf7_w .wpcf7 {
	background: #fff;
	border: 1px solid var(--sb-line);
	border-radius: 0 0 var(--sb-radius) var(--sb-radius);
	border-top: 0;
	padding: 18px 18px 20px;
}

/* One tidy column with even gaps (replaces Bootstrap row/cols). */
aside.sidebar .widget_orion_cf7_w .wpcf7-form.row {
	display: grid;
	gap: 10px;
	margin: 0;
}

aside.sidebar .widget_orion_cf7_w .wpcf7-form.row::before,
aside.sidebar .widget_orion_cf7_w .wpcf7-form.row::after {
	content: none;
}

aside.sidebar .widget_orion_cf7_w .wpcf7-form.row > div {
	float: none;
	padding: 0;
	width: auto;
}

aside.sidebar .widget_orion_cf7_w .wpcf7-form.row p {
	margin: 0;
}

/* The empty "&nbsp;" line before the button. */
aside.sidebar .widget_orion_cf7_w .wpcf7-form.row > div:nth-last-child(2) {
	display: none;
}

aside.sidebar .widget_orion_cf7_w .wpcf7 input.wpcf7-text,
aside.sidebar .widget_orion_cf7_w .wpcf7 select,
aside.sidebar .widget_orion_cf7_w .wpcf7 textarea {
	background: var(--sb-field);
	border: 1px solid transparent;
	border-radius: 10px;
	color: var(--sb-ink);
	font-size: 14px;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
	width: 100%;
}

/* Room on the right for the field icon. */
aside.sidebar .widget_orion_cf7_w .wpcf7 input.wpcf7-text,
aside.sidebar .widget_orion_cf7_w .wpcf7 select {
	padding-right: 42px;
}

/*
 * Theme icons (person, phone, envelope, arrow) were placed for 60px fields
 * with 30px space under them. Center them inside the new 44px fields.
 */
aside.sidebar .widget_orion_cf7_w .wpcf7-form .name:after,
aside.sidebar .widget_orion_cf7_w .wpcf7-form .phone:after,
aside.sidebar .widget_orion_cf7_w .wpcf7-form .email:after,
aside.sidebar .widget_orion_cf7_w .wpcf7-form .select:after {
	bottom: auto;
	color: var(--sb-mut);
	font-size: 15px;
	line-height: 1;
	right: 16px;
	top: 22px;
	transform: translateY(-50%);
}

/* The select looks like the other fields, with the theme arrow only. */
aside.sidebar .widget_orion_cf7_w .wpcf7 select {
	-webkit-appearance: none;
	appearance: none;
	color: var(--sb-mut);
	cursor: pointer;
}

/* Error text under the field, not on top of it. */
aside.sidebar .widget_orion_cf7_w .wpcf7-form span.wpcf7-not-valid-tip {
	bottom: auto;
	display: block;
	margin-top: 4px;
	position: static;
}

aside.sidebar .widget_orion_cf7_w .wpcf7 textarea {
	height: 92px;
	line-height: 1.5;
	padding: 10px 14px;
	resize: vertical;
}

aside.sidebar .widget_orion_cf7_w .wpcf7 input.wpcf7-text:focus,
aside.sidebar .widget_orion_cf7_w .wpcf7 select:focus,
aside.sidebar .widget_orion_cf7_w .wpcf7 textarea:focus {
	background: #fff;
	border-color: var(--sb-accent);
	box-shadow: 0 0 0 3px rgba(0, 123, 255, .15);
	outline: none;
}

aside.sidebar .widget_orion_cf7_w .wpcf7 ::placeholder {
	color: var(--sb-mut);
	opacity: 1;
}

/* Consent line: small and quiet. */
aside.sidebar .widget_orion_cf7_w .wpcf7-list-item {
	align-items: flex-start;
	display: flex;
	gap: 8px;
	margin: 2px 0 0;
}

aside.sidebar .widget_orion_cf7_w .wpcf7-list-item input[type="checkbox"] {
	accent-color: var(--sb-accent);
	flex: none;
	height: 16px;
	margin: 2px 0 0;
	width: 16px;
}

aside.sidebar .widget_orion_cf7_w .wpcf7-form .wpcf7-list-item > span,
aside.sidebar .widget_orion_cf7_w .wpcf7-form .wpcf7-list-item > .wpcf7-list-item-label:first-child {
	float: none;
	margin: 0;
}

aside.sidebar .widget_orion_cf7_w .wpcf7-list-item-label {
	color: var(--sb-mut);
	font-size: 12px;
	line-height: 1.5;
}

/* Send button. */
aside.sidebar .widget_orion_cf7_w .wpcf7 input.wpcf7-submit {
	background: var(--sb-accent-d);
	border: 0;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	height: 46px;
	letter-spacing: .04em;
	/* Theme line-height is for 60px buttons; this centers the text in 46px. */
	line-height: 46px;
	margin: 6px 0 0;
	padding: 0 20px;
	transition: background-color .2s ease, transform .15s ease;
}

aside.sidebar .widget_orion_cf7_w .wpcf7 input.wpcf7-submit:hover,
aside.sidebar .widget_orion_cf7_w .wpcf7 input.wpcf7-submit:focus-visible {
	background: var(--sb-accent);
	transform: translateY(-1px);
}

aside.sidebar .widget_orion_cf7_w .wpcf7-response-output {
	border-radius: 10px;
	font-size: 13px;
	margin: 12px 0 0;
}


/* =========================================================================
   5. Site-wide tweaks
   Header, nav, footer, single-post title, and a few specific boxes.
   Kept exactly as they were: some target one post ID or one row ID on
   purpose (marked below). Do not "clean up" a selector here without
   checking the page it targets.
   ========================================================================= */

.header-classic .site-branding a,
.logo.logo-default {
	width: 100%;
}

.page-heading .desktop-right {
	max-width: 50%;
}

.page-heading.heading-classic .breadcrumbs,
.page-heading.heading-classic .breadcrumbs ol li,
.breadcrumbs a,
.breadcrumbs span {
	line-height: unset;
	text-align: right;
}

.page-heading.heading-classic .breadcrumbs a,
.page-heading.heading-classic .breadcrumbs ol li a {
	line-height: 1.6em;
	text-align: right;
}

.nav-light .nav-menu > li.current_page_item > a {
	background-color: transparent;
	color: var(--color-1);
	font-weight: bold;
}

h3.item-title,
h4.item-title,
.page-heading h1.entry-title {
	letter-spacing: 0;
}

.post-template-default.single-post article .entry-title {
	font-size: 24px;
}

.container.main-footer .primary-color,
.text-light .primary-color {
	color: #fff;
}

.site-footer .widget .widget-title:before {
	background-color: #fff !important;
}

.site-footer .sow-icon-typicons[data-sow-icon]:before {
	color: #fff;
}

.site-footer .btn.btn-c1.btn-wire:not(:hover):not(:focus) span[class*="icon"]:after {
	border-color: #fff;
}

.site-footer .btn.btn-c1.btn-wire:not(:hover):not(:focus) {
	color: #fff;
	box-shadow: inset 0 0 0 1px #fff;
}

.text-light .menu-item a:hover,
.text-light .menu-item a:not([class]):hover {
	color: var(--color-2);
}

.nav-light ul.sub-menu li.menu-item:not(.orion-megamenu-subitem):hover > a:not(.btn) {
	color: var(--color-2);
}

.nav-light .orionicon-arrow_right::before {
	color: var(--color-2);
}

.wp-embedded-content {
	display: inline-block;
	float: left;
	border: 2px solid #dcdcde;
	padding: 0;
	margin: 20px;
}

/* One specific sidebar column, made taller so its sticky content has room. */
.right-s.col-md-4 {
	padding-bottom: 200px;
}

.last-tab-wrap .nav-button .btn.btn-c1 {
	background: var(--color-2);
}

.top-bar .container > .row > .col-md-12 > .top-bar-wrap {
	padding: 4px 20px;
}

/*
 * Top bar menu (nav_menu-3) + the two call/English buttons, on tablet and
 * mobile. No second hamburger: the row wraps onto more lines and takes
 * the full width, on top of/above the rest of that area.
 *
 * The original bug: an earlier rule here set "display: flex" at 768px
 * with no "flex-wrap". That squeezed the menu + both buttons onto one
 * line and they overlapped/got cut off.
 *
 * Up to 992px, the widgets are flex items no matter what their own
 * "display" says (that's how a flex container works), so the rest of
 * the theme's inline-block/width rules for them stop mattering here.
 */
/* ---- Mobile + small tablet (up to 992px): compact menu, both buttons on one row under it. ---- */
@media (max-width: 992px) {
	.top-bar .container > .row > .col-md-12 > .top-bar-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		width: 100%;
		row-gap: 4px;
	}

	/* Menu keeps its own full-width row, so the buttons always start a new line. */
	.top-bar.equal .top-bar-wrap.no-dividers > .widget_nav_menu {
		width: 100% !important;
	}

	.top-bar-wrap > .section.widget_nav_menu > div > ul.menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Narrower spacing: theme default is 15px + 15px padding on a 48px-tall row. */
	.top-bar-wrap > .section.widget_nav_menu > div > ul.menu li {
		line-height: 1.8;
		max-height: none;
	}

	.top-bar-wrap > .section.widget_nav_menu > div > ul.menu li a {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* Both buttons share one row, side by side, instead of each on its own full-width row. */
	.top-bar.equal .top-bar-wrap.no-dividers > .widget_orion_button_w {
		width: auto !important;
		flex: 0 1 auto;
	}

	.top-bar .top-bar-wrap.no-dividers .so-widget-orion_button_w-base .wrapper {
		padding: 4px 6px;
	}
}

/* ---- Tablet (993px and up): menu on the left, both buttons on the right, if it fits. ----
   The theme's own rule at this width sets ".top-bar-wrap { display: inline-block }"
   again, so this has to turn it into a flex row itself, or "margin-left: auto"
   below does nothing. */
@media (min-width: 993px) {
	.top-bar .container > .row > .col-md-12 > .top-bar-wrap {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		row-gap: 4px;
	}

	.top-bar .top-bar-wrap.no-dividers > .widget_nav_menu {
		flex: 0 1 auto;
	}

	.top-bar-wrap > .section.widget_nav_menu > div > ul.menu {
		flex-wrap: wrap;
	}

	/* Pushes this button, and the one right after it, to the far right of the row.
	   If the menu is too wide to leave room, both buttons wrap to their own line
	   below, still together, still on the right of that line. */
	.top-bar .top-bar-wrap.no-dividers > .widget_orion_button_w:nth-of-type(2) {
		margin-left: auto;
	}
}

/* One specific post (id 5321): no title band, centered title, row background sized to cover. */
.postid-5321 .entry-header {
	display: none !important;
}

.postid-5321 h1.entry-title {
	text-align: center !important;
}

.width50-lineheight-padding {
	width: 50%;
}

.width50-lineheight-padding h4 {
	line-height: 1.2em;
	padding: 10px 0;
}

#pg-5321-0 > .panel-row-style {
	background-size: cover;
}

.so-widget-sow-image h3.widget-title {
	font-weight: 600;
	font-size: 0.9rem;
}

.so-widget-sow-editor h3.widget-title {
	text-transform: uppercase;
	font-size: 1.3rem;
	font-weight: bolder;
	letter-spacing: 0.05px;
}

.siteorigin-widget-tinymce.textwidget h4 {
	font-size: 1.2rem;
	font-weight: bold;
}

/* Article main title (h1) - bigger and responsive.
   The double .entry-title beats the theme rule without !important. */
body.single-post article .entry-title.entry-title {
	font-size: clamp(22px, 1.4vw + 16px, 30px);
	line-height: 1.25;
	letter-spacing: -0.01em;
	margin-bottom: 28px;
	text-wrap: balance;
}

@media (min-width: 992px) {
	.page-heading .desktop-left h1.entry-title {
		max-width: 70%;
	}
}

/* One specific in-page CTA box (id "cta_inpage").
   This id sits on the CTA widget's outer wrapper, but that widget's own
   ".sow-cta-base" box has its own solid background (from its widget
   settings) directly inside it, covering the wrapper completely. So the
   colour/border/radius has to go on ".sow-cta-base" to actually be seen. */
#cta_inpage {
	margin-top: 2.5rem;
}

#cta_inpage .sow-cta-base {
	border-radius: 0.75rem;
	background-color: #d9e6f2;
	border: 1px solid #d9e6f2;
}

#cta_inpage h4 {
	font-weight: 500;
}

.site-navigation .nav-menu > li > a {
	font-weight: 600 !important;
	letter-spacing: 0 !important;
	font-size:14px !important
}

@media (max-width: 991px) {
    .site-branding a.logo {
        margin-top: 20px !important;
        margin-bottom: 23px !important;
    }
}