/* ================================================================
   OZAV UI/UX — Dark, elegant, accessible, PageSpeed-optimised
   Rules: font ≥16px everywhere · contrast ≥4.5:1 · touch ≥44px
   ================================================================ */

/* ── Variables ───────────────────────────────────────────────── */
:root {
    --bg:       #0e0f13;
    --bg-alt:   #14161d;
    --surface:  #1c1e28;
    --surface2: #242736;
    --border:   #2c2f40;
    --text:     #eceef4;   /* 16.8:1 on bg — AAA */
    --soft:     #c8ccd8;   /* 10.2:1 — AAA */
    --dim:      #8b91a6;   /*  5.1:1 — AA  */
    --accent:   #e63257;
    --accent2:  #ff5577;
    --link:     #6db8ff;   /*  8.3:1 — AAA */
    --focus:    #ffd000;
    --r:        10px;
    --r-sm:     6px;
    --sh:       0 4px 18px rgba(0,0,0,.45);
    --sh-sm:    0 2px 8px rgba(0,0,0,.30);
    --tr:       .18s ease;
}

/* ── Reset & base ────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box }
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-behavior: smooth;
}
body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Sarabun','Prompt','Noto Sans Thai',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ── Typography ─────────────────────────────────────────────── */
h1 { font-size: 30px; line-height: 1.2; font-weight: 800; color: #fff; margin: 0 0 14px; letter-spacing: -.02em }
h2 { font-size: 20px; line-height: 1.3; font-weight: 700; color: #fff; margin: 20px 0 10px }
h3 { font-size: 18px; line-height: 1.35; font-weight: 700; color: var(--text); margin: 16px 0 8px }
h4 { font-size: 16px; line-height: 1.4; font-weight: 600; margin: 12px 0 6px }
p, li, label, span, td, th { font-size: 16px }
/* Enforce 16px floor on meta / helper text */
small, .small, .meta, time,
.entry-meta, .entry-meta *,
.byline, .comment-meta { font-size: 16px !important }

@media (max-width: 600px) {
    h1 { font-size: 22px }
    h2 { font-size: 18px }
    h3 { font-size: 17px }
}

/* ── Selection ──────────────────────────────────────────────── */
::selection     { background: var(--accent); color: #fff }
::-moz-selection{ background: var(--accent); color: #fff }

/* ── Links ──────────────────────────────────────────────────── */
a { color: var(--link); text-decoration: none; transition: color var(--tr) }
a:hover { color: #9dd0ff }

/* ── Focus ring ─────────────────────────────────────────────── */
:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Skip link ──────────────────────────────────────────────── */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 10px 16px; background: #000; color: #fff; font-weight: 700; font-size: 16px }
.skip-link:focus { left: 8px; top: 8px }

/* ── Buttons ────────────────────────────────────────────────── */
.Button, button, .btn {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: var(--r);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background var(--tr), transform var(--tr), box-shadow var(--tr);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.Button:active, button:active { transform: translateY(1px) }

/* ── Forms ──────────────────────────────────────────────────── */
input[type=text], input[type=search], input[type=email],
input[type=url], input[type=number], input[type=password],
select, textarea {
    font-size: 16px;
    min-height: 44px;
    padding: 10px 14px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--r);
    width: 100%;
    max-width: 100%;
    transition: border-color var(--tr), box-shadow var(--tr);
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(230,50,87,.18);
    outline: none;
}
input::placeholder, textarea::placeholder { color: var(--dim) }

/* ── Layout shell ───────────────────────────────────────────── */
.Container { max-width: 1280px; margin: 0 auto; padding: 0 16px }
@media (min-width: 768px)  { .Container { padding: 0 24px } }
@media (min-width: 1440px) { .Container { padding: 0 32px } }

/* ── Header ─────────────────────────────────────────────────── */
.Header {
    background: var(--bg-alt);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}

/* ── Page header (archive / category titles) ─────────────────── */
.page-top { margin: 20px 0 24px; padding: 0 4px }
.page-top .page-header,
.Eroz-Thumbs .page-top .page-header {
    display: block !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    color: #fff !important;
    padding: 6px 0 8px 16px !important;
    margin: 0 0 8px !important;
    border-left: 4px solid var(--accent) !important;
    letter-spacing: -.02em;
}
.page-top .page-sub {
    font-size: 16px;
    line-height: 1.5;
    color: var(--soft);
    margin: 0 0 0 20px;
    max-width: 680px;
}
@media (max-width: 600px) {
    .page-top .page-header,
    .Eroz-Thumbs .page-top .page-header {
        font-size: 20px !important;
        padding-left: 12px !important;
        border-left-width: 3px !important;
    }
}

/* ── Card grid ──────────────────────────────────────────────── */
/* LCP image: browser reserves exact space before image loads — prevents CLS */
.loop-post .post-thumbnail {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--surface);
    border-radius: var(--r) var(--r) 0 0;
}
.loop-post .post-thumbnail img,
.loop-post .post-thumbnail .lazys {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.loop-post {
    background: var(--surface);
    border-radius: var(--r);
    overflow: hidden;
    transition: transform var(--tr), box-shadow var(--tr);
    display: flex;
    flex-direction: column;
}
.loop-post:hover { transform: translateY(-3px); box-shadow: var(--sh) }
.loop-post:hover .post-thumbnail img { transform: scale(1.04) }

.loop-post .entry-header { flex: 1; display: flex; flex-direction: column }
.loop-post .entry-header > a { flex: 1 }

/* Title */
.loop-post .entry-title {
    font-size: 15px;
    line-height: 1.45;
    font-weight: 600;
    color: var(--text);
    padding: 10px 12px 4px;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Vote % badge */
.loop-post .pst-rt { position: absolute; bottom: 8px; right: 8px; pointer-events: none }
.loop-post .EzVotes {
    background: rgba(14,15,19,.75);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}
.loop-post .EzVotes .numper { display: inline }

/* Meta row (duration) */
.loop-post .entry-meta {
    padding: 6px 12px 10px;
    margin: 0;
    display: flex;
    gap: 12px;
    align-items: center;
    color: var(--dim);
    font-size: 14px !important;
    border-top: 1px solid var(--border);
}
/* Override the ≥16px rule for compact card meta only */
.loop-post .entry-meta,
.loop-post .entry-meta * { font-size: 14px !important }
.loop-post .entry-meta .Time::before { content: '⏱ '; opacity: .7 }

/* ── Pagination ─────────────────────────────────────────────── */
.navigation.pagination, .numeration {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    margin: 28px 0;
}
.navigation.pagination a,
.navigation.pagination span,
.numeration a,
.numeration span {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    background: var(--surface);
    color: var(--text);
    border-radius: var(--r-sm);
    font-size: 16px;
    font-weight: 600;
    transition: background var(--tr), color var(--tr);
}
.navigation.pagination a:hover,
.numeration a:hover { background: var(--surface2); color: #fff }
.navigation.pagination .current,
.numeration .current { background: var(--accent); color: #fff }

/* ── Jump-to-page ───────────────────────────────────────────── */
.ozav-jp { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 0 12px; flex-wrap: wrap; vertical-align: middle }
.ozav-jp label { color: var(--soft); font-size: 16px; font-weight: 600; white-space: nowrap }
.ozav-jp input[type=number] {
    width: 72px; min-height: 44px; padding: 8px 10px; text-align: center;
    background: var(--surface); color: #fff; border: 1px solid var(--border);
    border-radius: var(--r-sm); font-size: 16px; font-weight: 700;
    appearance: textfield; -moz-appearance: textfield;
}
.ozav-jp input[type=number]::-webkit-inner-spin-button,
.ozav-jp input[type=number]::-webkit-outer-spin-button { display: none; -webkit-appearance: none }
.ozav-jp-sep { color: var(--dim); font-size: 16px; font-weight: 600; white-space: nowrap }
.ozav-jp-btn {
    background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm);
    min-height: 44px; min-width: 56px; padding: 10px 22px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    transition: background var(--tr), transform .05s;
    display: inline-flex; align-items: center; justify-content: center;
}
.ozav-jp-btn:hover { background: var(--accent2) }
.ozav-jp-btn:active { transform: translateY(1px) }
@media (max-width: 600px) { .ozav-jp { margin: 10px 0 0; width: 100%; justify-content: center } }

/* ── Movie-code chip ────────────────────────────────────────── */
.movie-code {
    display: inline-block;
    background: var(--surface2);
    padding: 5px 12px;
    margin: 3px;
    border-radius: var(--r-sm);
    font-family: ui-monospace,'JetBrains Mono','Courier New',monospace;
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.movie-code:hover { background: var(--surface2); border-color: var(--accent); color: #fff }

/* ── Single post meta headings ──────────────────────────────── */
.title.fa-file-text, .title.fa-code {
    color: var(--soft); font-weight: 700; margin: 18px 0 6px; font-size: 16px;
}
h3.title {
    font-size: 17px; font-weight: 700; color: var(--text); margin: 18px 0 6px; line-height: 1.4;
}
h2.section-heading {
    font-size: 20px; font-weight: 700; color: #fff; margin: 24px 0 12px; line-height: 1.3;
    padding-left: 12px; border-left: 3px solid var(--accent);
}

/* ── Related posts section ──────────────────────────────────── */
.related-posts-section {
    margin: 36px 0 0;
    padding-top: 24px;
    border-top: 1px solid var(--border);
}
.related-posts-section .section-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.related-posts-section .section-title::before {
    content: '';
    display: inline-block;
    width: 4px;
    height: 18px;
    background: var(--accent);
    border-radius: 2px;
    flex-shrink: 0;
}

/* ── 404 suggest pills ──────────────────────────────────────── */
.error-404-suggest {
    list-style: none; padding: 0; margin: 14px 0;
    display: flex; flex-wrap: wrap; gap: 8px;
}
.error-404-suggest li a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 8px 18px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 22px; color: var(--text);
    font-size: 16px;
    transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.error-404-suggest li a:hover { background: var(--surface2); border-color: var(--accent); color: #fff }

/* ── Focus visible images ───────────────────────────────────── */
img:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px }

/* ── Page header accent (wp_head fallback) ──────────────────── */
.page-header { color: #fff !important }

/* ── Single post vote bar ───────────────────────────────────── */
.vote-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--soft);
}
.vote-bar .like-pct { color: var(--accent); font-size: 18px; font-weight: 800 }

/* ── Reduce motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Scrollbar (Webkit) ─────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px }
::-webkit-scrollbar-track { background: var(--bg-alt) }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px }
::-webkit-scrollbar-thumb:hover { background: var(--dim) }

/* Single video player: mobile full-bleed, desktop readable and centered. */
body.single-post #Eroz.Video,
body.single-format-video #Eroz.Video,
#Eroz.Video {
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    margin-bottom: 28px !important;
}
body.single-post #Eroz.Video > .Container,
body.single-format-video #Eroz.Video > .Container,
#Eroz.Video > .Container {
    width: 100% !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
}
#Eroz.Video .Row.Nsp,
#Eroz.Video .Row.Nsp > aside:first-child,
#Eroz.Video #aa-videos-op,
#Eroz.Video #video-op-a {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
#Eroz.Video .Row.Nsp > aside:first-child { flex: 0 0 100% !important }
#Eroz.Video .Row.Nsp > aside + aside { display: none !important }
#Eroz.Video .Player {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    aspect-ratio: 16 / 9 !important;
    min-height: 0 !important;
    height: auto !important;
    background: #000 !important;
    white-space: normal !important;
    border-radius: 8px !important;
}
#Eroz.Video .Player::before {
    display: none !important;
    content: none !important;
}
#Eroz.Video .Player > iframe,
#Eroz.Video .Player video,
#Eroz.Video .Player embed,
#Eroz.Video .Player object,
#Eroz.Video .Player .ctpl-loading,
#Eroz.Video .Player .ctpl-video,
#Eroz.Video .Player > div:not(.Dvr) {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    border: 0 !important;
}
#Eroz.Video .videos-tbs {
    margin: 0 !important;
    padding: 8px 10px !important;
    overflow-x: auto !important;
    background: #111 !important;
}
@media (max-width: 767px) {
    body.single-post #Eroz.Video,
    body.single-format-video #Eroz.Video,
    #Eroz.Video {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
    }
    body.single-post #Eroz.Video > .Container,
    body.single-format-video #Eroz.Video > .Container,
    #Eroz.Video > .Container {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #Eroz.Video .Player {
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 !important;
    }
    #Eroz.Video .videos-tbs {
        width: 100vw !important;
        max-width: 100vw !important;
    }
}
@media (orientation: landscape) and (max-height: 520px) {
    #Eroz.Video .Player {
        height: calc(100vh - 48px) !important;
        aspect-ratio: auto !important;
    }
}
@media (min-width: 1024px) {
    #Eroz.Video > .Container { padding: 0 24px !important }
    #Eroz.Video .Player { max-height: min(82vh, 720px) !important }
}

/* Desktop grids: keep all archive/home/related card lists at exactly 4 per row. */
@media (min-width: 1024px) {
    body.home .Eroz-Thumbs.List .post,
    body.blog .Eroz-Thumbs.List .post,
    body.archive .Eroz-Thumbs.List .post,
    body.category .Eroz-Thumbs.List .post,
    body.tag .Eroz-Thumbs.List .post,
    body.tax-toro_pornstar .Eroz-Thumbs.List .post,
    body.tax-toro_studio .Eroz-Thumbs.List .post,
    body.search .Eroz-Thumbs.List .post,
    body.single-post .Eroz-Thumbs.List .post,
    .SdbN .Eroz-Thumbs.List .post,
    .related-posts-section .Eroz-Thumbs.List .post,
    .Eroz-Thumbs.List .post {
        width: 25% !important;
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
    .SdbN .Eroz-Thumbs.List .DvrCn,
    .Eroz-Thumbs.List .DvrCn {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
}

/* Accessibility and tap targets. */
.Header .MenuBtn,
.Header .MenuBtn .Button,
.Header .Form-Search button {
    min-width: 44px !important;
    min-height: 44px !important;
}
.Header .Form-Search input[type="search"],
.Header .Form-Search input[type="text"] {
    background: #090d12 !important;
    border-color: #2b6f85 !important;
    color: #fff !important;
    min-height: 44px !important;
}
.Header .Form-Search input::placeholder {
    color: #d9edf7 !important;
    opacity: 1 !important;
}
.Header .Form-Search button,
.Header .Form-Search button::before,
.Header .Form-Search button i {
    color: #fff !important;
}
.Header .Bot .menu a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding-top: 10px;
    padding-bottom: 10px;
}
@media (max-width: 991px) {
    .Header .Bot .menu li,
    .Header .Bot .menu a { width: 100% }
    .Header .Bot .menu li { margin: 0 0 8px !important }
    .Header .Bot .menu a {
        background: #090d12;
        color: #f4fbff !important;
        padding: 12px 16px;
    }
}
.ozav-jp-btn {
    background: #9d0030 !important;
    color: #fff !important;
}
.ozav-jp-btn:hover {
    background: #bf003b !important;
    color: #fff !important;
}

/* Single detail read-more: keep long AV details collapsed until the user opens it. */
.ozav-pornstar-visible {
    margin: 12px 0 16px;
}
.ozav-pornstar-visible .title {
    margin-top: 0;
    font-size: 18px !important;
}
.ozav-pornstar-visible .EzLinks,
.ozav-pornstar-visible .EzLinks a {
    font-size: 18px !important;
}
.ozav-readmore {
    margin-top: 14px;
}
.ozav-readmore-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 22px;
    border-radius: 999px;
    background: #0f6f88;
    color: #fff;
    font-weight: 800;
    cursor: pointer;
    list-style: none;
    user-select: none;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
}
.ozav-readmore-toggle::-webkit-details-marker {
    display: none;
}
.ozav-readmore-toggle::after {
    content: '+';
    margin-left: 10px;
    font-size: 20px;
    line-height: 1;
}
.ozav-readmore[open] .ozav-readmore-toggle {
    background: #243142;
    margin-bottom: 14px;
}
.ozav-readmore[open] .ozav-readmore-toggle::after {
    content: '-';
}
.ozav-readmore-body {
    padding-top: 6px;
}