/* =========================================================================
   SGPL theme: WordPress layer.
   Everything the static design did not need: Contact Form 7 states, classic
   editor content (every tag the editor can produce), alignments, captions,
   pagination, the admin bar and small utilities. Design tokens come from
   style.css; nothing here changes the static layouts.
   ========================================================================= */

/* ---------------------------------------------------------------- utilities */
@media (min-width: 1025px) { .hide-desktop { display: none !important; } }
@media (min-width: 601px) and (max-width: 1024px) { .hide-tablet { display: none !important; } }
@media (max-width: 600px) { .hide-mobile { display: none !important; } }
.sgpl-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-fallback { display: flex; flex-direction: column; gap: 14px; }
.form-fallback .form-note { color: inherit; opacity: 0.8; }

/* Admin bar: the fixed header sits under it. */
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } #wpadminbar { position: absolute; } }

/* ---------------------------------------------------------------- Contact Form 7 */
.wpcf7 { position: relative; min-width: 0; }
.wpcf7 .screen-reader-response { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); border: 0; word-wrap: normal !important; }
.wpcf7 form .hidden-fields-container, .wpcf7 form > div[style*="display: none"] { display: none !important; }
.wpcf7-form-control-wrap { position: relative; display: block; }
.wpcf7-not-valid-tip { display: block; margin-top: 6px; font-size: var(--fs-micro); color: var(--color-error); }
.wpcf7-form .wpcf7-not-valid { border-color: var(--color-error) !important; }
.wpcf7-response-output { grid-column: 1 / -1; margin: 0 !important; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: 14px; font-size: var(--fs-xsmall); line-height: 1.5; }
.wpcf7 form.init .wpcf7-response-output, .wpcf7 form.resetting .wpcf7-response-output, .wpcf7 form.submitting .wpcf7-response-output { display: none; }
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--color-primary); background: var(--color-tint); color: var(--color-tint-text); }
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output { border-color: #E2B14A; background: #FFF6E0; color: #6B4B00; }
.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output, .wpcf7 form.spam .wpcf7-response-output { border-color: var(--color-error); background: #FDECEC; color: #8A1F1F; }
.wpcf7-spinner { display: none; }
.wpcf7 form.submitting button[type="submit"] { opacity: 0.6; pointer-events: none; }
.site-form.dark .wpcf7-not-valid-tip { color: #FFB4A8; }

/* Where the static form was the flex child, the CF7 wrapper now is. */
.cta-band.with-form .cta-inner > .wpcf7 { flex: 1.3 1 520px; }
.cta-band.with-form .cta-inner > .wpcf7 .site-form { flex: none; }
.newsletter-card > .wpcf7 { flex: 1 1 420px; }
.newsletter-card .inline-form .wpcf7-form-control-wrap { flex: 1 1 240px; }
.newsletter-card .inline-form .wpcf7-response-output { flex: 1 1 100%; }
.contact-layout .form-card .wpcf7 { margin-top: 28px; }
.contact-layout .form-card .heading-group + .wpcf7 { margin-top: 0; }
.lead-form .wpcf7-form-control-wrap input { width: 100%; }
.lead-form .lead-field .wpcf7-form-control-wrap { display: block; }
.home-hero .hero-form .wpcf7-response-output { color: var(--color-text); }

/* Consent checkbox from a CF7 acceptance tag. */
.form-consent .wpcf7-form-control-wrap, .form-consent .wpcf7-list-item { display: block; margin: 0; }
.form-consent label { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.form-consent input[type="checkbox"] { flex: none; width: 20px; height: 20px; margin-top: 2px; accent-color: var(--color-primary); }

/* File drop: CF7 wraps the input; keep it invisible inside the label. */
.file-drop { position: relative; }
.file-drop .wpcf7-form-control-wrap { position: static; }
.file-drop .wpcf7-not-valid-tip { position: absolute; left: 20px; bottom: -22px; }

/* ---------------------------------------------------------------- datasheet buttons */
.datasheet-list button { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; padding: 18px 20px; border: 0; border-radius: 18px; background: var(--color-bg-alt); color: var(--color-ink); font: inherit; font-weight: var(--fw-medium); text-align: left; cursor: pointer; transition: background-color var(--transition); }
.datasheet-list button:hover { background: var(--color-tint); }
.datasheet-list button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
button.btn { font-family: var(--font-body); }

/* ---------------------------------------------------------------- pagination */
.pagination, .navigation.pagination { display: flex; justify-content: center; margin-top: 48px; }
.pagination .nav-links, .pagination { flex-wrap: wrap; gap: 8px; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 14px; border-radius: var(--radius-full); background: var(--color-white); color: var(--color-ink); font-weight: var(--fw-semibold); text-decoration: none; transition: background-color var(--transition), color var(--transition); }
.pagination .page-numbers:hover { background: var(--color-tint); }
.pagination .page-numbers.current { background: var(--color-ink); color: var(--color-white); }
.pagination .page-numbers svg.icon { width: 18px; height: 18px; }
.pagination .page-numbers.dots { background: none; }

/* ---------------------------------------------------------------- classic editor content (blog, pages, service text) */
.content-area h1, .content-area h4, .content-area h5, .content-area h6 { margin-top: 32px; font-family: var(--font-heading); color: var(--color-text); line-height: 1.25; }
.content-area h1 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); }
.content-area h4 { font-size: 1.125rem; }
.content-area h5 { font-size: 1rem; }
.content-area h6 { font-size: 0.875rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-muted); }
.content-area h3 { scroll-margin-top: calc(var(--header-height) + 24px); }
.content-area strong, .content-area b { font-weight: var(--fw-semibold); color: var(--color-text); }
.content-area em, .content-area i { font-style: italic; }
.content-area u { text-underline-offset: 3px; }
.content-area s, .content-area del { color: var(--color-muted); }
.content-area mark { padding: 0 4px; border-radius: 4px; background: var(--color-tint); color: var(--color-tint-text); }
.content-area small { font-size: var(--fs-xsmall); }
.content-area sub, .content-area sup { font-size: 0.75em; line-height: 0; }
.content-area abbr[title] { text-decoration: underline dotted; cursor: help; }
.content-area a:hover { color: var(--color-primary-dark); }
.content-area ol:not([class]) { list-style: decimal; }
.content-area ol:not([class]) ol { list-style: lower-alpha; }
.content-area ul:not([class]) ul { list-style: circle; }
.content-area li > ul, .content-area li > ol { margin-top: 8px; }
.content-area li::marker { color: var(--color-primary); }
.content-area dl { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; gap: 10px 24px; }
.content-area dt { font-weight: var(--fw-semibold); color: var(--color-text); }
.content-area dd { margin: 0; color: var(--color-body); }
.content-area hr { height: 1px; margin: 40px 0; border: 0; background: var(--color-border-soft); }
.content-area code, .content-area kbd, .content-area samp { padding: 2px 6px; border-radius: 6px; background: var(--color-surface); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; color: var(--color-text); }
.content-area pre { overflow-x: auto; padding: 20px 24px; border-radius: var(--radius-lg, 18px); background: var(--color-ink); color: var(--color-on-dark-bright); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: var(--fs-small); line-height: 1.6; }
.content-area pre code { padding: 0; background: none; color: inherit; }
.content-area blockquote cite, .content-area blockquote footer { display: block; margin-top: 14px; font-size: var(--fs-small); font-style: normal; color: var(--color-lime); }
.content-area q { quotes: "\201C" "\201D" "\2018" "\2019"; }
.content-area table caption { padding: 0 0 12px; font-size: var(--fs-xsmall); text-align: left; color: var(--color-muted); caption-side: top; }
.content-area .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.content-area tbody tr:hover td { background: #FAFAF7; }
.content-area iframe, .content-area embed, .content-area object, .content-area video { max-width: 100%; border: 0; border-radius: var(--radius-xl); }
.content-area .wp-embed-responsive, .content-area .embed-responsive { position: relative; aspect-ratio: 16 / 9; }
.content-area iframe[src*="youtube"], .content-area iframe[src*="vimeo"] { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.content-area audio { width: 100%; }

/* Images, alignments and captions from the classic editor. */
.content-area img { height: auto; }
.content-area .alignnone { margin-top: 28px; }
.content-area .aligncenter { display: block; margin: 32px auto 0; }
.content-area .alignleft { float: left; width: auto; max-width: 48%; margin: 8px 28px 16px 0; }
.content-area .alignright { float: right; width: auto; max-width: 48%; margin: 8px 0 16px 28px; }
.content-area img.alignleft, .content-area img.alignright { width: auto; }
.content-area::after { content: ""; display: table; clear: both; }
.content-area .wp-caption { max-width: 100%; margin-top: 32px; }
.content-area .wp-caption img { display: block; width: 100%; }
.content-area .wp-caption-text, .content-area .gallery-caption { margin-top: 10px; font-size: var(--fs-xsmall); line-height: 1.5; color: var(--color-muted); }
.content-area .wp-caption.alignleft, .content-area .wp-caption.alignright { margin-top: 8px; }
.content-area .gallery { display: grid; grid-template-columns: repeat(var(--gallery-cols, 3), minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.content-area .gallery-columns-1 { --gallery-cols: 1; } .content-area .gallery-columns-2 { --gallery-cols: 2; } .content-area .gallery-columns-4 { --gallery-cols: 4; } .content-area .gallery-columns-5 { --gallery-cols: 5; }
.content-area .gallery-item { margin: 0; }
.content-area .gallery-item img { aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg, 18px); }
.content-area .lead { font-size: 1.3125rem; line-height: 1.7; color: var(--color-text); }
.content-area .note-box { padding: 18px 22px; border-radius: 18px; background: var(--color-tint); color: var(--color-tint-text); }
.content-area .check-list:not(:has(svg)) li { padding-left: 28px; position: relative; list-style: none; }
.content-area .check-list:not(:has(svg)) li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(-45deg); }
@media (max-width: 600px) {
  .content-area .alignleft, .content-area .alignright { float: none; max-width: 100%; margin: 24px 0 0; }
  .content-area dl { grid-template-columns: 1fr; gap: 4px; }
  .content-area dd + dt { margin-top: 12px; }
  .content-area .gallery { --gallery-cols: 2; }
}

/* Screen reader text (core class names). */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.screen-reader-text:focus { position: static !important; width: auto; height: auto; margin: 0; clip: auto; }

/* Segment cards: three across need a taller card so the text clears the title. */
.card-grid.wide .overlay-card.square { aspect-ratio: 4 / 5; }
.card-grid.wide .overlay-card.square .overlay-body { padding: 28px; }
.card-grid.wide .overlay-card.square .overlay-title { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); }

/* Client carousel: the same speed whatever the number of logos (time is set per strip). */
.logo-marquee ul { animation-duration: var(--marquee-time, 32s); }
/* Clients page grid: six across, so 30 logos fill five even rows. */
.logo-grid.tall { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }