/*
Theme Name:   Hello Elementor Child - TWS
Theme URI:    https://tonywebstudio.com
Description:  Child theme of Hello Elementor for Tony Web Studio. Houses the native blog single template and the Knowledge Base hub (Knowledge Base / Comparisons / Blog). Site header and footer are inherited from the existing Elementor Theme Builder setup and are not modified here.
Author:       Tony Web Studio
Author URI:   https://tonywebstudio.com
Template:     hello-elementor
Version:      1.2.0
Text Domain:  hello-elementor-child-tws
*/

/* -------------------------------------------------------------
   TWS palette (confirmed)
------------------------------------------------------------- */
:root {
	--tws-navy:        #1B2A4A;
	--tws-charcoal:    #2E3338;
	--tws-grey:        #F4F6F8;
	--tws-lightblue:   #E8F0FA;
	--tws-blue:        #3B6EA5;
	--tws-white:       #FFFFFF;
	--tws-black:       #0A0A0A;
	--tws-border:      #E2E6EB;
	--tws-maxw:        760px;
}

/* -------------------------------------------------------------
   Single post layout
------------------------------------------------------------- */
.tws-single {
	max-width: 1180px;
	margin: 0 auto;
	padding: 40px 20px 72px;
	color: var(--tws-charcoal);
	font-size: 18px;
	line-height: 1.7;
}

/* Two-column layout */
.tws-layout {
	display: flex;
	gap: 40px;
	align-items: stretch;
}
.tws-layout__main {
	flex: 1 1 auto;
	min-width: 0;
	max-width: 760px;
}
.tws-layout__side {
	flex: 0 0 320px;
	width: 320px;
	position: relative;
}
.tws-layout__side:empty { display: none; }

@media (max-width: 1000px) {
	.tws-layout { flex-direction: column; }
	.tws-layout__main { max-width: 100%; }
	.tws-layout__side { flex-basis: auto; width: 100%; }
}

.tws-breadcrumb {
	font-size: 13px;
	letter-spacing: .01em;
	margin-bottom: 28px;
	color: var(--tws-blue);
}
.tws-breadcrumb a { color: var(--tws-blue); text-decoration: none; }
.tws-breadcrumb a:hover { text-decoration: underline; }
.tws-breadcrumb .tws-sep { margin: 0 8px; color: #9AA6B2; }

.tws-article__title {
	font-size: 2.15rem;
	line-height: 1.2;
	color: var(--tws-navy);
	margin: 0 0 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.tws-meta {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	font-size: 14px;
	color: #6B7580;
	margin-bottom: 32px;
}
.tws-pill {
	display: inline-block;
	background: var(--tws-lightblue);
	color: var(--tws-navy);
	border-radius: 999px;
	padding: 4px 12px;
	font-size: 13px;
	font-weight: 600;
}
.tws-meta__by { font-weight: 600; color: var(--tws-charcoal); }

.tws-article__media { margin: 0 0 32px; }
.tws-article__media img { width: 100%; height: auto; border-radius: 8px; display: block; }

/* -------------------------------------------------------------
   Content typography
------------------------------------------------------------- */
.tws-article__content > * { margin-bottom: 1.35em; }
.tws-article__content h2 {
	font-size: 1.55rem;
	color: var(--tws-navy);
	margin-top: 1.8em;
	line-height: 1.3;
	font-weight: 700;
}
.tws-article__content h3 {
	font-size: 1.25rem;
	color: var(--tws-navy);
	margin-top: 1.5em;
	font-weight: 700;
}
.tws-article__content a { color: var(--tws-blue); }
.tws-article__content ul,
.tws-article__content ol { padding-left: 1.4em; }
.tws-article__content li { margin-bottom: .5em; }
.tws-article__content img { max-width: 100%; height: auto; border-radius: 6px; }
.tws-article__content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}
.tws-article__content th,
.tws-article__content td {
	border: 1px solid var(--tws-border);
	padding: 10px 12px;
	text-align: left;
}
.tws-article__content th { background: var(--tws-grey); color: var(--tws-navy); }
.tws-article__content blockquote {
	border-left: 3px solid var(--tws-blue);
	margin: 1.5em 0;
	padding: 4px 0 4px 20px;
	color: #4A545E;
	font-style: italic;
}

/* -------------------------------------------------------------
   FAQ accordion — native <details>/<summary>
------------------------------------------------------------- */
.tws-article__content details {
	border: 1px solid var(--tws-border);
	border-radius: 8px;
	padding: 0;
	margin-bottom: 12px;
	background: var(--tws-white);
	overflow: hidden;
}
.tws-article__content summary {
	cursor: pointer;
	padding: 16px 44px 16px 18px;
	font-weight: 600;
	color: var(--tws-navy);
	list-style: none;
	position: relative;
	font-size: 17px;
}
.tws-article__content summary::-webkit-details-marker { display: none; }
.tws-article__content summary::after {
	content: "+";
	position: absolute;
	right: 18px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 20px;
	color: var(--tws-blue);
	line-height: 1;
}
.tws-article__content details[open] summary::after { content: "\2212"; } /* minus */
.tws-article__content details[open] summary { border-bottom: 1px solid var(--tws-border); }
.tws-article__content details > *:not(summary) {
	padding: 0 18px;
}
.tws-article__content details > *:not(summary):first-of-type { padding-top: 16px; }
.tws-article__content details > *:not(summary):last-child { padding-bottom: 16px; }

/* -------------------------------------------------------------
   Tag chips
------------------------------------------------------------- */
.tws-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 36px 0 0; }
.tws-chip {
	font-size: 13px;
	font-weight: 600;
	color: var(--tws-navy);
	background: var(--tws-grey);
	border: 1px solid var(--tws-border);
	border-radius: 999px;
	padding: 5px 14px;
	text-decoration: none;
}
.tws-chip:hover { background: var(--tws-lightblue); }

/* -------------------------------------------------------------
   CTA
------------------------------------------------------------- */
.tws-cta {
	margin: 48px 0 0;
	background: var(--tws-navy);
	color: var(--tws-white);
	border-radius: 12px;
	padding: 28px 30px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.tws-cta__heading { font-size: 1.2rem; font-weight: 700; margin: 0 0 6px; color: var(--tws-white); }
.tws-cta__body { margin: 0; font-size: 15px; line-height: 1.55; color: #C9D4E4; max-width: 46ch; }
.tws-cta__btn {
	background: var(--tws-white);
	color: var(--tws-navy);
	font-weight: 700;
	padding: 13px 22px;
	border-radius: 8px;
	text-decoration: none;
	white-space: nowrap;
	font-size: 15px;
}
.tws-cta__btn:hover { background: var(--tws-lightblue); }

/* -------------------------------------------------------------
   Related cards
------------------------------------------------------------- */
.tws-related {
	margin: 56px 0 0;
	padding: 0;
}
.tws-related__title { font-size: 1.3rem; color: var(--tws-navy); margin: 0 0 20px; font-weight: 700; }
.tws-related__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 18px;
}
.tws-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--tws-border);
	border-radius: 10px;
	overflow: hidden;
	text-decoration: none;
	background: var(--tws-white);
	transition: border-color .15s ease, transform .15s ease;
}
.tws-card:hover { border-color: var(--tws-blue); transform: translateY(-2px); }
.tws-card__media img { width: 100%; height: 130px; object-fit: cover; display: block; }
.tws-card__body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; }
.tws-card__title { font-weight: 700; color: var(--tws-navy); font-size: 15px; line-height: 1.35; }
.tws-card__excerpt { font-size: 13px; color: #6B7580; line-height: 1.5; }

/* -------------------------------------------------------------
   Responsive
------------------------------------------------------------- */
@media (max-width: 600px) {
	.tws-single { font-size: 17px; padding: 28px 16px 56px; }
	.tws-article__title { font-size: 1.7rem; }
	.tws-cta { flex-direction: column; align-items: flex-start; }
	.tws-cta__btn { width: 100%; text-align: center; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	.tws-card { transition: none; }
}

/* -------------------------------------------------------------
   Why-TWS full-width banner (sub-step 1)
------------------------------------------------------------- */
.tws-why {
	background: var(--tws-navy);
	color: var(--tws-white);
	width: 100vw;
	position: relative;
	left: 50%;
	right: 50%;
	margin-left: -50vw;
	margin-right: -50vw;
}
.tws-why__inner {
	max-width: 1100px;
	margin: 0 auto;
	padding: 18px 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 28px;
	flex-wrap: wrap;
	text-align: center;
}
.tws-why__label {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--tws-lightblue);
	font-weight: 700;
	white-space: nowrap;
}
.tws-why__stats {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.tws-why__stat { display: flex; flex-direction: column; align-items: center; line-height: 1.15; }
.tws-why__num { font-size: 1.6rem; font-weight: 800; color: var(--tws-white); }
.tws-why__stat-label {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--tws-lightblue);
	margin-top: 2px;
}
.tws-why__div { width: 1px; height: 34px; background: rgba(232,240,250,.28); }

@media (max-width: 720px) {
	.tws-why__inner { gap: 14px; padding: 16px; }
	.tws-why__stats { gap: 16px; }
	.tws-why__num { font-size: 1.3rem; }
	.tws-why__div { display: none; }
	.tws-why__stat { flex: 1 1 40%; }
}

/* -------------------------------------------------------------
   Author bio banner (sub-step 1)
------------------------------------------------------------- */
.tws-bio {
	margin: 44px 0 0;
	background: var(--tws-grey);
	border: 1px solid var(--tws-border);
	border-radius: 12px;
	padding: 24px 26px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.tws-bio__media { flex: 0 0 auto; }
.tws-bio__media img {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: block;
	object-fit: cover;
	border: 1px solid var(--tws-border);
	background: var(--tws-white);
}
.tws-bio__name { font-size: 1.2rem; color: var(--tws-navy); margin: 0 0 8px; font-weight: 700; }
.tws-bio__text { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--tws-charcoal); }
.tws-bio__text a { color: var(--tws-blue); font-weight: 600; }
.tws-bio__btn {
	display: inline-block;
	background: var(--tws-navy);
	color: var(--tws-white);
	font-weight: 700;
	font-size: 14px;
	padding: 11px 20px;
	border-radius: 8px;
	text-decoration: none;
}
.tws-bio__btn:hover { background: var(--tws-blue); }

@media (max-width: 600px) {
	.tws-bio { flex-direction: column; align-items: center; text-align: center; }
	.tws-bio__btn { width: 100%; text-align: center; }
}

/* -------------------------------------------------------------
   AI "Summarize with" buttons (sub-step 2)
------------------------------------------------------------- */
.tws-ai {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0 0 32px;
	padding: 14px 16px;
	background: var(--tws-grey);
	border: 1px solid var(--tws-border);
	border-radius: 10px;
}
.tws-ai__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--tws-navy);
	text-transform: uppercase;
	letter-spacing: .04em;
}
.tws-ai__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.tws-ai__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--tws-navy);
	background: var(--tws-white);
	border: 1px solid var(--tws-border);
	border-radius: 8px;
	padding: 8px 16px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.tws-ai__ico { width: 18px; height: 18px; object-fit: contain; border-radius: 4px; display: block; }
.tws-ai__btn:hover { border-color: var(--tws-blue); background: var(--tws-lightblue); }
.tws-ai__btn--chatgpt:hover    { border-color: #10a37f; color: #0d8a6a; }
.tws-ai__btn--perplexity:hover { border-color: #0a0a0a; color: #0a0a0a; }
.tws-ai__btn--gemini:hover     { border-color: #4285f4; color: #2f6ede; }

@media (max-width: 600px) {
	.tws-ai { flex-direction: column; align-items: flex-start; gap: 10px; }
	.tws-ai__btns { width: 100%; }
	.tws-ai__btn { flex: 1 1 auto; justify-content: center; }
}

/* -------------------------------------------------------------
   Sidebar scaffold (sub-step 3)
------------------------------------------------------------- */
.tws-side > * { margin-bottom: 24px; }
.tws-side > *:last-child { margin-bottom: 0; }
.tws-side { display: block; }
.tws-side__placeholder {
	border: 1px dashed var(--tws-border);
	border-radius: 10px;
	padding: 40px 20px;
	text-align: center;
	color: #9AA6B2;
	font-size: 14px;
	background: var(--tws-grey);
}

/* -------------------------------------------------------------
   Sidebar sections — shared + ad (sub-step 4a)
------------------------------------------------------------- */
.tws-side__box {
	border: 1px solid var(--tws-border);
	border-radius: 10px;
	overflow: hidden;
	background: var(--tws-white);
}
.tws-side__ad img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}
.tws-side__ad a { display: block; }

/* -------------------------------------------------------------
   View-count pill + eye icon (sub-step 4b)
------------------------------------------------------------- */
.tws-pill--views {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--tws-lightblue);
	color: var(--tws-navy);
}
.tws-pill--views .tws-eye { display: block; }

/* -------------------------------------------------------------
   Sidebar widget: Recent Posts (sub-step 4b)
------------------------------------------------------------- */
.tws-side__widget { padding: 18px 18px 20px; }
.tws-side__title {
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--tws-navy);
	margin: 0 0 14px;
	font-weight: 700;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--tws-border);
}
.tws-side__list { list-style: none; margin: 0; padding: 0; }
.tws-side__list li { margin: 0 0 12px; padding: 0 0 12px; border-bottom: 1px solid var(--tws-border); }
.tws-side__list li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.tws-side__list a {
	color: var(--tws-charcoal);
	text-decoration: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	display: block;
}
.tws-side__list a:hover { color: var(--tws-blue); }
.tws-side__empty { color: #9AA6B2; font-size: 14px; margin: 0; }

/* -------------------------------------------------------------
   Sidebar chips: Top Searched Topics (sub-step 4c)
------------------------------------------------------------- */
.tws-side__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tws-side__chip {
	font-size: 13px;
	font-weight: 600;
	color: var(--tws-navy);
	background: var(--tws-grey);
	border: 1px solid var(--tws-border);
	border-radius: 999px;
	padding: 6px 14px;
	text-decoration: none;
}
.tws-side__chip:hover { background: var(--tws-lightblue); border-color: var(--tws-blue); }

/* Space between stacked bio paragraphs */
.tws-bio__text + .tws-bio__text { margin-top: 12px; }

/* -------------------------------------------------------------
   Deals & Coupons (sub-step 4d)
------------------------------------------------------------- */
.tws-deals { display: flex; flex-direction: column; gap: 14px; }
.tws-deal__link { display: flex; gap: 12px; text-decoration: none; align-items: flex-start; }
.tws-deal__media { flex: 0 0 auto; }
.tws-deal__media img { width: 52px; height: 52px; object-fit: contain; border-radius: 8px; display: block; background: var(--tws-grey); }
.tws-deal__body { display: flex; flex-direction: column; gap: 3px; }
.tws-deal__title { font-weight: 700; color: var(--tws-navy); font-size: 15px; line-height: 1.3; }
.tws-deal__desc { font-size: 13px; color: #6B7580; line-height: 1.45; }
.tws-deal__code { font-size: 13px; color: var(--tws-charcoal); }
.tws-deal__code strong {
	background: var(--tws-lightblue);
	color: var(--tws-navy);
	padding: 1px 8px;
	border-radius: 5px;
	letter-spacing: .03em;
}
.tws-deal__link:hover .tws-deal__title { color: var(--tws-blue); }

/* -------------------------------------------------------------
   Sticky 300x600 vertical ad (sub-step 4e)
------------------------------------------------------------- */
.tws-side__sticky {
	position: -webkit-sticky;
	position: sticky;
	top: 90px;
}
/* sticky fails if an ancestor clips overflow — keep the layout chain visible */
html, body { overflow-x: clip; }
.tws-single, .tws-layout, .tws-layout__side, .tws-side { overflow: visible; }
.tws-side__ad--vert { max-width: 300px; margin: 0 auto; }
.tws-side__ad--vert img {
	width: 100%;
	height: auto;
	aspect-ratio: 300 / 600;
	object-fit: cover;
	display: block;
}
@media (max-width: 1000px) {
	/* On stacked mobile layout, sticky offers little value and can overlap; unset. */
	.tws-side__sticky { position: static; }
}