/* WordPress-specific styles.
 *
 * Kept out of style.css because that file is copied from the static build on
 * every run and anything added to it would be overwritten. This is the layer
 * that only matters once the design is running inside WordPress: the classes
 * core outputs, the editor's alignment classes, comments and pagination.
 */

/* ---------- accessibility ---------- */
/* Core and several plugins output .screen-reader-text and expect it to hide
   visually while staying available to assistive technology. */
.screen-reader-text {
    border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
    height: 1px; width: 1px; margin: -1px; padding: 0; overflow: hidden;
    position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
    clip: auto !important; clip-path: none; display: block;
    height: auto; width: auto; padding: 1rem 1.5rem; margin: 0;
    background: #fff; color: var(--ink); font-weight: 700;
    left: 1rem; top: 1rem; z-index: 100000; border-radius: .5rem;
    box-shadow: 0 10px 30px rgba(11,35,64,.25);
}

/* ---------- editor alignment ---------- */
.entry-content .alignleft  { float: left; margin: .5rem 1.5rem 1rem 0; }
.entry-content .alignright { float: right; margin: .5rem 0 1rem 1.5rem; }
.entry-content .aligncenter { display: block; margin-inline: auto; }
.entry-content .alignwide,
.entry-content .alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; }
.entry-content .alignwide { margin-inline: -4rem; max-width: calc(100% + 8rem); }
.entry-content img { max-width: 100%; height: auto; }
.entry-content figure { margin: 0 0 1.5rem; }
.entry-content figcaption,
.wp-caption-text { font-size: .85rem; color: var(--muted); margin-top: .5rem; }

@media (max-width: 991.98px) {
    .entry-content .alignwide { margin-inline: 0; max-width: 100%; }
}

/* ---------- long-form content ---------- */
.entry-content > * + * { margin-top: 1.1rem; }
.entry-content h2 { font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); margin-top: 2.5rem; }
.entry-content h3 { font-size: 1.25rem; color: var(--ink); margin-top: 2rem; }
.entry-content ul,
.entry-content ol { padding-left: 1.25rem; }
.entry-content li { margin-bottom: .4rem; }
.entry-content blockquote {
    border-left: 3px solid var(--amber); padding: .25rem 0 .25rem 1.25rem;
    margin-left: 0; color: var(--ink); font-size: 1.05rem;
}
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th,
.entry-content td { border: 1px solid var(--line); padding: .6rem .8rem; text-align: left; }
.entry-content th { background: var(--blue-tint); color: var(--ink); }
.entry-content pre {
    background: var(--ink); color: #fff; padding: 1.25rem; border-radius: .75rem;
    overflow-x: auto; font-size: .88rem;
}
.entry-content :not(pre) > code {
    background: var(--blue-tint); color: var(--ink);
    padding: .15rem .4rem; border-radius: .3rem; font-size: .9em;
}

/* ---------- pagination ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: .5rem; }
.pagination .page-numbers {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 .75rem; border-radius: .6rem;
    border: 1px solid var(--line); color: var(--ink); text-decoration: none;
    font-weight: 600; font-size: .92rem;
}
.pagination .page-numbers:hover { border-color: var(--blue); color: var(--blue); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ---------- widgets ---------- */
.widget-title { color: var(--ink); }
.widget ul { list-style: none; margin: 0; padding: 0; font-size: .93rem; }
.widget li { padding: .4rem 0; border-bottom: 1px solid var(--line); }
.widget li:last-child { border-bottom: 0; }
.widget a { color: var(--muted); text-decoration: none; }
.widget a:hover { color: var(--blue); }

/* ---------- comments ---------- */
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-list li { margin-bottom: 1.5rem; }
.comment-list .children { list-style: none; padding-left: 1.5rem; margin-top: 1.5rem; }
.comment-body {
    border: 1px solid var(--line); border-radius: 1rem; padding: 1.25rem; background: #fff;
}
.comment-author { font-weight: 700; color: var(--ink); font-size: .95rem; }
.comment-metadata { font-size: .82rem; color: var(--muted); margin-bottom: .6rem; }
.comment-respond .form-control,
.comment-respond textarea { margin-bottom: 1rem; }

/* ---------- the form placeholder ---------- */
/* [svk_form] wraps whatever the configured plugin renders. The rules here
   only normalise a plugin's own markup enough to sit inside the design; they
   deliberately do not try to restyle every form plugin in existence. */
.vke-form input[type="text"],
.vke-form input[type="email"],
.vke-form input[type="tel"],
.vke-form input[type="url"],
.vke-form input[type="number"],
.vke-form select:not(.form-select),
.vke-form textarea {
    width: 100%; border: 1px solid var(--line); border-radius: .6rem;
    padding: .7rem .9rem; font-size: .95rem; background-color: #fff; color: var(--ink);
}
.vke-form input:focus,
.vke-form select:focus,
.vke-form textarea:focus {
    outline: 0; border-color: var(--blue); box-shadow: 0 0 0 .2rem rgba(43,132,240,.15);
}
.vke-form label { display: block; font-size: .88rem; font-weight: 600; color: var(--ink); margin-bottom: .35rem; }
.vke-form input[type="submit"],
.vke-form button[type="submit"] {
    border: 0; border-radius: 999px; font-weight: 700; padding: .8rem 1.6rem;
    font-size: .95rem; background: var(--amber); color: var(--ink); cursor: pointer;
}
.vke-form input[type="submit"]:hover,
.vke-form button[type="submit"]:hover { filter: brightness(1.05); }
.vke-form__note { color: var(--muted); }

/* Contact Form 7 wraps every control in an inline span. Left inline, an
   input with width:100% measures against it instead of against the Bootstrap
   column, and the field comes out the wrong width - which is the only thing
   stopping CF7 from using the designed two-column layout. */
.vke-form .wpcf7-form-control-wrap { display: block; }

/* CF7 runs the form template through autop, which can leave empty paragraphs
   between block-level markup. Cheaper to hide them than to disable autop
   globally and have to remember why. */
.vke-form .wpcf7-form p:empty { display: none; margin: 0; }

/* The ajax spinner sits next to the submit button rather than on its own line. */
.vke-form .wpcf7-spinner { margin: 0 0 0 .75rem; vertical-align: middle; }

/* A checkbox list starts at the left edge, not indented. */
.vke-form .wpcf7-list-item { margin: 0 1rem 0 0; }

/* Contact Form 7 puts its own spacing and response markup in. */
.vke-form .wpcf7-form p { margin-bottom: 1rem; }
.vke-form .wpcf7-not-valid-tip { color: #b32d2e; font-size: .85rem; margin-top: .3rem; }
.vke-form .wpcf7-response-output {
    border: 1px solid var(--line); border-radius: .6rem; padding: .8rem 1rem;
    margin: 1rem 0 0; font-size: .9rem;
}

/* ==========================================================================
   Page banner — printed by the Page banner Elementor widget
   --------------------------------------------------------------------------
   Full bleed, with the shape declared so the space is reserved before the
   image decodes. A banner that arrives late and pushes the page down is the
   most visible layout shift a page can have.

   On phones it always crops to 16:9: a panoramic image across a narrow screen
   is a 130px strip, which reads as a rule rather than a picture.
   ========================================================================== */

.vke-pagebanner { background: var(--ink); }
.vke-pagebanner img { display: block; width: 100%; height: auto; }

@media (max-width: 767px) {
    .vke-pagebanner img { aspect-ratio: 16 / 9 !important; object-fit: cover; object-position: center; }
}

/* =====================================================================
   Elementor integration
   ===================================================================== */

/* Theme widgets print full-bleed bands with their own .container, so the
   Elementor wrappers around them must add nothing. */
.elementor-widget[class*="elementor-widget-vke-"] { margin-bottom: 0 !important; }
.elementor-widget[class*="elementor-widget-vke-"] > .elementor-widget-container { padding: 0; margin: 0; }
.elementor-section.elementor-section-full_width > .elementor-column-gap-no > .elementor-column > .elementor-widget-wrap { padding: 0; }

/* Elementor's base CSS sets img heights / link styles that fight Bootstrap. */
.elementor .vke-band img { height: auto; }
.elementor .vke-band a:not(.btn) { box-shadow: none; }

/* Elementor's reset zeroes heading margins; restore Bootstrap's default with zero
   specificity (:where) so every design rule (.core__title, .svc-tile h3 …) still wins. */
:where(.elementor .vke-band) :is(h1, h2, h3, h4, h5, h6) { margin-bottom: .5rem; }
:where(.elementor .vke-band) .vke-title.mb-0 { margin-bottom: 0; }
:where(.elementor .vke-band) p { margin-bottom: 1rem; }
/* Elementor sets .elementor hr { margin: 0 }; give dividers back their design margins. */
.elementor .vke-band hr { margin: 1rem 0; }
.elementor .vke-band hr.core__rule { margin: 3.25rem 0; }
.elementor .vke-band hr.who__rule { margin: 1.75rem 0 2rem; }
@media (max-width: 767.98px) { .elementor .vke-band hr.core__rule { margin: 2.25rem 0; } }

/* Heading wrapper added by the widget base: neutral by default. */
.vke-heading-block { display: block; }

/* "None" vertical spacing option */
.vke-band.vke-pad-0 { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Header/footer layouts */
.vke-layout--header { position: relative; z-index: 1030; }
.vke-layout--header .navbar.sticky-top { position: sticky; }
/* A sticky navbar inside an Elementor layout is constrained by its wrappers;
   make the whole header layout sticky instead when the navbar asks for it. */
/* --vke-above-nav (set by main.js) = height of whatever sits above the navbar in
   the layout (the top bar), so it scrolls away and only the navbar sticks. */
.vke-layout--header:has(.navbar.sticky-top) { position: sticky; top: calc(0px - var(--vke-above-nav, 0px)); }
.admin-bar .vke-layout--header:has(.navbar.sticky-top) { top: calc(32px - var(--vke-above-nav, 0px)); }
@media (max-width: 782px) { .admin-bar .vke-layout--header:has(.navbar.sticky-top) { top: calc(46px - var(--vke-above-nav, 0px)); } }
.vke-layout--header:has(.navbar.sticky-top) .navbar.sticky-top { position: relative; }

/* Per-page "hide call to action" */
.vke-hide-prefooter .vke-prefooter { display: none !important; }

/* Editor helpers */
.vke-editor-empty {
    padding: 28px; margin: 12px; text-align: center; font: 600 14px/1.4 system-ui, sans-serif;
    color: #5C6B84; border: 2px dashed #CBD5E1; border-radius: 12px; background: #F8FAFC;
}
.vke-in-editor .offcanvas { visibility: hidden; }
.vke-layout-canvas { background: #f3f5f8; }

/* Blog cards */
.vke-post-card { transition: transform .2s ease, box-shadow .2s ease; }
.vke-post-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(11, 35, 64, .12) !important; }
.pagination .page-link { border-radius: .6rem; margin: 0 .2rem; color: var(--ink); }
.pagination .active .page-link { background: var(--ink); border-color: var(--ink); color: #fff; }