/* ==========================================================================
   VlineMedia – WordPress additions (loaded after the original main.css).
   Only covers markup that did not exist in the static site.
   ========================================================================== */

/* WordPress adds width/height attributes to images; keep the original auto-height behaviour
   (zero specificity, so every rule from main.css still wins). */
:where(img) { height: auto }

/* Accessibility helpers */
.screen-reader-text {
    border: 0;
    clip: rect(1px,1px,1px,1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important
}

.skip-link:focus {
    clip: auto;
    clip-path: none;
    height: auto;
    width: auto;
    left: 16px;
    top: 16px;
    z-index: 100000;
    padding: 12px 18px;
    border-radius: 999px;
    background: var(--cyan);
    color: #090d12;
    font-weight: 700
}

/* Admin bar offset for the fixed header */
.admin-bar .header { top: 32px }
@media (max-width: 782px) { .admin-bar .header { top: 46px } }

/* Current section in dropdown parents */
.header .nav-dropdown.is-current > .nav-dropdown-toggle { color: var(--cyan) }

/* Contact form: honeypot + status messages */
.vlm-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden }

.vlm-form-status {
    margin: 0;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 600
}
.vlm-form-status.is-success { background: rgba(30,226,108,.12); color: #1ee26c; border: 1px solid rgba(30,226,108,.35) }
.vlm-form-status.is-error { background: rgba(255,90,90,.1); color: #ff6b6b; border: 1px solid rgba(255,90,90,.35) }

.vlm-form-plugin input:not([type=submit]):not([type=checkbox]):not([type=radio]),
.vlm-form-plugin textarea,
.vlm-form-plugin select { width: 100% }

/* Inline field validation (assets/js/contact-form.js + server-side re-render) */
.vlm-field-error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #ff6b6b;
}
#contact-form input.is-invalid,
#contact-form textarea.is-invalid { border-color: #ff6b6b !important }
#contact-form button[type=submit][disabled] { opacity: .65; cursor: not-allowed }

.footer-address { margin: 14px 0 0; font-size: 14px; line-height: 1.6; opacity: .8 }
.footer-legal-links a { margin-right: 14px }

/* Generic page content (page.php / extra editor content) */
.vlm-page-content { padding-top: 40px }
.entry-content { max-width: 880px; font-size: 17px; line-height: 1.75; color: var(--text) }
.entry-content > * + * { margin-top: 1.1em }
.entry-content h2, .entry-content h3, .entry-content h4 { line-height: 1.2; margin-top: 1.6em }
.entry-content a { color: var(--cyan); text-decoration: underline; text-underline-offset: 3px }
.entry-content img { height: auto; border-radius: 18px }
.entry-content blockquote {
    margin: 1.6em 0;
    padding: 18px 24px;
    border-left: 3px solid var(--cyan);
    background: var(--panel2);
    border-radius: 0 16px 16px 0
}
.entry-content ul, .entry-content ol { padding-left: 1.3em }
.entry-content table { width: 100%; border-collapse: collapse }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 12px; text-align: left }
.alignwide { max-width: 1320px }
.alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) }
.aligncenter { margin-left: auto; margin-right: auto }
.wp-caption-text, figcaption { font-size: 13px; color: var(--muted); margin-top: 8px }

/* Blog grid */
.vlm-post-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px
}
.vlm-post-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line);
    border-radius: 26px;
    overflow: hidden;
    background: color-mix(in srgb, var(--bg) 96%, #18bff0 4%);
    transition: transform .35s ease, border-color .35s ease
}
.vlm-post-card:hover { transform: translateY(-5px); border-color: #18bff0 }
.vlm-post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--panel2) }
.vlm-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease }
.vlm-post-card:hover .vlm-post-card__media img { transform: scale(1.04) }
.vlm-post-card__placeholder { display: grid; place-items: center; height: 100% }
.vlm-post-card__placeholder img { width: 90px; height: auto; object-fit: contain; opacity: .7 }
.vlm-post-card__body { display: flex; flex-direction: column; gap: 12px; padding: 24px; flex: 1 }
.vlm-post-card__title { margin: 0; font-size: 22px; line-height: 1.25 }
.vlm-post-card__title a:hover { color: var(--cyan) }
.vlm-post-card__body p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6 }
.vlm-post-card .service-list-link { margin-top: auto; align-self: flex-start }

.vlm-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; font-size: 13px; color: var(--muted); letter-spacing: .02em }
.vlm-post-cat {
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--cyan);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .08em
}
.vlm-single-hero .vlm-post-meta { margin-top: 18px }

/* Pagination */
.vlm-pagination { margin-top: 48px }
.vlm-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center }
.vlm-pagination .page-numbers {
    min-width: 46px;
    height: 46px;
    padding: 0 14px;
    display: inline-grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-weight: 700
}
.vlm-pagination .page-numbers.current,
.vlm-pagination a.page-numbers:hover { background: var(--brand); color: #fff; border-color: transparent }
.vlm-pagination .icon { width: 18px; height: 18px }

/* Single post */
.vlm-single-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start }
.vlm-single-thumb { margin: 0 0 32px; border-radius: 26px; overflow: hidden }
.vlm-single-thumb img { width: 100%; height: auto }
.vlm-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px }
.vlm-tags a { padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px }
.post-navigation { margin-top: 40px; border-top: 1px solid var(--line); padding-top: 28px }
.post-navigation .nav-links { display: grid; grid-template-columns: 1fr 1fr; gap: 20px }
.post-navigation .nav-next { text-align: right }
.post-navigation small { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .1em }
.post-navigation span { font-weight: 700 }

.vlm-sidebar { display: grid; gap: 24px; position: sticky; top: 110px }
.vlm-widget { padding: 24px; border: 1px solid var(--line); border-radius: 22px; background: var(--panel) }
.vlm-widget-title { margin: 0 0 14px; font-size: 16px; text-transform: uppercase; letter-spacing: .08em }
.vlm-widget ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px }
.vlm-widget a:hover { color: var(--cyan) }

/* Search form */
.vlm-search-form { display: flex; gap: 10px; width: 100% }
.vlm-search-form input[type=search] {
    flex: 1;
    min-width: 0;
    height: 50px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--text);
    font: inherit
}
.vlm-search-form button {
    height: 50px;
    padding: 0 22px;
    border: 0;
    border-radius: 999px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer
}
.vlm-search-bar { margin-top: 30px; max-width: 620px }

.vlm-empty { max-width: 620px; margin: 0 auto; text-align: center; display: grid; gap: 16px }
.vlm-404-actions { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; margin-top: 28px }
.vlm-404-actions .vlm-search-form { max-width: 420px }

/* Comments */
.vlm-comments { margin-top: 48px }
.vlm-comments .comment-list { list-style: none; padding: 0 }
.vlm-comments .comment-body { padding: 18px 0; border-bottom: 1px solid var(--line) }
.vlm-comments input[type=text], .vlm-comments input[type=email], .vlm-comments input[type=url], .vlm-comments textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--panel);
    color: var(--text);
    font: inherit
}

@media (max-width: 1100px) {
    .vlm-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
    .vlm-single-layout { grid-template-columns: 1fr }
    .vlm-sidebar { position: static }
}
@media (max-width: 680px) {
    .vlm-post-grid { grid-template-columns: 1fr }
    .post-navigation .nav-links { grid-template-columns: 1fr }
    .post-navigation .nav-next { text-align: left }
}

/* Block widgets inside the blog sidebar */
.vlm-sidebar h2, .vlm-sidebar .wp-block-heading { font-size: 16px; font-family: var(--font); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 14px }
.vlm-sidebar .wp-block-search__inside-wrapper { display: flex; gap: 8px }
.vlm-sidebar .wp-block-search__input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); color: var(--text) }
.vlm-sidebar .wp-block-search__button { height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--brand); color: #fff; font-weight: 700; cursor: pointer }
.vlm-sidebar .wp-block-search__label { display: block; margin-bottom: 8px; font-size: 13px; color: var(--muted) }
.vlm-sidebar ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }