/*
Theme Name: Bağdatlar Oto Lastik
Template: vehicle-detailing
Description: Child theme for Bağdatlar Oto Lastik: mobile-first templates, contact actions, regional hierarchy and SEO output kept in version control.
Version: 1.2.0
Requires at least: 6.6
Requires PHP: 7.4
Text Domain: bagdatlar
License: GPLv3 or later
*/

/* ---------- 1. Design tokens ---------- */
:root {
	/* Colour: light neutral surfaces, the brand orange for actions and small accents, the brand navy
	   (from the logo) for the footer and for text on orange. */
	--bgd-bg: #eef1f4;
	--bgd-bg-alt: #e3e8ee;
	--bgd-surface: #fff;
	--bgd-surface-2: #f2f4f7;
	--bgd-line: #d9dfe6;
	--bgd-line-strong: #c9d0d8;
	--bgd-text: #3a4552;
	--bgd-heading: #17212b;
	--bgd-muted: #5b6876;
	--bgd-navy: #0b1f33;
	--bgd-accent: #f97316;
	--bgd-accent-hover: #ea6c10;
	--bgd-accent-active: #dc5f0a;
	/* The brand orange is too light for text on a light background; these darker shades keep 4.5:1 (text) and 3:1 (icons). */
	--bgd-accent-text: #c2410c;
	--bgd-accent-icon: #ea580c;
	--bgd-on-accent: var(--bgd-navy);
	--bgd-whatsapp: #25d366;
	/* Navy text on WhatsApp green: 8.4:1; the hover and pressed shades keep 6.8:1 and 5.4:1. */
	--bgd-whatsapp-hover: #1ebe5d;
	--bgd-whatsapp-active: #1aa851;
	--bgd-focus: var(--bgd-navy);
	--bgd-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
	--bgd-shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
	/* Names used before version 1.1; kept so nothing that still refers to them breaks. */
	--bgd-orange: var(--bgd-accent);
	--bgd-call: var(--bgd-accent);

	/* Type: Play 400/700 only; sizes in rem so the reader's own text size is respected. */
	--bgd-fs-xs: .8125rem;
	--bgd-fs-sm: .9375rem;
	--bgd-fs-md: 1.0625rem;
	--bgd-fs-lg: 1.1875rem;

	/* Space and shape */
	--bgd-section: clamp(2.75rem, 2.1rem + 3.2vw, 4.75rem);
	--bgd-radius-sm: 8px;
	--bgd-radius: 12px;
	--bgd-radius-lg: 14px;
	--bgd-control: 3.25rem;

	/* The floating contact buttons: 25px from the bottom and side edges, 54px tall (where the Chaty bubble used to be). */
	--bgd-float-edge: 25px;
	--bgd-float-size: 54px;
	/* Room the floating contact buttons take at the bottom of the window; whatever must not end up under them clears this. */
	--bgd-float-h: calc(var(--bgd-float-edge) + var(--bgd-float-size) + .75rem + env(safe-area-inset-bottom, 0px));

	/* Icons: 24x24 SVG masks; see the "Icons" section below for how they are applied. */
	--bgd-ico-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E");
	--bgd-ico-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
	--bgd-ico-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 6v6l4 2'/%3E%3C/svg%3E");
	--bgd-ico-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
	--bgd-ico-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7'/%3E%3C/svg%3E");
	--bgd-ico-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	--bgd-ico-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z'/%3E%3Cpath d='m22 6-10 7L2 6'/%3E%3C/svg%3E");
	--bgd-ico-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 3h15v13H1zM16 8h4l3 3v5h-7z'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
	--bgd-ico-tool: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E");
	--bgd-ico-swap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 4v6h-6M1 20v-6h6'/%3E%3Cpath d='M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15'/%3E%3C/svg%3E");
	--bgd-ico-tire: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 2v2.6M12 19.4V22M2 12h2.6M19.4 12H22M4.93 4.93l1.84 1.84M17.23 17.23l1.84 1.84M4.93 19.07l1.84-1.84M17.23 6.77l1.84-1.84'/%3E%3C/svg%3E");
	--bgd-ico-rim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Ccircle cx='12' cy='12' r='2.2'/%3E%3Cpath d='M12 9.8V2M14.09 11.32l7.42-2.41M13.29 13.78l4.59 6.31M10.71 13.78l-4.59 6.31M9.91 11.32 2.49 8.91'/%3E%3C/svg%3E");
	--bgd-ico-battery: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='20' height='13' rx='2'/%3E%3Cpath d='M6 7V4h3v3M15 7V4h3v3M6 13.5h3M15 13.5h3M16.5 12v3'/%3E%3C/svg%3E");
	--bgd-ico-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M 12.011719 2 C 6.5057187 2 2.0234844 6.478375 2.0214844 11.984375 C 2.0204844 13.744375 2.4814687 15.462563 3.3554688 16.976562 L 2 22 L 7.2324219 20.763672 C 8.6914219 21.559672 10.333859 21.977516 12.005859 21.978516 L 12.009766 21.978516 C 17.514766 21.978516 21.995047 17.499141 21.998047 11.994141 C 22.000047 9.3251406 20.962172 6.8157344 19.076172 4.9277344 C 17.190172 3.0407344 14.683719 2.001 12.011719 2 z M 12.009766 4 C 14.145766 4.001 16.153109 4.8337969 17.662109 6.3417969 C 19.171109 7.8517969 20.000047 9.8581875 19.998047 11.992188 C 19.996047 16.396187 16.413812 19.978516 12.007812 19.978516 C 10.674812 19.977516 9.3544062 19.642812 8.1914062 19.007812 L 7.5175781 18.640625 L 6.7734375 18.816406 L 4.8046875 19.28125 L 5.2851562 17.496094 L 5.5019531 16.695312 L 5.0878906 15.976562 C 4.3898906 14.768562 4.0204844 13.387375 4.0214844 11.984375 C 4.0234844 7.582375 7.6067656 4 12.009766 4 z M 8.4765625 7.375 C 8.3095625 7.375 8.0395469 7.4375 7.8105469 7.6875 C 7.5815469 7.9365 6.9355469 8.5395781 6.9355469 9.7675781 C 6.9355469 10.995578 7.8300781 12.182609 7.9550781 12.349609 C 8.0790781 12.515609 9.68175 15.115234 12.21875 16.115234 C 14.32675 16.946234 14.754891 16.782234 15.212891 16.740234 C 15.670891 16.699234 16.690438 16.137687 16.898438 15.554688 C 17.106437 14.971687 17.106922 14.470187 17.044922 14.367188 C 16.982922 14.263188 16.816406 14.201172 16.566406 14.076172 C 16.317406 13.951172 15.090328 13.348625 14.861328 13.265625 C 14.632328 13.182625 14.464828 13.140625 14.298828 13.390625 C 14.132828 13.640625 13.655766 14.201187 13.509766 14.367188 C 13.363766 14.534188 13.21875 14.556641 12.96875 14.431641 C 12.71875 14.305641 11.914938 14.041406 10.960938 13.191406 C 10.218937 12.530406 9.7182656 11.714844 9.5722656 11.464844 C 9.4272656 11.215844 9.5585938 11.079078 9.6835938 10.955078 C 9.7955938 10.843078 9.9316406 10.663578 10.056641 10.517578 C 10.180641 10.371578 10.223641 10.267562 10.306641 10.101562 C 10.389641 9.9355625 10.347156 9.7890625 10.285156 9.6640625 C 10.223156 9.5390625 9.737625 8.3065 9.515625 7.8125 C 9.328625 7.3975 9.131125 7.3878594 8.953125 7.3808594 C 8.808125 7.3748594 8.6425625 7.375 8.4765625 7.375 z'/%3E%3C/svg%3E");
}

/* ---------- 2. Base ---------- */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4 { letter-spacing: -.01em; text-wrap: balance; }
img { max-width: 100%; height: auto; }
a { text-decoration-thickness: .08em; text-underline-offset: .2em; }
:where(a, button, summary, input, [tabindex]):focus-visible { outline: 3px solid var(--bgd-focus); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--bgd-accent); color: var(--bgd-on-accent); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); }

/* ---------- 3. Icons ----------
   An element gets an icon by setting --bgd-i to one of the --bgd-ico-* masks; the icon takes the text colour. */
.bgd-btn::before, .bgd-card[class*="bgd-ico-"]::before, .bgd-trust li::before, .bgd-more a::after,
.bgd-contact li::before, .bgd-directory__list > li > a::after, .bgd-guides h3 a::after, .bgd-callnum::before,
:is(.bgd-faq, .bgd-content) summary::after {
	content: "";
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	background-color: currentColor;
	-webkit-mask: var(--bgd-i) center / contain no-repeat;
	mask: var(--bgd-i) center / contain no-repeat;
}
.bgd-ico-repair { --bgd-i: var(--bgd-ico-tool); }
.bgd-ico-change { --bgd-i: var(--bgd-ico-swap); }
.bgd-ico-tire { --bgd-i: var(--bgd-ico-tire); }
.bgd-ico-vehicles { --bgd-i: var(--bgd-ico-truck); }
.bgd-ico-rim { --bgd-i: var(--bgd-ico-rim); }
.bgd-ico-battery { --bgd-i: var(--bgd-ico-battery); }
.bgd-ico-phone { --bgd-i: var(--bgd-ico-phone); }
.bgd-ico-whatsapp { --bgd-i: var(--bgd-ico-whatsapp); }
.bgd-ico-mail { --bgd-i: var(--bgd-ico-mail); }
.bgd-ico-clock { --bgd-i: var(--bgd-ico-clock); }

/* ---------- 4. Buttons and contact actions ---------- */
/* At the usual text size a label fits on one line. With enlarged text in a narrow column the side padding gives way
   first (never below 20px, the usual value), then the label wraps between words instead of pushing the page sideways. */
.bgd-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	box-sizing: border-box; max-width: 100%; min-height: var(--bgd-control); padding: .7rem min(1.25rem, max(20px, 5vw));
	border: 1px solid transparent; border-radius: 10px;
	font-size: 1rem; font-weight: 700; line-height: 1.2; letter-spacing: .01em; text-align: center; text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	-webkit-tap-highlight-color: transparent;
}
.bgd-btn--call { --bgd-i: var(--bgd-ico-phone); background: var(--bgd-accent); color: var(--bgd-on-accent); }
.bgd-btn--call:hover { background: var(--bgd-accent-hover); color: var(--bgd-on-accent); }
.bgd-btn--call:active { background: var(--bgd-accent-active); }
/* The quiet second action: never competes with the call button. */
.bgd-btn--secondary { background: var(--bgd-surface); color: var(--bgd-heading); border-color: var(--bgd-line-strong); box-shadow: var(--bgd-shadow-sm); }
.bgd-btn--secondary::before { background-color: var(--bgd-muted); }
.bgd-btn--secondary:hover { background: var(--bgd-surface-2); border-color: var(--bgd-muted); color: var(--bgd-heading); }
.bgd-btn--regions { --bgd-i: var(--bgd-ico-pin); }
.bgd-btn--whatsapp { --bgd-i: var(--bgd-ico-whatsapp); background: var(--bgd-whatsapp); color: var(--bgd-navy); }
.bgd-btn--whatsapp:hover { background: var(--bgd-whatsapp-hover); color: var(--bgd-navy); }
.bgd-btn--whatsapp:active { background: var(--bgd-whatsapp-active); }
.bgd-btn__num { font-weight: 400; font-variant-numeric: tabular-nums; }
.bgd-btn__num::before { content: "·"; margin: 0 .45em 0 .1em; }
@media (min-width: 600px) { .bgd-btn { font-size: var(--bgd-fs-md); } }

/* The phone number next to a call button: a tel: link of its own, never squeezed into the button. */
.bgd-callnum { --bgd-i: var(--bgd-ico-phone); display: inline-flex; align-items: center; gap: .6rem; color: var(--bgd-heading); text-decoration: none; line-height: 1.15; }
.bgd-callnum::before { width: 1.125rem; height: 1.125rem; background-color: var(--bgd-accent-icon); }
.bgd-callnum__text { display: flex; flex-direction: column; gap: .2rem; }
.bgd-callnum__label { font-size: var(--bgd-fs-xs); color: var(--bgd-muted); letter-spacing: .04em; }
/* One line wherever it fits; with enlarged text in a narrow column it wraps between the digit groups. */
.bgd-callnum__num { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; text-wrap: balance; }
.bgd-callnum:hover .bgd-callnum__num { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; }

/* Two actions: full width and stacked in a narrow column, side by side (the number behind a divider) where they fit. */
.bgd-actions { container-type: inline-size; display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.bgd-actions > * { flex: 1 1 100%; }
.bgd-actions .bgd-callnum { min-height: 2.75rem; }
@container (min-width: 26rem) {
	.bgd-actions > * { flex: 0 0 auto; }
	.bgd-actions .bgd-callnum { margin-left: .25rem; padding-left: 1.25rem; border-left: 1px solid var(--bgd-line-strong); }
}

/* ---------- 5. Header ---------- */
header.wp-block-template-part { position: relative; z-index: 50; }
/* Sticky, with the phone number in it, where the window is wide and tall enough: 783px by 544px at the default text
   size. Both limits are in em, so they follow the text size set in the browser (at 200% text: 1566px by 1088px).
   Elsewhere (landscape phones, short windows, enlarged text) the header scrolls away with the page instead of covering
   a band of the window, and the floating bar carries the call button with the number (section 14). */
@media (min-width: 48.9375em) and (min-height: 34em) {
	header.wp-block-template-part { position: sticky; top: 0; }
	.admin-bar header.wp-block-template-part { top: 32px; }
}
/* The header bar runs the full width of the window, beyond the page's side padding. */
.bgd-header { margin-inline: calc(var(--wp--style--root--padding-left, 16px) * -1); padding: .625rem var(--wp--style--root--padding-left, 16px); background: var(--bgd-surface); border-bottom: 1px solid var(--bgd-line); box-shadow: var(--bgd-shadow-sm); }
.bgd-header__inner { gap: .75rem min(1.25rem, 24px); align-items: center; }
/* The brand takes the room the menu button and the number leave. Name and tagline stay beside the logo while their
   longest piece fits there (the flex basis below: "Oto Lastik" is 4.7em of the text below 480px and 5.5em from
   480px); with enlarged text, browser zoom or a very narrow window they move below the logo as a whole and wrap
   between words, instead of breaking up letter by letter. */
.bgd-header .bgd-brand { gap: .5rem min(.75rem, 16px); flex-wrap: wrap; align-items: center; flex: 0 1 auto; min-width: 0; margin-right: auto; }
.bgd-logo, .bgd-logo a { display: block; line-height: 0; flex: 0 0 auto; }
/* The logo is an image, not text: with enlarged text it grows a little (64px at most) and leaves the room to the name. */
.bgd-logo img { display: block; width: min(3.5rem, 64px); height: min(3.5rem, 64px); border-radius: 50%; }
.bgd-brand__text { display: flex; flex-direction: column; gap: .2rem; flex: 1 1 5.25em; min-width: 0; color: var(--bgd-heading); text-decoration: none; line-height: 1.15; }
.bgd-brand__name { font-size: 1rem; font-weight: 700; letter-spacing: .01em; }
.bgd-brand__name span { white-space: nowrap; }
/* 13px on phones; where the name and the menu button leave too little room (about 320px) it wraps to a second line
   instead of running into the button, between words only. From 480px: 12px, on one line wherever it fits. */
.bgd-brand__tag { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bgd-accent-text); text-wrap: balance; overflow-wrap: normal; }
@media (min-width: 480px) {
	.bgd-brand__text { flex-basis: 6.25em; }
	.bgd-brand__name { font-size: var(--bgd-fs-lg); }
	.bgd-brand__tag { font-size: .75rem; letter-spacing: .08em; }
}
@media (min-width: 783px) { .bgd-logo img { width: min(4rem, 72px); height: min(4rem, 72px); } }

.bgd-nav { flex: 0 0 auto; order: 3; font-size: 1rem; }
.bgd-nav .wp-block-navigation__container { gap: .25rem 1.75rem; }
.bgd-nav .wp-block-navigation-item__content { color: var(--bgd-text); text-decoration: none; padding: .5rem 0; }
.bgd-nav .wp-block-navigation-item__content:hover,
.bgd-nav .wp-block-navigation-item__content[aria-current="page"] { color: var(--bgd-heading); text-decoration: underline; text-decoration-color: var(--bgd-accent); text-decoration-thickness: 2px; text-underline-offset: .45em; }
.bgd-nav .wp-block-navigation__submenu-container { background: var(--bgd-surface) !important; border: 1px solid var(--bgd-line) !important; border-radius: var(--bgd-radius); padding: .4rem; min-width: 15rem !important; box-shadow: 0 12px 28px rgba(16, 24, 40, .12); }
.bgd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .6rem .8rem; border-radius: 8px; }
.bgd-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover { background: var(--bgd-surface-2); text-decoration: none; }
/* The menu buttons: 44px with a 28px icon; with enlarged text they grow a little (56px, 32px icon) and leave the room to
   the brand. */
.bgd-nav .wp-block-navigation__responsive-container-open,
.bgd-nav .wp-block-navigation__responsive-container-close { width: max(44px, min(2.75rem, 56px)); height: max(44px, min(2.75rem, 56px)); align-items: center; justify-content: center; border-radius: 10px; color: var(--bgd-text); }
.bgd-nav .wp-block-navigation__responsive-container-open svg,
.bgd-nav .wp-block-navigation__responsive-container-close svg { width: min(1.75rem, 32px); height: min(1.75rem, 32px); }
/* Keep the menu behind its button until there is room for the brand, the links and the call action together. These
   limits are in em: at the default text size they are 1024px and 1180px; with enlarged text they grow with it, so the
   links appear only where they fit (at 200% text, from 2048px). */
@media (min-width: 600px) and (max-width: 63.99em) {
	.bgd-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bgd-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
}
@media (min-width: 64em) { .bgd-nav { flex: 1 1 auto; order: 0; } }
/* From 1024px the brand, the five links and the number share one row only with tighter link spacing. */
@media (min-width: 64em) and (max-width: 73.6875em) { .bgd-nav .wp-block-navigation__container { column-gap: 1.125rem; } }
/* The submenu toggle beside "Hizmet Bölgeleri": a 24px by 42px target (core's is 10px square). The icon keeps its size
   and place, and the negative right margin keeps the following items where they were. */
.bgd-nav .wp-block-navigation__submenu-icon { box-sizing: border-box; display: inline-flex; align-items: center; width: 1.5rem; height: 2.625rem; margin: 0 calc(.85em - 1.5rem) 0 0; padding: 0 0 0 .25em; }
.bgd-nav .wp-block-navigation__submenu-icon svg { width: .6em; height: .6em; }
/* The open menu: core's own rules for it are very specific, hence the long selectors. It covers the floating contact
   buttons (they sit below the header's layer), so it needs no room for them at its end. */
.bgd-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1rem 1.25rem 2rem; }
.bgd-nav .is-menu-open .wp-block-navigation__responsive-container-content,
.bgd-nav .is-menu-open .wp-block-navigation__container,
.bgd-nav .is-menu-open .wp-block-navigation-item { align-items: flex-start !important; text-align: left; }
.bgd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container { gap: .25rem; width: 100%; }
.bgd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { display: block; padding: .7rem 0; font-size: 1.25rem; }
.bgd-nav .is-menu-open .wp-block-navigation__submenu-container { border: 0 !important; background: transparent !important; box-shadow: none; padding: 0 0 .5rem 1rem !important; min-width: 0 !important; }
.bgd-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding: .6rem 0; font-size: var(--bgd-fs-md); color: var(--bgd-muted); }

/* Where the header is sticky (see above): the number only, as a quiet tel: link; the call button belongs to the page. */
.bgd-header__cta { display: none; flex: 0 0 auto; align-items: center; }
.bgd-header__cta .bgd-callnum { padding: .4rem .9rem .4rem .75rem; border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius); transition: border-color .15s ease; }
.bgd-header__cta .bgd-callnum:hover { border-color: var(--bgd-line-strong); }
.bgd-header__cta .bgd-callnum__num { font-size: var(--bgd-fs-lg); }
@media (min-width: 48.9375em) and (min-height: 34em) { .bgd-header__cta { display: flex; } }

/* ---------- 6. Page frame and content typography ---------- */
.bgd-main { padding-bottom: 0; }
/* The home page starts right under the header; the hero's own padding sets that gap. */
.bgd-home { margin-block-start: 0; }
.bgd-home > * { margin-block: 0; }
.bgd-pagehead { padding-top: 1.5rem; padding-bottom: .5rem; }
.bgd-title { margin: .75rem 0 .5rem; }
.bgd-meta { color: var(--bgd-muted); font-size: var(--bgd-fs-sm); }
.bgd-content h2 { margin-top: 2.5rem; }
.bgd-content h3 { margin-top: 1.75rem; color: var(--bgd-heading); }
.bgd-content p, .bgd-content li { color: var(--bgd-text); }
.bgd-content li { margin-block: .4rem; }
.bgd-content li::marker { color: var(--bgd-accent-icon); }
.bgd-content .has-text-align-center { text-align: left; }
.bgd-content hr { border: 0; border-top: 1px solid var(--bgd-line); margin-block: 2rem; }
.bgd-content blockquote { margin-inline: 0; padding-left: 1rem; border-left: 3px solid var(--bgd-accent); color: var(--bgd-muted); }
.bgd-content :is(h2, h3)[id], #avrupa-yakasi, #anadolu-yakasi { scroll-margin-top: 6.5rem; }

.bgd-breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem; font-size: var(--bgd-fs-sm); color: var(--bgd-muted); }
.bgd-breadcrumbs li + li::before { content: "›"; margin-right: .5rem; color: var(--bgd-line-strong); }
.bgd-breadcrumbs a { color: var(--bgd-muted); }
.bgd-breadcrumbs a:hover { color: var(--bgd-heading); }
.bgd-breadcrumbs [aria-current] { color: var(--bgd-text); }
/* Touch-sized screens: each link is at least a 44px-tall target (px: a target does not need to grow with enlarged text,
   where the line is taller than 44px anyway); the rows get the room, the text stays as it is. The trail moves up by the
   extra height of its first row plus .75rem, into the empty space above it, so the targets take that space instead of
   adding to it (they stay well clear of the header). */
@media (max-width: 1023px) {
	.bgd-breadcrumbs ol { align-items: center; row-gap: 0; line-height: 1.65; margin-top: calc(min(0px, (1.65em - 44px) / 2) - .75rem); }
	.bgd-breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* Lists of posts (guide, archive, search) */
.bgd-main .wp-block-query .wp-block-post-template { list-style: none; padding: 0; }
.bgd-main .wp-block-query .wp-block-post-template > li { padding-block: 1.25rem; border-bottom: 1px solid var(--bgd-line); }
.bgd-main .wp-block-post-title a { color: var(--bgd-heading); text-decoration: none; }
.bgd-main .wp-block-post-title a:hover { text-decoration: underline; text-decoration-color: var(--bgd-accent); }
.bgd-main .wp-block-post-excerpt { color: var(--bgd-muted); }
.bgd-main .wp-block-search__input { min-height: var(--bgd-control); padding: .5rem 1rem; border: 1px solid var(--bgd-line-strong); border-radius: 12px; background: var(--bgd-surface); color: var(--bgd-text); font: inherit; }
.bgd-main .wp-block-search__button { min-height: var(--bgd-control); margin-left: .5rem; padding: .5rem 1.25rem; border: 0; border-radius: 12px; background: var(--bgd-accent); color: var(--bgd-on-accent); font: inherit; font-weight: 700; cursor: pointer; }

/* ---------- 7. Home: hero ---------- */
.bgd-hero { display: grid; gap: 1.75rem; align-items: center; padding-top: clamp(1.5rem, .9rem + 2.4vw, 2.75rem); }
.bgd-hero__text > * { margin-block: 0; }
/* A quiet location label above the H1 (Play has no medium weight, so bold at a small size). */
.bgd-kicker { margin-bottom: .625rem; color: var(--bgd-accent-text); font-size: .875rem; font-weight: 700; letter-spacing: .01em; }
.bgd-hero__title { margin-bottom: 1rem; line-height: 1.12; }
.bgd-lead { max-width: 36rem; margin-bottom: 1.5rem; font-size: var(--bgd-fs-lg); line-height: 1.6; color: var(--bgd-text); }
.bgd-eta { max-width: 36rem; margin-top: 1.125rem; color: var(--bgd-muted); font-size: var(--bgd-fs-sm); line-height: 1.6; }
/* The hero picture sits in a fixed frame, so another photo can replace it later without any layout change. */
.bgd-hero__img { margin: 0; }
.bgd-hero__img picture { display: block; }
.bgd-hero__img img { display: block; box-sizing: border-box; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--bgd-radius-lg); border: 1px solid var(--bgd-line); background: var(--bgd-surface-2); box-shadow: var(--bgd-shadow); }
@media (max-width: 899px) { .bgd-hero__img { max-width: 40rem; } }
@media (min-width: 900px) {
	.bgd-hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 3.5rem; }
	.bgd-hero__img img { aspect-ratio: 4 / 3; object-position: 62% 50%; }
}

/* Two columns (four from 900px), each at least 8.5rem wide: at the usual text size that is always the case; with enlarged
   text there are fewer, wider columns instead of words running out of their box. */
.bgd-trust { list-style: none; padding: 0; margin: 1.75rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8.5rem, (100% - .625rem) / 2)), 1fr)); gap: .625rem; }
.bgd-trust li { --bgd-i: var(--bgd-ico-check); display: flex; align-items: center; gap: .55rem; margin: 0 !important; padding: .7rem .85rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius-sm); color: var(--bgd-heading); font-size: var(--bgd-fs-sm); line-height: 1.3; }
.bgd-trust li::before { width: 1.05rem; height: 1.05rem; background-color: var(--bgd-accent-icon); }
@media (min-width: 900px) { .bgd-trust { grid-template-columns: repeat(auto-fit, minmax(min(100%, max(8.5rem, (100% - 1.875rem) / 4)), 1fr)); margin-top: 2.5rem; } }

/* ---------- 8. Home: sections, cards, steps ---------- */
.bgd-section { padding-block: var(--bgd-section); }
.bgd-section > * { margin-block: 0; }
.bgd-section > h2 { margin-bottom: 1.5rem; }
.bgd-section > h2 + p { max-width: 44rem; margin-top: -.75rem; margin-bottom: 1.5rem; color: var(--bgd-muted); }
/* A band is a section with its own background that runs the full width of the window. */
.bgd-band { background: var(--bgd-bg-alt); box-shadow: 0 0 0 100vmax var(--bgd-bg-alt); clip-path: inset(0 -100vmax); }

.bgd-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bgd-card { display: flex; flex-direction: column; gap: .5rem; margin: 0 !important; padding: 1.375rem 1.25rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius); box-shadow: var(--bgd-shadow-sm); }
.bgd-card > *, .bgd-card__body > * { margin: 0 !important; }
.bgd-card h3 { color: var(--bgd-heading); font-size: var(--bgd-fs-lg); line-height: 1.3; }
.bgd-card p { color: var(--bgd-text); font-size: 1rem; line-height: 1.6; }
.bgd-card[class*="bgd-ico-"]::before { width: 2rem; height: 2rem; margin-bottom: .5rem; background-color: var(--bgd-accent-icon); }
@media (min-width: 600px) { .bgd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bgd-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* Secondary services: smaller, side by side, icon beside the text. */
.bgd-label { margin-top: 2.25rem !important; margin-bottom: .875rem !important; color: var(--bgd-muted); font-size: var(--bgd-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bgd-card--compact { flex-direction: row; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: transparent; box-shadow: none; }
.bgd-card--compact[class*="bgd-ico-"]::before { width: 1.5rem; height: 1.5rem; margin: .1rem 0 0; background-color: var(--bgd-muted); }
.bgd-card__body { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.bgd-card--compact h3 { font-size: var(--bgd-fs-md); }
.bgd-card--compact p { color: var(--bgd-muted); font-size: var(--bgd-fs-sm); }
.bgd-note { margin-top: 1rem !important; color: var(--bgd-muted); font-size: var(--bgd-fs-sm); }
.bgd-more { margin-top: 1.5rem !important; }
.bgd-more a { --bgd-i: var(--bgd-ico-arrow); display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; font-weight: 700; text-decoration: none; }
.bgd-more a::after { width: 1.1em; height: 1.1em; transition: transform .15s ease; }
.bgd-more a:hover { text-decoration: underline; }
/* On the darker band background (#e3e8ee) the usual link orange reaches only 4.2:1; this darker orange gives 4.9:1. */
.bgd-band .bgd-more a { color: #b03a0b; }
.bgd-more a:hover::after { transform: translateX(3px); }

.bgd-steps { counter-reset: bgd-step; list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.bgd-steps li { counter-increment: bgd-step; position: relative; margin: 0 !important; padding: 1.25rem 1.25rem 1.25rem 4.25rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius); box-shadow: var(--bgd-shadow-sm); color: var(--bgd-text); font-size: 1rem; line-height: 1.6; }
.bgd-steps li strong { display: block; margin-bottom: .2rem; color: var(--bgd-heading); font-size: var(--bgd-fs-md); line-height: 1.35; }
.bgd-steps li::before { content: counter(bgd-step); position: absolute; left: 1.25rem; top: 1.25rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--bgd-navy); color: #fff; font-weight: 700; line-height: 1; }
@media (min-width: 600px) { .bgd-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .bgd-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- 9. Regions: directory, chips, same-name notes ---------- */
.bgd-directory__side { margin-bottom: 2rem; }
.bgd-directory__side > h2, .bgd-directory__side > h3 { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; margin: 0 0 .875rem; }
.bgd-count { padding: .15rem .65rem; border: 1px solid var(--bgd-line-strong); border-radius: 999px; color: var(--bgd-muted); font-size: var(--bgd-fs-xs); font-weight: 400; letter-spacing: .02em; line-height: 1.5; }
/* As many columns as fit the place the list is in, each at least 11.4rem wide: the room the longest district name
   ("Gaziosmanpaşa") needs beside its arrow. One column on phones narrower than about 412px, two from there, three at
   768px, four in a text column from about 790px, five across a wide section. */
.bgd-directory__list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(11.4rem, 18%)), 1fr)); gap: .5rem; }
.bgd-directory__list > li { margin: 0 !important; }
.bgd-directory__list > li > a { --bgd-i: var(--bgd-ico-chevron); display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.75rem; box-sizing: border-box; padding: .55rem .8rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius-sm); color: var(--bgd-heading); text-decoration: none; font-weight: 700; line-height: 1.3; transition: border-color .15s ease, background-color .15s ease; }
/* Screens narrower than 20.5em (328px at the default text size, 656px at 200% text): a name wider than its link (only with
   enlarged text; at the default size the list has one column there and every name fits) breaks instead of running out
   of the page. */
@media (max-width: 20.5em) { .bgd-directory__list > li > a { overflow-wrap: anywhere; } }
.bgd-directory__list > li > a::after { width: 1em; height: 1em; background-color: var(--bgd-line-strong); transform: rotate(-90deg); }
.bgd-directory__list > li > a:hover { border-color: var(--bgd-accent); }
.bgd-directory__list > li > a:hover::after { background-color: var(--bgd-accent-icon); }
.bgd-directory__list--compact > li > a { font-weight: 400; }
.bgd-directory__meta { display: block; padding: .4rem 0 0 .8rem; color: var(--bgd-muted); font-size: var(--bgd-fs-xs); }

.bgd-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
/* A chip is never wider than the list: a name wider than the whole line (only with enlarged text on a narrow screen)
   breaks inside the pill instead of running out of the page. */
.bgd-chips li { box-sizing: border-box; max-width: 100%; margin: 0; padding: .3rem .8rem; border: 1px solid var(--bgd-line); border-radius: 999px; font-size: var(--bgd-fs-sm); line-height: 1.5; overflow-wrap: anywhere; }
/* A linked chip is clickable across the whole pill, not only on its text; the pill keeps its size. */
.bgd-chips a { display: block; margin: -.3rem -.8rem; padding: .3rem .8rem; border-radius: inherit; font-weight: 700; }
.bgd-chips-toggle { padding: .875rem 1rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius-sm); }
.bgd-samename { margin-top: 1.25rem; }
.bgd-samename ul { padding-left: 1.25rem; }
.bgd-samename li { margin: .4rem 0; }

/* ---------- 10. Questions and answers ---------- */
.bgd-faq details, .bgd-content details { margin: 0 0 .625rem; padding: 0 1rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius-sm); }
.bgd-faq details[open], .bgd-content details[open] { border-color: var(--bgd-line-strong); }
/* A word wider than the room beside the icon (only with enlarged text on a narrow screen) breaks instead of running
   out of the row; other text wraps as before. */
:is(.bgd-faq, .bgd-content) summary { --bgd-i: var(--bgd-ico-chevron); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--bgd-control); padding: .5rem 0; list-style: none; cursor: pointer; font-weight: 700; line-height: 1.35; color: var(--bgd-heading); text-wrap: balance; overflow-wrap: anywhere; }
:is(.bgd-faq, .bgd-content) summary::-webkit-details-marker { display: none; }
:is(.bgd-faq, .bgd-content) summary::after { width: 1.15rem; height: 1.15rem; background-color: var(--bgd-muted); transition: transform .2s ease; }
:is(.bgd-faq, .bgd-content) details[open] > summary::after { transform: rotate(180deg); background-color: var(--bgd-accent-icon); }
:is(.bgd-faq, .bgd-content) details > :not(summary) { margin-top: 0; margin-bottom: 1rem; }
.bgd-faq details p { color: var(--bgd-text); }
.bgd-faq details + p { margin-top: 1.5rem !important; }

/* ---------- 11. Guide links on the home page ---------- */
.bgd-guides .wp-block-post-template { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; margin: 0; }
.bgd-main .bgd-guides .wp-block-post-template > li { margin: 0; padding: 0; border: 0; }
.bgd-guides h3 { margin: 0; font-size: var(--bgd-fs-md); line-height: 1.4; }
.bgd-guides h3 a { --bgd-i: var(--bgd-ico-arrow); display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: var(--bgd-control); box-sizing: border-box; padding: .9rem 1.125rem; background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-radius: var(--bgd-radius-sm); color: var(--bgd-heading); text-decoration: none; transition: border-color .15s ease, background-color .15s ease; }
.bgd-guides h3 a::after { width: 1.1rem; height: 1.1rem; background-color: var(--bgd-accent-icon); }
.bgd-guides h3 a:hover { border-color: var(--bgd-accent); text-decoration: none; }
@media (min-width: 900px) { .bgd-guides .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- 12. Call-to-action box ---------- */
.bgd-cta { margin-top: var(--bgd-section) !important; padding: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem); background: var(--bgd-surface); border: 1px solid var(--bgd-line); border-top: 3px solid var(--bgd-accent); border-radius: var(--bgd-radius-lg); box-shadow: var(--bgd-shadow); }
.bgd-home > .bgd-cta { margin-top: .5rem !important; }
.bgd-cta__title { margin: 0 0 .5rem; color: var(--bgd-heading); font-size: clamp(1.375rem, 1.2rem + .9vw, 1.75rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; text-wrap: balance; }
.bgd-cta__text { margin: 0 0 1.25rem; }
.bgd-cta__meta { margin: 1.125rem 0 0; color: var(--bgd-muted); font-size: var(--bgd-fs-sm); }

/* ---------- 13. Footer ---------- */
/* The footer keeps the brand navy; its own token values let every component inside it adapt. */
.bgd-footer {
	--bgd-text: #d3dce6; --bgd-heading: #fff; --bgd-muted: #a3b3c4; --bgd-line: #22394f; --bgd-line-strong: #3d5b7c; --bgd-focus: #fff;
	margin-top: var(--bgd-section); margin-inline: calc(var(--wp--style--root--padding-left, 16px) * -1);
	/* The end of the page clears the floating contact buttons, so they never cover the last footer line. */
	padding: 3rem var(--wp--style--root--padding-left, 16px) calc(1.5rem + var(--bgd-float-h));
	background: var(--bgd-navy); color: var(--bgd-text); font-size: 1rem;
}
.bgd-footer__cols { gap: 2rem 2.5rem; margin-bottom: 0; }
.bgd-footer__cols > .wp-block-column > * { margin-block: 0; }
.bgd-footer__id { gap: .75rem; align-items: center; margin-bottom: 1rem !important; }
.bgd-footer .bgd-logo img { width: 3rem; height: 3rem; }
@media (max-width: 781px) {
	.bgd-footer .bgd-footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bgd-footer .bgd-footer__cols > .wp-block-column:first-child, .bgd-footer .bgd-footer__cols > .wp-block-column:last-child { grid-column: 1 / -1; }
}
.bgd-footer__brand { margin: 0; color: var(--bgd-heading); font-size: var(--bgd-fs-lg); font-weight: 700; line-height: 1.2; }
.bgd-footer__about { margin-bottom: .75rem !important; color: var(--bgd-text); line-height: 1.6; }
.bgd-footer__note { color: var(--bgd-muted); font-size: var(--bgd-fs-sm); line-height: 1.6; }
.bgd-footer__title { margin: 0 0 .75rem !important; color: var(--bgd-muted); font-size: var(--bgd-fs-xs); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.bgd-footer__links, .bgd-contact { list-style: none; margin: 0; padding: 0; }
.bgd-footer__links li, .bgd-contact li { margin: 0; }
.bgd-footer__links a { display: inline-block; padding: .45rem 0; color: var(--bgd-text); text-decoration: none; }
.bgd-footer__links a:hover, .bgd-contact a:hover { color: var(--bgd-heading); text-decoration: underline; text-decoration-color: var(--bgd-accent); }
.bgd-contact li { display: flex; align-items: flex-start; gap: .65rem; padding: .4rem 0; color: var(--bgd-text); line-height: 1.5; }
.bgd-contact li::before { width: 1.1rem; height: 1.1rem; margin-top: .2rem; background-color: var(--bgd-accent); }
.bgd-contact li.bgd-ico-whatsapp::before { background-color: var(--bgd-whatsapp); }
.bgd-contact a { color: var(--bgd-text); text-decoration: none; }
.bgd-contact__main a { color: var(--bgd-heading); font-size: var(--bgd-fs-lg); font-weight: 700; }
.bgd-footer__pay { margin-top: .5rem !important; color: var(--bgd-muted); font-size: var(--bgd-fs-sm); }
.wp-block-social-links.bgd-social { gap: .5rem; margin-top: 1.25rem !important; padding: 0; }
.wp-block-social-links.bgd-social .wp-social-link { margin: 0; background: transparent; border: 1px solid var(--bgd-line-strong); border-radius: 10px; color: var(--bgd-muted); transition: border-color .15s ease, color .15s ease; }
.wp-block-social-links.bgd-social .wp-social-link a { padding: .6rem; color: inherit; }
.wp-block-social-links.bgd-social .wp-social-link svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }
.wp-block-social-links.bgd-social .wp-social-link:hover { border-color: var(--bgd-accent); color: var(--bgd-heading); transform: none; }
.bgd-footer__legal { margin: 2.5rem 0 0 !important; padding-top: 1.25rem; border-top: 1px solid var(--bgd-line); color: var(--bgd-muted); font-size: var(--bgd-fs-sm); }
.bgd-footer__legal a { color: var(--bgd-muted); }

/* ---------- 14. Floating contact buttons ----------
   One line at the bottom right of the window, 25px from the edges (plus any safe-area inset): on phones and
   small tablets the call button fills the line beside the round WhatsApp button; where the sticky header carries
   the number (section 5), the round WhatsApp button stands alone. Spacing and icons are in
   px, so with enlarged text only the label grows and the bar keeps its 54px height. The bar sits below the
   header's layer (z-index 50), so the open menu, a modal dialog, covers it like the rest of the page. */
.bgd-float { position: fixed; z-index: 40; right: calc(var(--bgd-float-edge) + env(safe-area-inset-right, 0px)); bottom: calc(var(--bgd-float-edge) + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 8px; }
.bgd-float .bgd-btn { min-height: var(--bgd-float-size); padding: 6px 16px; white-space: nowrap; box-shadow: 0 6px 16px rgba(16, 24, 40, .22); }
/* A white ring inside the navy focus outline keeps the focus visible over the navy footer as well. */
.bgd-float .bgd-btn:focus-visible { box-shadow: 0 0 0 3px #fff, 0 6px 16px rgba(16, 24, 40, .22); }
.bgd-float .bgd-btn__num { display: none; }
/* The WhatsApp button: a 54px circle with the icon. Its text is the accessible name and shows only as a tooltip
   above the circle on hover and keyboard focus (hidden with opacity, so screen readers still read it). */
.bgd-float .bgd-btn.bgd-btn--whatsapp { position: relative; flex: 0 0 auto; width: var(--bgd-float-size); height: var(--bgd-float-size); min-height: 0; padding: 0; border-radius: 50%; box-shadow: 0 3px 10px rgba(16, 24, 40, .2); }
.bgd-float .bgd-btn.bgd-btn--whatsapp::before { width: 28px; height: 28px; }
.bgd-float .bgd-btn.bgd-btn--whatsapp:focus-visible { box-shadow: 0 0 0 3px #fff, 0 3px 10px rgba(16, 24, 40, .2); }
.bgd-float .bgd-btn__tip { position: absolute; right: 0; bottom: calc(100% + .5rem); padding: .375rem .625rem; border: 1px solid rgba(255, 255, 255, .28); border-radius: 6px; background: var(--bgd-navy); color: #fff; font-size: .8125rem; line-height: 1.2; white-space: nowrap; box-shadow: 0 4px 12px rgba(16, 24, 40, .2); opacity: 0; pointer-events: none; }
.bgd-float .bgd-btn--whatsapp:hover .bgd-btn__tip, .bgd-float .bgd-btn--whatsapp:focus-visible .bgd-btn__tip { opacity: 1; }
.bgd-float .bgd-btn--call::before { width: min(1.25em, 24px); height: min(1.25em, 24px); }
@media (max-width: 782px) {
	.bgd-float { left: calc(16px + env(safe-area-inset-left, 0px)); }
	.bgd-float .bgd-btn { gap: min(.45rem, 8px); padding-inline: min(.625rem, 12px); font-size: clamp(.875rem, 4vw, 1rem); }
	.bgd-float .bgd-btn--call { flex: 1 1 auto; min-width: 0; }
}
/* Landscape phones: the window is short, so the bar does not stretch across it; the two buttons sit at the right. */
@media (max-width: 782px) and (orientation: landscape) and (max-height: 30em) {
	.bgd-float { left: auto; }
	.bgd-float .bgd-btn--call { flex: 0 0 auto; padding-inline: 16px; }
}
/* Very narrow phones (under 320px): narrower margins and a smaller call label without its icon. */
@media (max-width: 319px) {
	.bgd-float { left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); gap: 6px; }
	.bgd-float .bgd-btn { gap: 6px; padding-inline: 8px; font-size: .8125rem; }
	.bgd-float .bgd-btn--call::before { display: none; }
}
/* The number beside "Hemen Ara" from 480px (30em: with enlarged text, where the wider label still leaves room for it). */
@media (min-width: 30em) { .bgd-float .bgd-btn__num { display: inline; } }
/* Where the header is sticky (section 5) it carries the call action; elsewhere the bar keeps the call button. */
@media (min-width: 48.9375em) and (min-height: 34em) { .bgd-float .bgd-btn--call { display: none; } }
/* Keyboard focus (and anything scrolled into view at the bottom) stops above the bar instead of behind it, with a
   little room to spare. */
html { scroll-padding-bottom: calc(var(--bgd-float-h) + 1.5rem); }
/* Home page: while the bar would cover the hero buttons (short phone screens, before scrolling) a small script in
   inc/contact.php sets this class; the hero offers the same call and WhatsApp actions. Without the script the bar shows. */
.bgd-float.bgd-float--yield { visibility: hidden; }