/*
Theme Name: OneStopProp
Description: Minimal WordPress and WooCommerce theme for One Stop Prop.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: onestopprop
*/

@font-face {
    font-family: "Inter Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 100 900;
    src: url("assets/fonts/inter-latin-variable.woff2") format("woff2-variations");
}

@font-face {
    font-family: "Mona Sans Variable";
    font-style: normal;
    font-display: swap;
    font-weight: 200 900;
    font-stretch: 75% 125%;
    src: url("assets/fonts/mona-sans-latin-variable.woff2") format("woff2-variations");
}

:root {
    /* Canonical OneStopProp design tokens shared by the theme and checkout. */
    --osp-page: #080d14;
    --osp-section-alternate: #0b111a;
    --osp-surface: #101822;
    --osp-surface-raised: #151f2b;
    --osp-surface-floating: #202e3d;
    --osp-surface-glass: rgb(21 31 43 / 92%);
    --osp-brand-glass: rgb(8 13 20 / 86%);
    --osp-glass-tint: rgb(255 255 255 / 3%);
    --osp-glass-border: rgb(255 255 255 / 14%);
    --osp-glass-divider: rgb(255 255 255 / 9%);
    --osp-footer: #060a0f;

    --osp-foreground: #f4f7fb;
    --osp-text-primary: var(--osp-foreground);
    --osp-text-secondary: #b7c2ce;
    --osp-text-muted: #8695a5;

    --osp-action: #0052ff;
    --osp-action-hover: #0048df;
    --osp-action-pressed: #003fc4;
    --osp-decorative-blue: #74adff;
    --osp-blue-subtle: #0e213a;
    --osp-accent: #07e558;
    --osp-success-surface: #0c2a22;
    --osp-fire: #c2410c;
    --osp-danger: #ff727f;
    --osp-danger-surface: #30141b;
    --osp-on-action: #fff;
    --osp-on-accent: #080d14;
    --osp-on-fire: #fff;

    --osp-divider: #202b37;
    --osp-border: #2b3949;
    --osp-border-strong: #3a4b5e;
    --osp-border-hover: rgb(255 255 255 / 22%);
    --osp-outline-control: #53687e;
    --osp-focus-ring: var(--osp-decorative-blue);

    --osp-accent-eyebrow-text: #cadbff;
    --osp-accent-eyebrow-divider: rgb(40 182 255 / 72%);

    --osp-state-hover: #1b2735;
    --osp-state-selected: #122c4d;
    --osp-state-pressed: #0e213a;
    --osp-scrim: rgb(0 0 0 / 72%);
    --osp-blue-glow: rgb(20 110 245 / 16%);

    --osp-radius-micro: 4px;
    --osp-radius-control: 8px;
    --osp-radius-card: 12px;
    --osp-radius-panel: 16px;
    --osp-radius-full: 9999px;

    --osp-shadow-raised: 0 24px 64px rgb(0 0 0 / 38%);
    --osp-shadow-dialog: 0 32px 96px rgb(0 0 0 / 72%);
    --osp-shadow-inset-highlight: inset 0 1px 0 rgb(116 173 255 / 10%);

    --osp-font-heading: "Mona Sans Variable", ui-sans-serif, sans-serif;
    --osp-font-sans: "Inter Variable", Inter, ui-sans-serif, sans-serif;
    --osp-heading-stretch: 112.5%;
    --osp-content-width: 1440px;
    --osp-page-width: 960px;
    --osp-reading-width: 760px;

    /* Compatibility aliases for existing minimal-theme components. */
    --osp-background: var(--osp-page);
    --osp-background-alternate: var(--osp-section-alternate);
    --osp-surface-soft: var(--osp-surface-raised);
    --osp-border-soft: var(--osp-glass-border);
    --osp-text: var(--osp-text-primary);
    --osp-text-subtle: var(--osp-text-muted);
    --osp-focus: var(--osp-focus-ring);
    --osp-success: var(--osp-accent);
    --osp-radius: var(--osp-radius-card);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    color-scheme: dark;
    background: var(--osp-background);
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    min-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
    background: var(--osp-background);
    color: var(--osp-text);
    font-family: var(--osp-font-sans);
    font-size: 16px;
    line-height: 1.65;
    text-rendering: optimizeLegibility;
}

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

a {
    color: var(--osp-action);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.16em;
}

a:hover,
a:focus-visible {
    color: var(--osp-text);
}

:focus-visible {
    outline: 2px solid var(--osp-focus);
    outline-offset: 3px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    color: var(--osp-text);
    font-family: var(--osp-font-heading);
    font-stretch: var(--osp-heading-stretch);
    font-weight: 600;
    line-height: 1.2;
}

.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;
}

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

.site-header {
    border-bottom: 0;
    background: var(--osp-surface);
}

.site-header__inner {
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.site-branding {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.site-branding__logo {
    display: block;
    width: 164px;
    height: auto;
}

.site-header__action {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border-radius: 9999px;
    background: var(--osp-action);
    color: #ffffff;
    font-size: 14px;
    font-weight: 650;
    line-height: 1;
    text-decoration: none;
    transition: background-color 160ms ease;
}

.site-header__action:hover {
    background: var(--osp-action-hover);
    color: #ffffff;
}

.site-header__action:active {
    background: var(--osp-action-pressed);
}

.site-main {
    width: 100%;
    flex: 1 0 auto;
    padding-block: clamp(48px, 7vw, 88px);
}

.site-main--transaction {
    padding-block: 0;
}

.site-main--transaction > .osp-container,
.site-main--transaction .entry {
    width: 100%;
    max-width: none;
}

.site-main--page:not(.site-main--transaction) > .osp-page-container {
    width: 100%;
    max-width: calc(var(--osp-page-width) + 48px);
    padding-inline: 24px;
}

.site-main--page:not(.site-main--transaction) .entry {
    width: 100%;
    max-width: none;
}

.site-main--page:not(.site-main--transaction) .alignwide,
.site-main--page:not(.site-main--transaction) .alignfull {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    transform: none;
}

.site-footer {
    flex-shrink: 0;
    border-top: 0;
    background: var(--osp-surface);
    color: var(--osp-text-secondary);
    font-size: 14px;
}

.site-footer__inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.site-footer p {
    margin: 0;
}

.entry,
.error-404 {
    width: min(100%, var(--osp-reading-width));
    margin-inline: auto;
}

.entry-title,
.page-title {
    margin-bottom: 28px;
    font-size: clamp(32px, 5vw, 52px);
}

.entry-content {
    color: var(--osp-text-secondary);
    line-height: 1.78;
}

.entry-content > *:first-child {
    margin-top: 0;
}

.entry-content > *:last-child {
    margin-bottom: 0;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 1.8em;
}

.entry-content blockquote {
    margin-inline: 0;
    padding-left: 20px;
    border-left: 3px solid var(--osp-action);
    color: var(--osp-text);
}

.entry-content pre,
.entry-content code {
    font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.entry-content pre {
    overflow-x: auto;
    padding: 18px;
    border: 1px solid var(--osp-border);
    border-radius: var(--osp-radius);
    background: var(--osp-surface);
}

.alignwide {
    width: min(100vw - 40px, 980px);
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.alignfull {
    width: 100vw;
    max-width: none;
    margin-left: 50%;
    transform: translateX(-50%);
}

.osp-blog-header {
    margin-bottom: 38px;
}

.osp-blog-header .page-title {
    margin-bottom: 8px;
}

.osp-blog-header p {
    margin: 0;
    color: var(--osp-text-secondary);
}

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

.osp-post-card {
    overflow: hidden;
    border: 1px solid var(--osp-border-soft);
    border-radius: var(--osp-radius);
    background: var(--osp-surface);
}

.osp-post-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--osp-surface-soft);
}

.osp-post-card__media img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.osp-post-card__placeholder {
    width: 100%;
    height: 100%;
    display: block;
    background: linear-gradient(135deg, var(--osp-surface-soft), var(--osp-background));
}

.osp-post-card__body {
    padding: 22px;
}

.osp-post-category {
    margin-bottom: 10px;
    color: var(--osp-focus);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.osp-post-card__title {
    margin: 0;
    font-size: 21px;
}

.osp-post-card__title a {
    color: var(--osp-text);
    text-decoration: none;
}

.osp-post-card__title a:hover,
.osp-post-card__title a:focus-visible {
    color: var(--osp-focus);
}

.navigation.pagination {
    margin-top: 42px;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.page-numbers {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-inline: 12px;
    border: 1px solid var(--osp-border);
    border-radius: 8px;
    color: var(--osp-text);
    text-decoration: none;
}

.page-numbers.current,
.page-numbers:hover {
    border-color: var(--osp-action);
    background: rgba(0, 82, 255, 0.16);
}

.osp-single-header {
    margin-bottom: 34px;
}

.osp-single-header .entry-title {
    margin-bottom: 12px;
}

.osp-post-date {
    margin: 0;
    color: var(--osp-text-secondary);
    font-size: 14px;
}

.osp-featured-image {
    margin: 0 0 38px;
    overflow: hidden;
    border-radius: var(--osp-radius);
}

.osp-featured-image img {
    width: 100%;
    display: block;
}

.post-page-numbers {
    display: inline-flex;
    margin-right: 6px;
}

.error-404 {
    text-align: center;
}

.error-404__code {
    margin: 0 0 12px;
    color: var(--osp-focus);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
}

.error-404 p {
    color: var(--osp-text-secondary);
}

.osp-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    padding: 10px 20px;
    border-radius: 8px;
    background: var(--osp-action);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.osp-button:hover,
.osp-button:focus-visible {
    background: var(--osp-action-hover);
    color: #ffffff;
}

@media (max-width: 840px) {
    .osp-post-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .osp-container {
        width: min(calc(100% - 28px), var(--osp-content-width));
    }

    .site-header__inner,
    .site-footer__inner {
        min-height: 64px;
    }

    .site-branding__logo {
        width: 131px;
    }

    .site-header__action {
        min-height: 36px;
        padding-inline: 14px;
        font-size: 12px;
    }

    .site-main:not(.site-main--transaction) {
        padding-block: 42px;
    }

    .site-main--page:not(.site-main--transaction) > .osp-page-container {
        padding-inline: 16px;
    }

    .osp-post-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .osp-post-card__body {
        padding: 18px;
    }

    .alignwide,
    .alignfull {
        width: 100vw;
    }
}