/* =============================================================================
   DHCTranslations - main.css
   Site styles for index.html: grid background, typography, FAQ accordion,
   reviews carousel and animated statistics.
   ============================================================================= */

        body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background-color: #F8FAFC;
            color: #0F172A;
        }
        h1, h2, h3, h4, h5, h6 {
            font-family: 'Space Grotesk', sans-serif;
        }
        .mono-text {
            font-family: 'JetBrains Mono', monospace;
        }
        /* FAQ accordion (minimal, single column) */
        .faq-item {
            background: transparent;
        }
        .faq-question {
            display: flex;
            flex: 1 1 auto;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            width: 100%;
            padding: 1.15rem 0;
            text-align: left;
            background: transparent;
            border: 0;
            cursor: pointer;
            font-size: 0.95rem;
            font-weight: 600;
            line-height: 1.4;
            color: #0F172A;
            transition: color 0.2s ease;
        }
        .faq-question:hover {
            color: #2563EB;
        }
        .faq-chevron {
            flex-shrink: 0;
            font-size: 0.8rem;
            color: #64748B;
            transition: transform 0.25s ease, color 0.25s ease;
        }
        .faq-item[data-state="open"] .faq-chevron {
            transform: rotate(180deg);
            color: #F15A23;
        }
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }
        .faq-item[data-state="open"] .faq-answer {
            max-height: 420px;
        }
        /* Google-style rating stars (fill stays #FBBC04; thin shadow keeps
           the glyph legible against white/canvas backgrounds) */
        .fa-star {
            color: #FBBC04;
            filter: drop-shadow(0 0 0.6px rgba(15, 23, 42, 0.5));
        }
        /* Reviews carousel */
        .no-scrollbar {
            scrollbar-width: none;
            -ms-overflow-style: none;
        }
        .no-scrollbar::-webkit-scrollbar {
            display: none;
        }
        .reviews-dot {
            /* 24x24 hit area with an 8x8 painted dot: WCAG 2.2 target size (2.5.8) wants at least
               24x24, and the dots rendered 8x8, which Lighthouse correctly flagged. background-clip
               keeps the visible pill at 8px while the button itself gets a full-size target. */
            width: 1.5rem;
            height: 1.5rem;
            padding: 0.5rem;
            background-clip: content-box;
            border-radius: 9999px;
            background-color: #CBD5E1;
            border: 0;
            cursor: pointer;
            transition: width 0.25s ease, background-color 0.25s ease;
        }
        .reviews-dot.is-active {
            width: 2.5rem;
            background-color: #F15A23;
        }
        /* Review carousel controls: when the prev/next buttons wrap below the dots on
           phones, keep them right-aligned instead of dropping to the left edge. */
        .reviews-controls__nav {
            margin-left: auto;
        }
        /* Animated statistics */
        .stat-number {
            font-variant-numeric: tabular-nums;
        }
        /* "See more" accordion (Why Us) */
        .more-item {
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        .more-item:hover,
        .more-item[data-state="open"] {
            border-color: rgba(11, 42, 91, 0.35);
        }
        .more-item[data-state="open"] {
            box-shadow: 0 10px 25px -18px rgba(11, 42, 91, 0.5);
        }
        .more-toggle {
            display: flex;
            width: 100%;
            align-items: flex-start;
            justify-content: space-between;
            gap: 1rem;
            padding: 1rem;
            background: transparent;
            border: 0;
            cursor: pointer;
            text-align: left;
        }
        .more-toggle-hint {
            display: inline-flex;
            align-items: center;
            gap: 0.35rem;
            flex-shrink: 0;
            padding-top: 0.35rem;
            font-size: 0.7rem;
            font-weight: 700;
            color: #0B2A5B;
            white-space: nowrap;
        }
        /*
         * The "See more" label inside the hint. It carried the class for a long time with no rule
         * behind it, so it rendered at whatever size the parent gave it; this matches the hint.
         */
        .more-toggle-label {
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }
        .more-chevron {
            font-size: 0.7rem;
            transition: transform 0.25s ease;
        }
        .more-item[data-state="open"] .more-chevron {
            transform: rotate(180deg);
        }
        .more-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.35s ease;
        }
        .more-item[data-state="open"] .more-answer {
            max-height: 320px;
        }
        /* When open, the toggle keeps only enough bottom padding to clear the title.
           The answer starts flush underneath it; previously the toggle's full 1rem bottom
           padding plus the answer's own leading left a dead band between the heading and
           the text, which read as a gap in the card. */
        .more-item[data-state="open"] .more-toggle {
            padding-bottom: 0.25rem;
        }
        .more-answer > p {
            margin-top: 0;
        }
        /* Unfilled rating star (4-star reviews) */
        .fa-star.fa-star--empty {
            color: #CBD5E1;
            filter: none;
        }
        /* Back to top button */
        #backToTop.is-visible {
            opacity: 1;
            pointer-events: auto;
            transform: translateY(0);
        }
        @media (prefers-reduced-motion: reduce) {
            .more-answer,
            .more-chevron {
                transition: none;
            }
        }

/* =============================================================================
   Contact Form 7 - homepage hero quote card (#contact-quote-form)
   CF7 renders unclassed fields and runs wpautop over the form template, so
   these scoped rules keep the card consistent with the Tailwind tokens.
   ========================================================================== */
        /* wpautop injects <p> + <br>; spacing comes from the template utilities. */
        #contact-quote-form .wpcf7-form p {
            margin: 0;
        }
        #contact-quote-form .wpcf7-form br {
            display: none;
        }
        #contact-quote-form .wpcf7-form-control-wrap {
            display: block;
        }
        #contact-quote-form .wpcf7-form-control {
            width: 100%;
            background-color: #F8FAFC;
            border: 1px solid rgba(11, 42, 91, 0.25);
            border-radius: 0.75rem;
            color: #0F172A;
            font-size: 0.875rem;
            line-height: 1.5;
            padding: 0.625rem 0.875rem;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }
        #contact-quote-form .wpcf7-form-control::placeholder {
            color: #64748B;
        }
        #contact-quote-form .wpcf7-form-control:focus {
            border-color: #2563EB;
            box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35);
            outline: none;
        }
        #contact-quote-form .wpcf7-textarea {
            min-height: 4.5rem;
            resize: vertical;
        }
        #contact-quote-form input.wpcf7-submit {
            width: 100%;
            background-color: #2563EB;
            border: 1px solid #2563EB;
            border-radius: 0.75rem;
            color: #FFFFFF;
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 700;
            letter-spacing: 0.03em;
            padding: 0.75rem 1rem;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        #contact-quote-form input.wpcf7-submit:hover {
            background-color: #1D4ED8;
            border-color: #1D4ED8;
        }
        #contact-quote-form .wpcf7-not-valid-tip {
            color: #F15A23;
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }
        #contact-quote-form .wpcf7-response-output {
            border-radius: 0.75rem;
            font-size: 0.8125rem;
            margin: 1rem 0 0;
            padding: 0.75rem 1rem;
        }
        #contact-quote-form .wpcf7-submit:disabled {
            opacity: 0.7;
            cursor: progress;
        }

/* =============================================================================
   Contact Form 7 + "Drag and Drop Multiple File Upload" plugin
   Restyles the plugin's uploader to the locked design tokens.
   ========================================================================== */
        #contact-quote-form .codedropz-upload-handler {
            border: 2px dashed rgba(11, 42, 91, 0.25);
            border-radius: 0.75rem;
            background-color: #F8FAFC;
            margin-bottom: 0;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        #contact-quote-form .codedropz-upload-handler:hover,
        #contact-quote-form .codedropz-upload-handler.codedropz-dragover {
            background-color: #FFFFFF;
            border-color: #2563EB;
        }
        #contact-quote-form .codedropz-upload-container {
            padding: 1rem;
        }
        #contact-quote-form .codedropz-upload-inner h3 {
            font-family: 'Space Grotesk', sans-serif;
            font-size: 0.875rem;
            font-weight: 700;
            line-height: 1.4;
            color: #0F172A;
            margin: 0 0 0.25rem;
        }
        #contact-quote-form .codedropz-upload-inner > span {
            display: block;
            font-size: 0.75rem;
            color: #64748B;
            margin-bottom: 0.5rem;
        }
        #contact-quote-form .cd-upload-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            background-color: #2563EB;
            border: 1px solid #2563EB;
            border-radius: 0.75rem;
            color: #FFFFFF;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 0.5rem 1rem;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }
        #contact-quote-form .cd-upload-btn:hover {
            background-color: #1D4ED8;
            border-color: #1D4ED8;
            color: #FFFFFF;
        }
        #contact-quote-form .dnd-upload-counter {
            right: 0.75rem;
            bottom: 0.4rem;
            font-size: 0.6875rem;
            color: #64748B;
        }
        #contact-quote-form .dnd-upload-status {
            margin-top: 0.5rem;
            padding: 0.5rem 0.75rem;
            border: 1px solid rgba(11, 42, 91, 0.15);
            border-radius: 0.75rem;
            background-color: #FFFFFF;
        }
        #contact-quote-form .dnd-upload-status .dnd-upload-details .name {
            color: #0B2A5B;
            font-size: 0.75rem;
        }
        #contact-quote-form .dnd-upload-status .dnd-upload-details .name em {
            color: #64748B;
            font-weight: 500;
        }
        #contact-quote-form .dnd-upload-status .remove-file {
            color: #F15A23;
            cursor: pointer;
        }
        #contact-quote-form .dnd-progress-bar {
            background-color: #E2E8F0;
            border-radius: 9999px;
            height: 4px;
            overflow: hidden;
        }
        #contact-quote-form .dnd-progress-bar span {
            background-color: #2563EB;
        }
        #contact-quote-form .codedropz-upload-wrapper span.has-error-msg {
            color: #F15A23;
            font-size: 0.75rem;
            font-style: normal;
        }

/* Upload box: matches the theme's original dashed dropzone (icon + hint) */
        #contact-quote-form .codedropz-upload-handler::before {
            content: "\f0ee";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            display: block;
            /* margin:auto cannot centre the glyph on its own: the pseudo element is a
               full-width block, so the icon needs text-align. Without this it sat hard
               against the left edge of the dashed box, half over the border. */
            margin: 0.75rem auto 0.25rem;
            text-align: center;
            font-size: 1.5rem;
            line-height: 1;
            color: #2563EB;
        }
        /* The uploader's helper line sat immediately above the next field label, so the
           form read as one run-on block. */
        #contact-quote-form .codedropz-upload-wrapper {
            margin-bottom: 0.75rem;
        }
        #contact-quote-form .codedropz-upload-container {
            padding: 1rem;
        }
        #contact-quote-form .codedropz-upload-inner h3 {
            font-family: 'Plus Jakarta Sans', sans-serif;
            font-size: 0.8125rem;
            font-weight: 600;
            line-height: 1.4;
            color: #0F172A;
            margin: 0 0 0.375rem;
        }
        #contact-quote-form .codedropz-upload-inner > span {
            display: inline;
            margin-right: 0.3rem;
            font-size: 0.75rem;
            color: #64748B;
        }
        #contact-quote-form .codedropz-btn-wrap {
            display: inline;
        }
        #contact-quote-form .cd-upload-btn {
            display: inline;
            background: none;
            border: 0;
            border-radius: 0;
            padding: 0;
            color: #2563EB;
            font-size: 0.75rem;
            font-weight: 700;
            text-decoration: underline;
            text-underline-offset: 2px;
        }
        #contact-quote-form .cd-upload-btn:hover {
            background: none;
            color: #0B2A5B;
        }
        #contact-quote-form .dnd-upload-counter {
            position: static;
            display: block;
            margin-top: 0.5rem;
            font-size: 0.6875rem;
            color: #64748B;
            text-align: center;
        }
/*
 * Long unbroken tokens - an email address is the common one - must wrap inside their card rather
 * than run past the border on a narrow screen. Seen on /french-translation-services/ at 390px,
 * where contact@dhctranslations.com escaped the quote form.
 */
a[href^="mailto:"] { overflow-wrap: anywhere; word-break: break-word; }
/*
 * CF7 resets paragraph margins, so once the upload helper line wraps onto two lines it butts
 * straight against the next field label (seen at 390px on the language pages). Scoped to the
 * quote form's small print only.
 */
#contact-quote-form p[class*='text-[11px]'] { margin-bottom: 1rem; }

/*
 * Price table on /translation-prices/. Four columns (language, price, language, price) cannot fit a
 * phone, and an overflow-x wrapper hides the loss - the second pair was simply cut off. Below md each
 * row becomes a card holding both directions, price right-aligned against its language.
 */
@media (max-width: 767px) {
  #pricingTable thead { display: none; }
  #pricingTable, #pricingTable tbody { display: block; }
  #pricingTable tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: baseline;
    padding: 0.9rem 1rem;
    border: 1px solid #E5E7EB;
    border-radius: 0.85rem;
    margin-bottom: 0.6rem;
    background: #fff;
  }
  #pricingTable td { display: block; padding: 0; border: 0; }
  #pricingTable td:nth-child(2),
  #pricingTable td:nth-child(4) { text-align: right; white-space: nowrap; }
  #pricingTable td:nth-child(3) { padding-top: 0.55rem; border-top: 1px dashed #E5E7EB; }
  #pricingTable td:nth-child(4) { padding-top: 0.55rem; border-top: 1px dashed #E5E7EB; }
  #pricingTable tr:has(td[colspan]) { grid-template-columns: 1fr; }
  #pricingTable tr:has(td[colspan]) td[colspan] { text-align: left; white-space: normal; }
}
/* ---------------------------------------------------------------------------
 * Brand green (rgb(5 150 105), #059669).
 *
 * There is no Tailwind build step on this machine - assets/tailwind.css is a
 * compiled artefact produced elsewhere - so a new token in tailwind.config.js
 * would not appear in the output. These utilities are therefore written by
 * hand. If the stylesheet is ever regenerated from source, add successGreen to
 * tailwind.config.js (already done) and delete this block.
 * ------------------------------------------------------------------------- */
.text-successGreen { color: #059669; }
.bg-successGreen { background-color: #059669; }
.border-successGreen { border-color: #059669; }
.bg-successGreen\/10 { background-color: rgba(5, 150, 105, 0.10); }
.bg-successGreen\/20 { background-color: rgba(5, 150, 105, 0.20); }
.border-successGreen\/30 { border-color: rgba(5, 150, 105, 0.30); }
/* ---------------------------------------------------------------------------
 * "Additional certification layer" tooltip.
 *
 * Inside a card that is itself a link, so the marker is a focusable span, not a
 * button. Opens on hover and on keyboard focus.
 * ------------------------------------------------------------------------- */
.dhc-tip-wrap { position: relative; display: inline; cursor: help; }
.dhc-tip-wrap:focus { outline: 2px solid #2563EB; outline-offset: 2px; border-radius: 3px; }
.dhc-tip-mark {
	/* A drawn icon, not the literal "(?)" / "(!)" this used to be. Typed brackets read as
	   punctuation in body copy; a circled glyph reads as something you can hover or focus.
	   The glyph is inline SVG in the template, so it stays sharp and needs no icon font. */
	display: inline-block;
	margin-left: 5px;
	color: #2563EB;
	line-height: 0;
	vertical-align: -2px;
	text-decoration: none;
}
.dhc-tip-mark svg { display: block; width: 13px; height: 13px; }
.dhc-tip {
	position: absolute;
	left: 0;
	top: calc(100% + 8px);
	z-index: 40;
	width: 20rem;
	max-width: 78vw;
	padding: 0.75rem 0.875rem;
	border-radius: 0.75rem;
	background: #0B2A5B;
	color: #F8FAFC;
	font-size: 0.75rem;
	line-height: 1.5;
	font-weight: 500;
	box-shadow: 0 12px 28px rgba(11, 42, 91, 0.28);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.dhc-tip-wrap:hover .dhc-tip,
.dhc-tip-wrap:focus .dhc-tip,
.dhc-tip-wrap:focus-within .dhc-tip { opacity: 1; visibility: visible; transform: translateY(0); }

/*
 * Phones: the tooltip becomes part of the card instead of floating over it.
 *
 * It was absolutely positioned with width 20rem and left:0 inside an inline span, so wherever the marker
 * sat past the middle of the line the panel ran past the right edge - measured at 370 to 470 px of content
 * inside a 247 to 341 px box on the certified-translation panels, on both trees, at 320, 360 and 390 px.
 * A hidden but positioned element still contributes to overflow, so this had to change even though nobody
 * can hover it on a touch screen. Static and full width also means a phone reader can actually read it.
 */
@media (max-width: 639px) {
	.dhc-tip {
		position: static;
		display: block;
		width: auto;
		max-width: 100%;
		margin-top: 0.5rem;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
	}
}

/* ---------------------------------------------------------------
   Interactive globe (about page, item 33)
   A dark sphere carrying the world map as a dot-matrix texture. It does not
   spin on its own: it turns only when a city is chosen. Pins sit inside the
   sphere's circle so nothing spills past the rim.
   --------------------------------------------------------------- */
.dhc-globe { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; }
.dhc-globe__stage { position: relative; width: 100%; max-width: 23rem; margin: 0 auto; aspect-ratio: 1 / 1; touch-action: pan-y; }
.dhc-globe__sphere {
	position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
	background: radial-gradient(circle at 34% 28%, #1B4580 0%, #0B2A5B 45%, #071B3B 100%);
	box-shadow:
		inset 0 0 3rem rgba(4, 14, 30, 0.8),
		0 0 0 1px rgba(125, 211, 252, 0.25),
		0 1.25rem 2.5rem rgba(11, 42, 91, 0.28);
}
.dhc-globe__map {
	position: absolute; top: 0; left: 0; height: 100%; width: 600%; opacity: 0.9;
	background-image: url("assets/world-map-texture.svg");
	background-repeat: repeat-x;
	/* three tiles, each two spheres wide, so the 2:1 world map keeps its shape */
	background-size: 33.3333% 100%;
	background-position: 0 50%;
	transform: translate3d(0, 0, 0);
	transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
.dhc-globe__sphere::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	background-image:
		repeating-linear-gradient(to right, rgba(125, 211, 252, 0.14) 0 1px, transparent 1px 34px),
		repeating-linear-gradient(to bottom, rgba(125, 211, 252, 0.1) 0 1px, transparent 1px 34px);
	-webkit-mask-image: radial-gradient(circle, #000 58%, transparent 100%);
	mask-image: radial-gradient(circle, #000 58%, transparent 100%);
}
.dhc-globe__shade {
	position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
	background:
		radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 38%),
		radial-gradient(circle at 50% 50%, rgba(4, 14, 30, 0) 56%, rgba(4, 14, 30, 0.62) 100%);
}
.dhc-globe__markers { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; }
.dhc-globe__pin {
	position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
	display: block; width: 0.5rem; height: 0.5rem; padding: 0; margin: 0;
	border: 0; background: none; cursor: pointer;
	transition: opacity 0.3s ease, transform 0.6s cubic-bezier(0.33, 1, 0.68, 1);
}
/* The marker stays the size of its coordinate, but the tap target is finger-sized. */
.dhc-globe__pin::after { content: ''; position: absolute; inset: -0.5rem; border-radius: 50%; }
.dhc-globe__pin-dot {
	display: block; width: 100%; height: 100%; border-radius: 50%; background: #7DD3FC;
	box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.18), 0 0 10px rgba(125, 211, 252, 0.9);
	transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.dhc-globe__pin-label {
	position: absolute; left: calc(100% + 0.35rem); top: 50%; transform: translateY(-50%);
	font-size: 0.62rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
	color: #BAE6FD; background: rgba(4, 14, 30, 0.72);
	border: 1px solid rgba(125, 211, 252, 0.35); border-radius: 999px;
	padding: 0.05rem 0.4rem; white-space: nowrap; opacity: 0; pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
}
.dhc-globe__pin:hover .dhc-globe__pin-dot,
.dhc-globe__pin:focus-visible .dhc-globe__pin-dot { background: #ffffff; transform: scale(1.35); }
.dhc-globe__pin:hover .dhc-globe__pin-label,
.dhc-globe__pin:focus-visible .dhc-globe__pin-label { opacity: 1; transform: translate(0.1rem, -50%); }
.dhc-globe__pin:focus-visible { outline: 2px solid #7DD3FC; outline-offset: 4px; border-radius: 999px; }
.dhc-globe__pin[aria-pressed="true"] .dhc-globe__pin-dot {
	background: #F15A23; transform: scale(1.25);
	box-shadow: 0 0 0 4px rgba(241, 90, 35, 0.25), 0 0 14px rgba(241, 90, 35, 0.95);
}
.dhc-globe__pin[aria-pressed="true"] .dhc-globe__pin-label { opacity: 1; transform: translate(0.1rem, -50%); color: #FFD9C7; border-color: rgba(241, 90, 35, 0.5); }
.dhc-globe__hint { font-size: 0.68rem; color: #64748B; text-align: center; }
@media (prefers-reduced-motion: reduce) {
	.dhc-globe__map { transition: none; }
}

/* ---------------------------------------------------------------
   About page, Our locations: the globe and the city chips share the
   left column and the information panel sits beside it. Chips are a
   two-column grid so the column does not run twice the height of the
   panel; the "Select" arrow is dropped because the active chip is
   already marked by its dark card.
   --------------------------------------------------------------- */
#telemetry-nav { display: grid; grid-template-columns: 1fr; gap: 0.4rem; align-content: start; }
#telemetry-nav > figure { grid-column: 1 / -1; margin-bottom: 0.35rem; }
#telemetry-nav .telemetry-btn { padding: 0.9rem 1rem; }
#telemetry-nav .telemetry-btn > span:last-child { display: none; }
#telemetry-nav .telemetry-btn .font-bold { font-size: 0.9rem; line-height: 1.25; }
#telemetry-nav .telemetry-btn .text-xs { font-size: 0.7rem; }
@media (max-width: 639px) {
	#telemetry-nav { grid-template-columns: 1fr; }
}

/* while dragging, the transition would lag behind the pointer */
.dhc-globe--dragging .dhc-globe__map,
.dhc-globe--dragging .dhc-globe__pin { transition: none; }

/* -------------------------------------------------------------------------
 * A run of rating stars never wraps or shrinks.
 *
 * The reviews page put "Google Rating 4.9" and five stars in one flex row. A flex item shrinks to its
 * min-content width by default, and for a run of inline icons that is ONE icon, so the five stars stacked
 * 2-2-1 beside the number - which is what the client photographed on /translation-reviews-testimonials/.
 * Every star run on the site is an element whose direct children are the icons, so one rule covers the
 * reviews page, the carousels, both homepages and the location pages without editing ten templates.
 * :has() is supported by every browser this site targets; where it is not, the stars simply behave as
 * they did before, so this cannot regress anything.
 * ---------------------------------------------------------------------- */
:where(div, span, p):has(> i.fa-solid.fa-star) {
	display: inline-flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.125rem;
	flex: 0 0 auto;
}

:where(div, span, p):has(> i.fa-solid.fa-star) > i {
	flex: 0 0 auto;
}


/* -------------------------------------------------------------------------
 * A visible focus indicator everywhere, for keyboard users.
 *
 * Browsers draw their own focus ring, but this theme removes it in a few places (form fields use a
 * box-shadow instead) and the sticky header's white background makes the default ring hard to see.
 * :focus-visible only applies to keyboard focus, so a mouse click still shows nothing, which is what
 * the design wants.
 *
 * Added 28 Oct 2026 with qa-a11y.php, which fails the build if this rule disappears.
 * ---------------------------------------------------------------------- */
:where(a, button, [tabindex], input, select, textarea, summary):focus-visible {
	outline: 2px solid #2563EB;
	outline-offset: 2px;
	border-radius: 2px;
}

/* The footer is dark blue, where a blue ring disappears. */
footer :where(a, button, [tabindex]):focus-visible {
	outline-color: #FFFFFF;
}


/* ---------------------------------------------------------------------------------------------
   WP Simple Pay checkout form.

   The plugin ships its controls at a fixed ~450px and left-aligned inside whatever container it is
   given. Inside a two-thirds card on /make-a-payment/ that read as a form squeezed into the corner,
   with a large empty area beside it. Two fixes: the fields take the card's width, and the plugin's
   own form heading is demoted so it does not compete with the page H2 above it.

   Scoped to #dhc-payment-form on purpose - the same markup appears anywhere the shortcode is used,
   and this is the only place we want the override.
   --------------------------------------------------------------------------------------------- */
#dhc-payment-form .simpay-form-wrap,
#dhc-payment-form .simpay-form-control,
#dhc-payment-form .simpay-field-wrap,
#dhc-payment-form .simpay-label-wrap,
#dhc-payment-form .simpay-custom-amount-container {
	width: 100%;
	max-width: 100%;
}

#dhc-payment-form input[type="text"],
#dhc-payment-form input[type="email"],
#dhc-payment-form input[type="tel"],
#dhc-payment-form input[type="number"],
#dhc-payment-form textarea,
#dhc-payment-form select {
	width: 100%;
	max-width: 100%;
	height: auto;
	padding: 0.75rem 0.9rem;
	border: 1px solid rgba(11, 42, 91, 0.2);
	border-radius: 0.5rem;
	font-size: 1rem;
	background-color: #fff;
}

#dhc-payment-form input:focus,
#dhc-payment-form textarea:focus,
#dhc-payment-form select:focus {
	outline: 2px solid #2563eb;
	outline-offset: 1px;
	border-color: #2563eb;
}

#dhc-payment-form .simpay-form-control {
	margin-bottom: 1.25rem;
}

#dhc-payment-form .simpay-form-control--card {
	padding: 0.9rem;
	border: 1px solid rgba(11, 42, 91, 0.2);
	border-radius: 0.5rem;
	background-color: #fff;
}

/* The plugin's own heading block: it repeats the company and item name right under our H2. */
#dhc-payment-form .simpay-form-title,
#dhc-payment-form .simpay-embedded-heading {
	font-size: 1rem;
	font-weight: 700;
	color: #0b2a5b;
	margin-bottom: 0.25rem;
}

#dhc-payment-form .simpay-form-description {
	font-size: 0.875rem;
	color: #6b7280;
	margin-bottom: 1.5rem;
}

#dhc-payment-form .simpay-checkout-btn {
	width: 100%;
	padding: 0.9rem 1.25rem;
	font-weight: 700;
	border-radius: 0.5rem;
}

/* Hide WP Simple Pay's own form heading (company name + item description).

   It renders directly under our "Pay by card" heading and repeats DHCTranslations UK / Translation,
   which tells the customer nothing. Cannot be removed from the template because the plugin prints it
   inside the shortcode, so it is removed from view here. */
#dhc-payment-form .simpay-form-title,
#dhc-payment-form .simpay-form-description,
#dhc-payment-form .simpay-embedded-heading {
	display: none;
}

/* WP Simple Pay control widths, second pass.

   The rules above set width/max-width on the same wrappers, but the plugin enqueues its own stylesheet after
   this one and wins on load order, so the fields stayed at the plugin's fixed ~450px inside a ~1000px card.
   These carry !important deliberately, scoped to the payment page only, and are the last word on width.

   Height and padding are set here too: a 450px field in a 1000px card reads as an afterthought, and the
   same applies to an input that is 32px tall inside 48px of padding around it. */
#dhc-payment-form .simpay-form-control,
#dhc-payment-form .simpay-field-wrap,
#dhc-payment-form .simpay-label-wrap,
#dhc-payment-form .simpay-custom-amount-container,
#dhc-payment-form .simpay-customer-name-container,
#dhc-payment-form .simpay-email-container,
#dhc-payment-form .simpay-text-container,
#dhc-payment-form .simpay-card-container,
#dhc-payment-form .simpay-plan-select-container {
	width: 100% !important;
	max-width: 100% !important;
}

#dhc-payment-form input[type="text"],
#dhc-payment-form input[type="email"],
#dhc-payment-form input[type="tel"],
#dhc-payment-form input[type="number"],
#dhc-payment-form input[type="password"],
#dhc-payment-form textarea,
#dhc-payment-form select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box;
	min-height: 3rem;
	padding: 0.85rem 1rem;
	font-size: 1rem;
}

#dhc-payment-form textarea {
	min-height: 7rem;
}

/* ---------------------------------------------------------------------------------------------
   Simple Pay caps the embedded form ELEMENT itself, not just its controls:

       .simpay-checkout-form--stripe_checkout-styled.simpay-styled,
       .simpay-checkout-form--embedded.simpay-styled { max-width: 400px }

   Our form carries simpay-checkout-form--embedded + simpay-styled, so #simpay-form-444 was 400px
   wide and every 100%-width child inherited that ceiling - which is why widening the inputs and
   field wrappers changed nothing on screen. The cap has to come off the form itself.
   --------------------------------------------------------------------------------------------- */
#dhc-payment-form form.simpay-checkout-form,
#dhc-payment-form form[data-simpay-form],
#dhc-payment-form .simpay-checkout-form--embedded.simpay-styled {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

#dhc-payment-form .simpay-form-wrap,
#dhc-payment-form .simpay-embedded-heading {
	width: 100% !important;
	max-width: 100% !important;
}
#dhc-payment-form .simpay-custom-amount-container .simpay-custom-amount-input {
	width: 100% !important;
	max-width: 15rem !important;
	flex: 0 0 15rem !important;
	min-height: 3rem;
}

/* Currency chip + amount input: the plugin draws the symbol as a 34px system-font chip with a
   box-shadow ring, sitting next to a 48px input with a real border. Different heights, different
   typeface, and a visible seam. Rebuild it as a proper attached input group. */
#dhc-payment-form .simpay-custom-amount-wrap {
	align-items: stretch;
	max-width: 16rem;
}

#dhc-payment-form .simpay-custom-amount-container .simpay-currency-symbol {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 3rem;
	line-height: 1;
	padding: 0 1rem;
	font-family: inherit;
	font-size: 1rem;
	color: #0b2a5b;
	background-color: #f3f4f6;
	box-shadow: none;
	border: 1px solid rgba(11, 42, 91, 0.2);
	border-right: 0;
	border-radius: 0.5rem 0 0 0.5rem;
}

#dhc-payment-form .simpay-custom-amount-container .simpay-custom-amount-input-symbol-left {
	flex: 1 1 auto !important;
	max-width: none !important;
	border-radius: 0 0.5rem 0.5rem 0 !important;
}
#dhc-payment-form .simpay-custom-amount-wrap {
	width: 16rem !important;
	max-width: 16rem !important;
}

/* Simple Pay draws text inputs with a box-shadow ring instead of a border. We already give the
   controls a real 1px border, so the ring only doubles the edge - and beside the currency chip,
   which has no ring, it made the white input look 1-2px taller than the grey chip. */
#dhc-payment-form input,
#dhc-payment-form textarea,
#dhc-payment-form select {
	box-shadow: none !important;
}

/* The plugin fixes .simpay-checkout-btn at height:40px with 8px padding. Our 0.9rem padding then
   overflows that 40px box and the label lands 7px low (measured: 20px above the text, 6px below).
   Give it a height of its own and centre the label with flex instead of padding maths. */
#dhc-payment-form .simpay-checkout-btn {
	height: auto;
	min-height: 3.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	padding: 0.95rem 1.25rem;
}

/* ---------------------------------------------------------------------------------------------
   Orange accent badges.

   The pattern is bg-accentOrange/10 + text-accentOrange: orange at 10% over white is #f7eae6, and
   #F15A23 on that tint measures 2.86:1 - under the 4.5:1 AA floor for small text. The badge is
   used across front-page, page-us-home, page-about, page-location, page-translation-services and
   guide/hub, so it is fixed once here rather than in six templates. The tint, border and icon stay
   orange; only the text darkens, to #9a3412, which measures 6.2:1 on the same tint.
   --------------------------------------------------------------------------------------------- */
.bg-accentOrange\/10.text-accentOrange {
	color: #9a3412;
}