/*
	Theme Name: Andy Blecher Podiatrist
	Theme URI: https://podiatrist.capetown/
	Description: Hello Elementor child theme for the Andy Blecher Podiatrist website. Holds the site's design-system CSS custom properties and any custom styling.
	Author: Hospitality Innovations
	Template: hello-elementor
	Version: 0.1.0
	Requires at least: 6.0
	Requires PHP: 8.1
	Text Domain: cpod
*/

:root {
	/* Colour — warm neutrals + the practice's own logo blue as the brand colour */
	--cpod-color-text: #2b2a28;
	--cpod-color-text-muted: #5b5954;
	--cpod-color-bg: #faf8f5;
	--cpod-color-bg-alt: #f1ede6;
	--cpod-color-surface: #ffffff;
	--cpod-color-border: #e3ded4;
	/* Deeper shade of the logo blue — used wherever white text sits on top (buttons,
	   trust bar), since the literal logo blue (#00b3f7) is too light to meet WCAG AA
	   contrast (~2.4:1) against white text. Same hue, adjusted for legibility. */
	--cpod-color-primary: #007ea8;
	--cpod-color-primary-hover: #006488;
	--cpod-color-on-primary: #ffffff;
	--cpod-color-link: #00b3f7; /* extracted directly from the practice's existing logo */
	--cpod-color-link-hover: #0092cc;

	/* Typography */
	--cpod-font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--cpod-font-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

	/* Spacing scale */
	--cpod-space-3xs: 0.25rem;
	--cpod-space-2xs: 0.5rem;
	--cpod-space-xs: 0.75rem;
	--cpod-space-sm: 1rem;
	--cpod-space-md: 1.5rem;
	--cpod-space-lg: 2.5rem;
	--cpod-space-xl: 4rem;
	--cpod-space-2xl: 6rem;

	/* Shape */
	--cpod-radius-sm: 4px;
	--cpod-radius-md: 10px;
	--cpod-container-width: 1200px;
}

/* Base typography
-------------------------------------------------- */

body {
	font-family: var( --cpod-font-body );
	color: var( --cpod-color-text );
	background: var( --cpod-color-bg );
	font-size: 1rem;
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var( --cpod-font-heading );
	font-weight: 600;
	line-height: 1.25;
	color: var( --cpod-color-text );
}

h1 {
	font-size: clamp( 2rem, 1.6rem + 1.6vw, 2.75rem );
}

h2 {
	font-size: clamp( 1.5rem, 1.3rem + 0.9vw, 2rem );
}

h3 {
	font-size: 1.375rem;
}

h4 {
	font-size: 1.125rem;
}

p {
	margin: 0 0 var( --cpod-space-sm );
}

a {
	color: var( --cpod-color-link );
	text-decoration: none;
}

/*
 * The parent theme's theme.css sets ".page-content a { text-decoration:
 * underline }" — more specific than the plain "a" rule above, so it must be
 * matched directly here (our own page content always renders inside
 * .page-content). Underline also visually paints through nested inline
 * text (card headings/paragraphs), which is why it showed up there too.
 */
.page-content a {
	text-decoration: none;
}

a:hover,
a:focus {
	color: var( --cpod-color-link-hover );
}

/* Buttons
-------------------------------------------------- */

/* Plain anchor buttons — only relevant to pages still built as plain HTML
   (e.g. a future Contact/Locations page), where "<a class=button--cta>" IS
   the real clickable element. */

a.button,
a.button--cta,
a.button--secondary {
	display: inline-block;
	font-family: var( --cpod-font-body );
	font-weight: 600;
	text-decoration: none;
	padding: 0.7em 1.4em;
	border-radius: var( --cpod-radius-sm );
	border: 2px solid var( --cpod-color-primary );
	white-space: nowrap;
}

a.button--cta {
	background: var( --cpod-color-primary );
	color: var( --cpod-color-on-primary );
}

a.button--cta:hover,
a.button--cta:focus {
	background: var( --cpod-color-primary-hover );
	border-color: var( --cpod-color-primary-hover );
	color: var( --cpod-color-on-primary );
}

a.button--secondary {
	background: transparent;
	color: var( --cpod-color-primary );
}

a.button--secondary:hover,
a.button--secondary:focus {
	background: var( --cpod-color-primary );
	color: var( --cpod-color-on-primary );
}

/* Elementor button widget — cpod_button_widget()'s "_css_classes" setting
   ("button button--cta") lands on the WIDGET WRAPPER div, not on the real
   clickable element Elementor renders inside it ("<a class=elementor-button>").
   Styling the bare ".button--cta" class (as above) painted an unwanted
   coloured box around an unstyled inner link. Elementor's own
   ".elementor-button{background-color:#69727d;...}" (single class) is the
   default appearance of that inner anchor; our 2-class selectors below
   beat it on specificity regardless of load order and give the real anchor
   the correct brand styling instead. */

.elementor-widget-button .elementor-button {
	font-family: var( --cpod-font-body );
	font-weight: 600;
	text-decoration: none;
	padding: 0.7em 1.4em;
	border-radius: var( --cpod-radius-sm );
	border: 2px solid var( --cpod-color-primary );
	white-space: nowrap;
}

.elementor-widget-button.button--cta .elementor-button {
	background: var( --cpod-color-primary );
	color: var( --cpod-color-on-primary );
}

.elementor-widget-button.button--cta .elementor-button:hover,
.elementor-widget-button.button--cta .elementor-button:focus {
	background: var( --cpod-color-primary-hover );
	border-color: var( --cpod-color-primary-hover );
	color: var( --cpod-color-on-primary );
}

.elementor-widget-button.button--secondary .elementor-button {
	background: transparent;
	color: var( --cpod-color-primary );
}

.elementor-widget-button.button--secondary .elementor-button:hover,
.elementor-widget-button.button--secondary .elementor-button:focus {
	background: var( --cpod-color-primary );
	color: var( --cpod-color-on-primary );
}

/* Card primitive — for services, team, and location summaries */

.card {
	background: var( --cpod-color-surface );
	border: 1px solid var( --cpod-color-border );
	border-radius: var( --cpod-radius-md );
	padding: var( --cpod-space-md );
}

/* Two-column intro pattern — image beside text + a plain link list.
   Used on the Services overview page (and reusable for similar pages). */

.services-intro {
	padding: var( --cpod-space-xl ) var( --cpod-space-md );
}

.services-intro__inner {
	max-width: var( --cpod-container-width );
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: var( --cpod-space-xl );
	align-items: center;
}

/*
 * flex-basis/grow here only matter when this row is a genuine flex container
 * (Elementor-built pages, e.g. Meet the Team) — harmless no-ops on the
 * grid-based version used by the plain Services pages.
 *
 * Elementor's own frontend.min.css includes ".e-con.e-flex { flex: var(...) }"
 * — a two-class selector — which beats a plain single-class rule on
 * specificity regardless of load order. Nesting under the parent class here
 * matches that specificity so ours reliably wins the tie (ours loads later).
 */
.services-intro__inner .services-intro__image {
	flex: 1 1 0 !important;
	min-width: 0;
}

.services-intro__inner .services-intro__text {
	flex: 1.1 1 0 !important;
	min-width: 0;
}

.services-intro__image img {
	width: 100%;
	height: auto;
	border-radius: var( --cpod-radius-md );
	display: block;
}

/* Framed variant — for product/equipment shots that need breathing room
   around them (e.g. the neoV laser device), rather than filling the column
   edge-to-edge like the practice's own interior/team photography does. */

.services-intro__image--framed {
	background: #ffffff;
	border: 1px solid var( --cpod-color-border );
	border-radius: var( --cpod-radius-md );
	padding: var( --cpod-space-xl );
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 320px;
}

.services-intro__image--framed img {
	border-radius: var( --cpod-radius-sm );
}

/* Compact variant — shrinks the image 35% smaller than the column's full
   edge-to-edge width (Paediatric Podiatry's cropped smiley-toes shot reads
   better smaller than a full-bleed photo). Centered so it doesn't skew
   left within the column. */
.services-intro__image--compact img {
	width: 65%;
	margin: 0 auto;
}

.services-intro__list {
	list-style: none;
	margin: var( --cpod-space-md ) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --cpod-space-2xs ) var( --cpod-space-md );
}

.services-intro__list a {
	font-weight: 600;
}

@media ( max-width: 782px ) {
	.services-intro__inner {
		grid-template-columns: 1fr;
	}

	.services-intro__image {
		order: -1;
	}

	.services-intro__list {
		grid-template-columns: 1fr;
	}
}

/* Shared section/CTA primitives — used site-wide (homepage and inner pages) */

.section {
	padding: var( --cpod-space-xl ) var( --cpod-space-md );
}

.section--alt {
	background: var( --cpod-color-bg-alt );
}

.section-inner {
	max-width: var( --cpod-container-width );
	margin: 0 auto;
}

.section-inner > h2 {
	text-align: center;
	margin-bottom: var( --cpod-space-lg );
}

.cta-band {
	background: var( --cpod-color-bg-alt );
	text-align: center;
}

.cta-band__inner p {
	color: var( --cpod-color-text-muted );
	margin-bottom: var( --cpod-space-md );
}

/* Wraps the "Enquire" button + phone number together so they sit inline,
   side by side, rather than stacking as separate flex items in the
   cta-band__inner column (see handoff.md gotcha on Elementor containers
   defaulting to flex-direction: column). */
.cta-band__actions {
	display: flex !important;
	flex-direction: row !important;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: var( --cpod-space-sm ) var( --cpod-space-md );
}

.cta-band .site-header__phone {
	font-weight: 600;
}

@media ( max-width: 576px ) {
	.cta-band__actions {
		flex-direction: column !important;
	}
}

/* Service/condition article template — hero image, intro, Q&A sections */

.service-article {
	max-width: 900px;
	margin: var( --cpod-space-xl ) auto;
	padding: var( --cpod-space-xl ) var( --cpod-space-md );
	background: var( --cpod-color-bg-alt );
	border-radius: var( --cpod-radius-md );
}

/*
 * ".service-article" is a top-level Elementor container. Two of Elementor's
 * own frontend.min.css rules fight our styling here, and neither is a fair
 * fight on specificity/load-order alone — confirmed by inspecting the raw
 * (unminified-by-hand) selectors directly, not assumed from memory:
 *
 * 1. Padding: ".e-con{padding-inline-start:var(--padding-left);
 *    padding-inline-end:var(--padding-right)}" sets padding via the CSS
 *    *logical* properties, a different property pair than our plain
 *    "padding" shorthand (padding-left/padding-right) above — so ours never
 *    even competed for the same property.
 * 2. Max-width: the real selector is
 *    ":is(.elementor-section-wrap,[data-elementor-id]) > .e-con
 *    { max-width:min(100%,var(--width)) }" — an :is() + child-combinator
 *    selector worth TWO specificity units (one from :is()'s attribute
 *    selector, one from .e-con), not the single class it looks like at a
 *    glance. It beats our single-class ".service-article{max-width:900px}"
 *    outright, regardless of stylesheet load order — the same category of
 *    bug as the documented ".e-con.e-flex" two-class gotcha, just easier to
 *    miss because the two classes aren't adjacent in the same compound.
 *
 * Fix for both: target the same properties Elementor actually uses, with
 * !important, removing any ambiguity about specificity or load order.
 */
.service-article {
	max-width: 900px !important;
	padding-inline-start: var( --cpod-space-md ) !important;
	padding-inline-end: var( --cpod-space-md ) !important;
}

.service-article__intro {
	font-size: 1.0625rem;
	color: var( --cpod-color-text-muted );
}

/* Contact page — two side-by-side location maps */

.contact-maps {
	display: flex !important;
	flex-direction: row !important;
	gap: var( --cpod-space-lg );
	flex-wrap: wrap;
}

.contact-maps__item {
	flex: 1 1 300px;
	min-width: 0;
}

.contact-maps__item .elementor-custom-embed,
.contact-maps__item iframe {
	width: 100%;
	min-height: 300px;
	border: 0;
}

@media ( max-width: 782px ) {
	.contact-maps {
		flex-direction: column !important;
	}
}

.service-article h2:first-child {
	margin-top: 0;
}

.service-article h2 {
	margin-top: var( --cpod-space-lg );
	color: var( --cpod-color-primary );
}

.service-article ul {
	color: var( --cpod-color-text-muted );
	line-height: 1.7;
}

.service-article ul li::marker {
	color: var( --cpod-color-primary );
}

/* Team member — alternating image/text layout, matching Meet the Team.
   Entrance animation is handled natively by Elementor (this page is built
   with real Elementor containers/widgets), not by custom JS. */

.team-member {
	max-width: var( --cpod-container-width );
	margin: 0 auto;
	padding: var( --cpod-space-xl ) var( --cpod-space-md );
}

.team-member__row {
	display: flex;
	align-items: center;
	gap: var( --cpod-space-xl );
	flex-wrap: wrap;
}

/*
 * Elementor's own container architecture sets "--container-widget-align-self:
 * stretch" on child containers by default, which overrides the parent's
 * align-items above at the child level. Explicitly re-centering both
 * columns here is what actually achieves vertical centering.
 */
.team-member__image,
.team-member__text {
	align-self: center;
}

/*
 * Elementor's own ".e-con.e-flex { flex: var(--flex-grow) ... }" is a
 * two-class selector that beats a single-class rule on specificity
 * regardless of load order. Nesting under the parent row class matches
 * that specificity so ours reliably wins (short bios like Sister Anne's
 * placeholder text were most visibly affected, collapsing narrow).
 */
.team-member__row .team-member__image {
	flex: 0 1 360px;
	max-width: 360px;
}

.team-member__image img {
	width: 100%;
	height: auto;
	border-radius: var( --cpod-radius-md );
	display: block;
}

.team-member__row .team-member__text {
	flex: 1.4 1 0;
}

/*
 * Alternating members (Lara, Sister Anne) put the text block before the
 * image in the DOM so desktop rows visually alternate left/right (see
 * team_member()'s $reverse param in tools/build-team-elementor.php). On
 * mobile the row wraps into a single column, so that same DOM order made
 * every second member's image land below its bio instead of above it.
 * Force a consistent image-then-text stack for all members at mobile width.
 */
@media ( max-width: 782px ) {
	.team-member__image {
		order: -1;
	}

	.team-member__text {
		order: 2;
	}
}

.team-member__text h2 {
	margin-top: 0;
}

.team-member__role {
	color: var( --cpod-color-primary );
	font-weight: 600;
	margin: 0 0 var( --cpod-space-sm );
}

/* Header
-------------------------------------------------- */

.site-header {
	background: var( --cpod-color-surface );
	border-bottom: 1px solid var( --cpod-color-border );
}

.site-header .header-inner {
	max-width: var( --cpod-container-width );
	margin: 0 auto;
	padding: var( --cpod-space-xs ) var( --cpod-space-md );
	align-items: center;
	gap: var( --cpod-space-xs ) var( --cpod-space-md );
}

.site-header .site-branding .site-title a {
	font-family: var( --cpod-font-heading );
	font-size: 1.375rem;
	font-weight: 600;
	text-decoration: none;
	color: var( --cpod-color-text );
}

/*
 * The parent theme makes ".site-branding" a "display:flex;flex-direction:
 * column" box so logo/title/tagline stack — fine on its own, but here
 * ".site-branding" is ALSO an auto-width flex-item of the ".header-inner"
 * row, and that combination mis-sizes it: its shrink-to-fit width comes out
 * narrower than the tagline text, which then overflows past the (too-narrow)
 * box uncentered instead of being included in the width calculation.
 * Reverting to plain block stacking sidesteps that nested-flex sizing quirk
 * entirely — block shrink-to-fit width correctly accounts for all
 * descendant content, and text-align/margin:auto center reliably within it.
 */
.site-header .site-branding {
	margin-right: auto;
	display: block;
	text-align: center;
}

.site-header .site-logo img {
	max-height: 64px;
	max-width: 260px;
	width: auto;
	height: auto;
	margin: 0 auto;
}

/* Block stacking (see comment above) drops the parent's flex "gap" between
   logo and tagline, and its ".site-description{margin:0}" reset — restore
   the spacing directly. */
.site-header .site-description {
	margin-top: var( --cpod-space-2xs );
}

/* Shared tagline style — used below the logo in the header and below the
   footer menu, so both stay visually in sync automatically. Casing comes
   straight from CPOD_TAGLINE's own text ("Clinical Excellence, Delivered
   with Compassion") — no text-transform, so "with" stays lowercase as
   written. Header and footer each set their own font-size below: smaller
   in the header (a supporting line under the wordmark), larger in the
   footer (its own standalone row, no logo competing for attention). */
.cpod-tagline {
	font-family: var( --cpod-font-body );
	font-weight: 600;
	color: var( --cpod-color-text-muted );
}

.site-header .cpod-tagline {
	font-size: 0.7rem;
}

.site-footer .cpod-tagline {
	font-size: 0.9375rem;
	/* Grid "gap" on .footer-inner already provides spacing between rows —
	   without this, the global "p{margin:0 0 1rem}" rule stacks extra space
	   on top of that gap. */
	margin: 0;
}

/*
 * The parent theme's reset.css sets a generic "button:focus, button:hover"
 * rule (pink background, white text) meant for its own default buttons.
 * The mobile nav toggle is a <button>, so it inherited that clash in both
 * its "Menu" (closed) and "Close" (open, aria-expanded="true") states.
 */
.site-navigation-toggle:hover,
.site-navigation-toggle:focus {
	background-color: rgba( 0, 0, 0, 0.05 );
	color: var( --cpod-color-text );
}

.site-navigation-toggle:focus-visible {
	outline: 2px solid var( --cpod-color-link );
	outline-offset: 2px;
}

.site-header .menu a,
.site-footer .menu a {
	font-family: var( --cpod-font-heading );
	font-weight: 600;
	color: var( --cpod-color-text );
}

/*
 * Parent theme sets ".site-navigation ul.menu li ul{min-width:150px}" for
 * the dropdown submenu (WordPress's own ".sub-menu" class on the nested
 * <ul>) — three classes here beats its one-class-plus-elements selector on
 * specificity, so this reliably wins regardless of load order.
 */
.site-header .site-navigation .sub-menu {
	min-width: 250px;
}

.site-header .menu a:hover,
.site-header .menu a:focus,
.site-header .menu a:active,
.site-header .menu .current-menu-item > a,
.site-footer .menu a:hover,
.site-footer .menu a:focus,
.site-footer .menu a:active,
.site-footer .menu .current-menu-item > a {
	color: var( --cpod-color-link );
}

.site-header__phone {
	color: var( --cpod-color-link );
	font-weight: 600;
	white-space: nowrap;
}

/* Footer
-------------------------------------------------- */

.site-footer {
	background: var( --cpod-color-bg-alt );
	border-top: 1px solid var( --cpod-color-border );
	margin-top: var( --cpod-space-xl );
}

.site-footer .footer-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: var( --cpod-space-md );
	display: grid;
	grid-template-columns: minmax( 0, 1.4fr ) repeat( 3, minmax( 0, 1fr ) );
	/* Row-gap tighter than column-gap: stacked full-width rows (menu,
	   tagline, copyright) don't need as much breathing room between them
	   as the 4 side-by-side info columns do. */
	gap: var( --cpod-space-sm ) var( --cpod-space-lg );
	text-align: center;
}

.site-footer__brand {
	display: flex;
	justify-content: center;
	min-width: 0;
}

.site-footer__brand img {
	max-height: 150px;
	max-width: min( 400px, 100% );
	width: auto;
	height: auto;
	display: block;
}

.site-footer__heading {
	font-family: var( --cpod-font-heading );
	font-size: 1.0625rem;
	font-weight: 600;
	margin: 0 0 var( --cpod-space-xs );
}

.site-footer__block p {
	margin: 0;
	line-height: 1.6;
}

.site-footer__block a {
	color: var( --cpod-color-link );
}

.site-footer__row {
	grid-column: 1 / -1;
}

.site-footer .site-navigation.site-footer__row {
	justify-content: center;
}

@media ( max-width: 782px ) {
	.site-footer .footer-inner {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( max-width: 480px ) {
	.site-footer .footer-inner {
		grid-template-columns: 1fr;
	}
}

/* Accessibility
-------------------------------------------------- */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var( --cpod-color-primary );
	outline-offset: 2px;
}

@media ( prefers-reduced-motion: reduce ) {
	* {
		transition: none !important;
		animation: none !important;
	}
}