/*
Theme Name: Blacklisted
Description: A custom WordPress theme for an automotive mechanic website.
Version: 0.2.7
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: blacklisted
*/
:root {
    --background: #03090f;
    --surface: #101b26;
    --text: #f2f4f6;
    --muted: #b8c2cc;
    --accent: #00a3f5;
    --border: #164561;
    --width: 1160px
}

* {
    box-sizing: border-box
}

body {
    margin: 0;
    /*background: var(--background);*/
    background-image: linear-gradient(136deg, #000000, #060233);
    background-attachment: fixed;
    margin: 0;
    height: 100vh;
    color: var(--text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.65
}

a {
    color: inherit;
    text-underline-offset: .2em
}

a:hover {
    color: var(--accent)
}

a:focus-visible,
button:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 5px
}

img {
    max-width: 100%;
    height: auto
}

.container {
    width: min(var(--width), calc(100% - 40px));
    margin-inline: auto
}

.site-header {
    border-bottom: 1px solid var(--border)
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding-block: 24px
}

.site-brand {
    font-size: 1.4rem;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: .04em
}

.custom-logo-link {
    display: block;
    width: 340px;
    max-width: 100%;
    flex-shrink: 0
}

.custom-logo-link img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto
}

.menu {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    list-style: none;
    padding: 0;
    margin: 0
}

.menu a {
    text-decoration: none
}

.menu .sub-menu {
    list-style: none;
    padding-left: 16px
}

.hero {
    padding-block: clamp(64px, 10vw, 140px);
    max-width: 900px
}

.eyebrow {
    color: var(--accent);
    font-size: .85rem;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: .15em
}

h1,
h2,
h3 {
    line-height: 1.1;
    letter-spacing: -.035em
}

h1 {
    font-size: clamp(2.5rem, 7vw, 5.5rem);
    margin: 20px 0 28px
}

h2 {
    font-size: clamp(1.8rem, 4vw, 3rem)
}

.hero p:not(.eyebrow) {
    max-width: 600px;
    color: var(--muted);
    font-size: 1.15rem
}

.content-area {
    padding-block: 64px;
    min-height: 50vh
}

.entry {
    margin-bottom: 48px;
    overflow-wrap: anywhere
}

.entry h1 {
    font-size: clamp(2.5rem, 6vw, 4rem)
}

.entry-content>* {
    max-width: 100%
}

.entry-content:after {
    content: '';
    display: table;
    clear: both
}

.alignwide {
    width: 100%
}

.aligncenter {
    display: block;
    margin-inline: auto
}

.alignleft {
    float: left;
    margin: 0 24px 20px 0
}

.alignright {
    float: right;
    margin: 0 0 20px 24px
}

.wp-caption {
    max-width: 100%
}

.wp-caption-text,
.gallery-caption {
    color: var(--muted);
    font-size: .9rem
}

.sticky {
    border-left: 3px solid var(--accent);
    padding-left: 24px
}

.bypostauthor {
    font-weight: inherit
}

.site-footer {
    padding-block: 32px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .9rem
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0
}

.screen-reader-text:focus {
    clip: auto;
    width: auto;
    height: auto;
    margin: 12px;
    padding: 12px;
    background: var(--text);
    color: var(--background);
    z-index: 100000
}

input,
textarea,
select,
button {
    font: inherit;
    max-width: 100%
}

@media(max-width:640px) {
    .header-inner {
        align-items: flex-start;
        flex-direction: column
    }

    .menu {
        gap: 12px 18px
    }

    .content-area {
        padding-block: 40px
    }
}

/* Structured, editable service website pages. */
.page-main {
    padding-block: 0 64px
}

.site-page h1 {
    font-size: clamp(2.8rem, 6.4vw, 5.2rem);
    max-width: 900px
}

.site-page h2 {
    margin-top: 0
}

.site-page h3 {
    font-size: 1.35rem
}

.site-page p {
    color: var(--muted)
}

.site-page .eyebrow {
    color: var(--accent);
    font-size: .8rem
}

.site-section {
    padding-block: 64px;
    border-bottom: 1px solid var(--border)
}

.page-hero {
    padding-block: 80px
}

.section-heading {
    max-width: 740px;
    margin-bottom: 32px
}

.wp-block-columns {
    display: flex;
    gap: 32px;
    margin-bottom: 0
}

.wp-block-column {
    flex: 1;
    min-width: 0
}

.page-hero .wp-block-columns,
.split-section .wp-block-columns {
    align-items: center
}

.service-card,
.contact-card,
.step-card {
    height: auto;
    min-width: 0;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 4px
}

.service-card h3,
.contact-card h3,
.step-card h3 {
    margin-top: 0
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px
}

.image-placeholder {
    margin: 0
}

.image-placeholder img {
    display: block;
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: 4px
}

.image-placeholder figcaption {
    color: var(--muted);
    font-size: .8rem;
    margin-top: 10px
}

.wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 28px
}

.wp-block-button__link {
    display: inline-block;
    background: var(--accent);
    color: var(--background);
    padding: 13px 23px;
    border: 1px solid var(--accent);
    border-radius: 3px;
    font-weight: 700;
    text-decoration: none
}

.wp-block-button__link:hover {
    background: #56c4ff;
    color: var(--background)
}

.is-style-outline .wp-block-button__link {
    background: transparent;
    color: var(--text)
}

.is-style-outline .wp-block-button__link:hover {
    background: var(--surface);
    color: var(--accent)
}

.cta-panel {
    margin-top: 56px;
    padding: 40px;
    background: var(--surface);
    border-left: 4px solid var(--accent)
}

.cta-panel h2 {
    margin-bottom: 16px
}

.brand-strip {
    padding-block: 24px;
    border-block: 1px solid var(--border)
}

.brand-strip p {
    margin: 0;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: .8rem
}

.site-page ul {
    padding-left: 20px;
    color: var(--muted)
}

.site-page li+li {
    margin-top: 8px
}

.menu .current-menu-item>a,
.menu .current_page_item>a {
    color: var(--accent)
}

.footer-grid {
    display: flex;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap
}

.footer-brand {
    font-weight: 800;
    color: var(--text)
}

.site-footer p {
    margin: 6px 0
}

.footer-links {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.footer-bottom {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border)
}

@media(max-width:781px) {
    .wp-block-columns {
        flex-direction: column
    }

    .wp-block-column {
        width: 100%
    }

    .service-grid {
        grid-template-columns: 1fr
    }

    .site-section {
        padding-block: 40px
    }

    .page-hero {
        padding-block: 48px
    }

    .cta-panel {
        padding: 28px
    }

    .header-inner {
        flex-wrap: wrap
    }
}

/* Classic Group blocks wrap their children; expose cards to the parent grid. */
.service-grid>.wp-block-group__inner-container {
    display: contents
}

.service-grid> :is(.service-card, .contact-card, .step-card),
.service-grid>.wp-block-group__inner-container> :is(.service-card, .contact-card, .step-card) {
    margin: 0;
    align-self: stretch
}

/* Contact and social row above the main navigation. */
.header-navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 14px;
    min-width: 0
}

.header-utility {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 18px;
    flex-wrap: wrap
}

.header-social {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    padding: 0;
    margin: 0
}

.header-social li {
    display: flex;
    align-items: center;
}

.header-social__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    color: var(--muted);
    border-radius: 3px
}

.header-social__icon svg {
    display: block
}

.header-social a:hover {
    color: var(--accent);
    background: var(--surface)
}

.header-phone {
    padding-left: 18px;
    border-left: 1px solid var(--border);
    font-size: .9rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    letter-spacing: .035em
}

@media(max-width:781px) {
    .header-navigation {
        flex: 1
    }

    .header-utility {
        gap: 10px
    }

    .header-phone {
        padding-left: 10px
    }
}

@media(max-width:640px) {
    .header-navigation {
        width: 100%;
        align-items: stretch
    }

    .header-utility {
        justify-content: flex-end
    }

    .header-navigation .menu {
        justify-content: flex-end
    }
}

.footer-contact {
    max-width: 100%
}

.footer-contact .header-phone {
    color: var(--text)
}

.footer-contact .header-phone:hover {
    color: var(--accent)
}

@media(max-width:640px) {
    .footer-contact .header-utility {
        justify-content: flex-start
    }
}
/* Phone icon beside the header number. */
.site-header .header-phone{display:inline-flex;align-items:center;gap:8px}
.site-header .header-phone__icon{display:block;flex:0 0 20px;color:var(--accent)}

/* Mobile navigation centered beneath the right-aligned contact row. */
@media(max-width:640px){.site-header .header-navigation>nav{width:100%}.site-header .header-navigation .menu{justify-content:center}.site-header .header-utility{justify-content:flex-end;align-self:flex-end;max-width:100%}}

/* Mobile guide: contact row, logo, then centered navigation. */
@media(max-width:640px){
    .site-header .header-inner{display:grid;grid-template-columns:minmax(0,1fr);width:calc(100% - 24px);gap:12px;padding-block:12px 26px}
    .site-header .header-navigation{display:contents}
    .site-header .header-utility{grid-row:1;justify-self:end;align-self:center;width:100%;flex-wrap:nowrap;gap:10px;min-width:0}
    .site-header .header-social{min-width:0;flex:0 1 auto}
    .site-header .header-social li{min-width:0}
    .site-header .header-social__icon{flex:0 0 30px;width:30px}
    .site-header .header-social li>a:not(.header-social__icon){min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
    .site-header .header-phone{flex:0 0 auto;padding-left:10px}
    .site-header .header-inner>.custom-logo-link,.site-header .header-inner>.site-brand{grid-row:2;justify-self:center;width:min(360px,100%)}
    .site-header .header-navigation>nav{grid-row:3;min-width:0;width:100%;margin-top:8px}
    .site-header .header-navigation .menu{justify-content:center}
}