/* ===========================================================================
   Samadhan Clinic - breadcrumb banner, article typography, floating buttons
   ---------------------------------------------------------------------------
   Added 2026-10-16. Every rule here was measured on the rendered page first,
   trialled on blog/denture-sore-spots-in-dwarka.php, and only then rolled out.
   Loaded after responsive.css in header.php, so it wins on equal specificity.

   Layout only - no markup, text or heading levels are changed by this file.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Breadcrumb links
   style.css sets text-decoration:underline on .breadcrumb-item a, and its
   :hover rule only changes the colour, so the underline never lifts. Applies
   at every width, not just phones.
   --------------------------------------------------------------------------- */
#breadcrumb .breadcrumb-item a,
#breadcrumb .breadcrumb-item a:hover,
#breadcrumb .breadcrumb-item a:focus {
	text-decoration: none;
}


/* ---------------------------------------------------------------------------
   2. Breadcrumb banner on phones
   responsive.css shrinks ".breadcrumb-holder h4" at 575px, but the markup is
   <h1 class="h4-sm"> - so the title was never caught and stayed at 35px, far
   too large for a 360px screen. The holder is centred, but the crumb list is
   a flex row defaulting to flex-start, so it packed to the left under a
   centred title. Sizes are px, not rem: responsive.css shrinks the root font
   size on phones, so 0.875rem resolved to 12.25px here.
   --------------------------------------------------------------------------- */
@media (max-width: 767.99px) {
	#breadcrumb .breadcrumb-holder h1.h4-sm {
		font-size: 1.65rem;
		line-height: 1.3;
		margin-top: 6px;
	}

	#breadcrumb .breadcrumb-holder ol.breadcrumb {
		justify-content: center;
		flex-wrap: wrap;
		font-size: 13px;
	}
}

@media (max-width: 575px) {
	#breadcrumb .breadcrumb-holder h1.h4-sm {
		font-size: 24px;
		line-height: 1.3;
	}

	#breadcrumb .breadcrumb-holder {
		padding-top: 20px;
		padding-bottom: 20px;
	}
}


/* ---------------------------------------------------------------------------
   3. Blog page top and bottom spacing on phones
   .wide-100 gives the section 80px of top padding while div#single-blog-page
   zeroes the bottom, and the footer adds its own 80px - so a post opened with
   80px of blank space above the hero image and closed with another 80px.
   40px each reads balanced at this width and brings the hero into the first
   screenful.

   The footer rule is written as a sibling of #single-blog-page on purpose: the
   imbalance only exists on post pages, so service pages, the about page and
   the rest keep the footer spacing they were designed with.
   --------------------------------------------------------------------------- */
@media (max-width: 767.99px) {
	#single-blog-page.wide-100 {
		padding-top: 40px;
	}

	#single-blog-page ~ #footer-3 {
		padding-top: 40px;
	}

	/* blog/ulcer-colitis-symptoms-causes-treatment.php carries an extra closing
	   </div> before the footer include, which ends .page early and leaves the
	   footer outside it - so the sibling rule above cannot reach it there. This
	   catches the footer whatever the wrapper nesting turns out to be. Kept as a
	   second rule, not a replacement, so browsers without :has() still get the
	   common case right. */
	body:has(#single-blog-page) #footer-3 {
		padding-top: 40px;
	}
}


/* ---------------------------------------------------------------------------
   4. Article heading scale
   The h2/h3 in a post carry no class, so they take the global sizes (28px and
   25px) at every width. Against a banner title of 21px on phones that inverts
   the hierarchy - the section headings outrank the page title - and 28 vs 25
   is too close to separate an h2 from an h3 anywhere. px, not rem, for the
   same root-size reason as above. Scoped to the article body, so sidebar,
   footer and related-post headings are untouched.
   --------------------------------------------------------------------------- */
.sblog-post-txt h3 {
	font-size: 22px;
	line-height: 1.35;
}

@media (max-width: 767.99px) {
	.sblog-post-txt h2 {
		font-size: 22px;
		line-height: 1.35;
	}

	.sblog-post-txt h3 {
		font-size: 19px;
		line-height: 1.4;
	}
}

@media (max-width: 575px) {
	.sblog-post-txt h2 {
		font-size: 20px;
	}

	.sblog-post-txt h3 {
		font-size: 17.5px;
	}
}


/* ---------------------------------------------------------------------------
   5. Article vertical rhythm
   Measured on the rendered page: on phones a section heading had 35px of
   blank space above it and 20px below, while two ordinary paragraphs sat 24px
   apart - so an h2 earned no more separation than a plain paragraph break,
   and it hung almost midway between the text it followed and the text it
   introduces. A heading belongs to what comes after it, so the space above is
   kept as the section break and the space below is cut to roughly half of it.
   Note a heading's own line-height already leaves ~17px of empty space under
   its glyphs, so these margins read far smaller than the gap they produce -
   and on desktop they go negative to reach the target at all. Result on
   phones: paragraph 21px < h3 26px < h2 32px above, with both headings about
   2.1x closer to their own text than to the previous section.
   --------------------------------------------------------------------------- */
.sblog-post-txt p,
.sblog-post-txt ul,
.sblog-post-txt ol {
	margin-bottom: 13px;
}

.sblog-post-txt h2 {
	margin-bottom: -7px;
}

.sblog-post-txt h3 {
	margin-top: 16px;
	margin-bottom: -1px;
}

/* an h3 straight after an h2 is one unit - no section break between them */
.sblog-post-txt h2 + h3 {
	margin-top: 6px;
}

@media (max-width: 767.99px) {
	.sblog-post-txt p,
	.sblog-post-txt ul,
	.sblog-post-txt ol {
		margin-bottom: 11px;
	}

	.sblog-post-txt h2 {
		margin-bottom: 0;
	}

	.sblog-post-txt h3 {
		margin-top: 16px;
		margin-bottom: 5px;
	}

	/* h2 no longer pulls up with a negative margin here, so this one
	   drops to 0 to keep the h2/h3 pair tight */
	.sblog-post-txt h2 + h3 {
		margin-top: 0;
	}
}

/* Large phones and small tablets run one heading size up (h2 22px, h3 19px),
   so the margins above would open to 20px and 15px here - back to the gap
   this block exists to close. Trimmed to hold the same ~2.3:1 feel. */
@media (min-width: 576px) and (max-width: 767.99px) {
	.sblog-post-txt h2 {
		margin-bottom: -5px;
	}

	.sblog-post-txt h3 {
		margin-bottom: 2px;
	}
}


/* ---------------------------------------------------------------------------
   6. Reviewer byline
   A tinted wash of the brand teal (#00a3c8) with a solid accent edge, so it
   reads as a credential strip rather than body copy. Text and link colours
   are darkened from the site defaults to clear WCAG AA 4.5:1 against this
   background - the stock #6F8BA4 (3.2:1) and #00a3c8 (2.7:1) do not.
   --------------------------------------------------------------------------- */
.sblog-post-txt .post-byline {
	background: #f1f9fb;
	border-left: 3px solid #00a3c8;
	border-radius: 4px;
	padding: 12px 16px;
	margin-bottom: 26px;
	color: #4a6782;
	font-size: 0.9rem;
	line-height: 1.6;
}

.sblog-post-txt .post-byline a {
	color: #00748f;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 575px) {
	.sblog-post-txt .post-byline {
		padding: 10px 13px;
		font-size: 0.85rem;
	}
}


/* ---------------------------------------------------------------------------
   7. Floating call and WhatsApp buttons
   Both are position:fixed at left 36px / 40px. On a desktop the text column is
   centred, so they sit harmlessly in the left gutter - measured on a 1440px
   viewport, they cover nothing. Below the lg breakpoint the column runs the
   full width and starts at the left edge, so the buttons sat on top of the
   first characters of body lines and of the footer's link column, which made
   those lines unreadable.

   Moving them to the right edge at those widths puts them over the ragged
   line-ends instead of the line-starts, where they obscure far less. Sizes and
   tap targets are untouched - they stay at least 44px, and the links, labels
   and numbers are unchanged. Desktop placement is deliberately left alone.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.float {
		left: auto;
		right: 16px;
	}

	/* 19px, not 16px: this button's box is a few px narrower than the call
	   button's, and the offset keeps the two centred on the same vertical line */
	.whatsapp-icon {
		left: auto;
		right: 19px;
	}
}

/* Size. Both buttons were a fixed 60x60 and 53x64 at every width, so the same
   control that takes 4.2% of a 1440px desktop took 16.7% of a 360px phone -
   four times as dominant on the screen with the least room. Scaled down for
   phones and held at 48px, which still clears the 44px minimum tap target
   (WCAG 2.5.5, Apple HIG 44pt, Android 48dp). The call glyph is centred with
   flex rather than the hand-tuned padding, so it stays centred at any size.
   The gap between the two goes from 6px to about 12px - at 6px they read as
   one smudged blob rather than two separate controls. */
@media (max-width: 767.99px) {
	.float {
		width: 48px;
		height: 48px;
		font-size: 23px;
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		bottom: 88px;
	}

	/* right drops 19px -> 17px: the glyph is narrower once scaled down, and this
	   puts the two buttons back on the same vertical centre line */
	.whatsapp-icon {
		font-size: 31px;
		right: 17px;
		bottom: 28px;
	}
}

@media (max-width: 575px) {
	.float {
		width: 46px;
		height: 46px;
		font-size: 22px;
		bottom: 84px;
	}

	.whatsapp-icon {
		font-size: 30px;
		bottom: 26px;
	}
}


/* ---------------------------------------------------------------------------
   8. No underline on hover, anywhere
   bootstrap.min.css carries a blanket `a:hover { text-decoration: underline }`
   that matches every link on the page, and style.css and menu.css pile their
   own on top for blog titles, footer links, megamenu entries and the mobile
   sub-menus. The result was that almost any link grew an underline the moment
   the pointer touched it. Those extra selectors are more specific than a plain
   `a:hover`, so each one is named here rather than relying on source order.

   Hovering no longer changes the underline anywhere. Links that are drawn
   underlined by design keep it in both states, so they do not flicker.

   In-article links stay distinguishable without one: the teal #00a3c8 reads at
   4.26:1 against the #333 body text, above the 3:1 WCAG 1.4.1 asks for when
   colour is the only thing marking a link.
   --------------------------------------------------------------------------- */
a:hover,
a:focus,
.blog-post-txt h5 a:hover,
.footer-links li a:hover,
.popular-posts .post-summary a:hover,
.wsmegamenu h5.h5-xs a:hover,
.wsmegamenu .latest-news .post-summary a:hover,
.terms-box p a:hover,
.sblog-post-txt .post-byline a:hover,
.sblog-post-txt .post-byline a:focus,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > a:hover,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
.wsmenu > .wsmenu-list > li > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover {
	text-decoration: none;
}

/* The footer email is underlined at rest, by design - hovering it should not
   make the underline vanish, which a bare a:hover rule would do. */
p.foo-email a,
p.foo-email a:hover,
p.foo-email a:focus {
	text-decoration: underline;
}

/* style.css:952 already set `a:focus { outline: none }`, so a keyboard user had
   no focus indicator on links at all; removing the focus underline above would
   have left nothing. :focus-visible fires only for keyboard navigation, so a
   mouse click still shows nothing. */
a:focus-visible {
	outline: 2px solid #00748f;
	outline-offset: 2px;
}