/* ========================================
   MAIN.CSS - Projekt-specifični stili
   Razširi ultra.css z overrides in komponentami
   ======================================== */

/* ========================================
   DESIGN TOKENS - OVERRIDES
   Prepišite samo tiste tokene, ki se razlikujejo od ultra.css
   ======================================== */

:root {
    /* Barve - osnovne */
    --color-text: #070034;
    --color-text-muted: oklch(55% 0.03 273.42);
    --color-bg: oklch(98% 0.005 273.42);
    --color-bg-secondary: oklch(0.950 0.024 275.7);

    /* Barve - blagovna znamka (#5551FE) */
    --color-primary: oklch(0.5533 0.2472 275.68);
    --color-primary-hover: lch(70.5% 47.6 289.45);

    /* Barve - poudarki */
    --color-accent1: oklch(0.78 0.12 335);
    /* Pastelna mauve/rožnata */
    --color-accent1-hover: oklch(0.72 0.14 335);
    --color-accent2: oklch(0.75 0.12 210);
    /* Pastelna cyan */
    --color-accent2-hover: oklch(0.68 0.14 210);

    /* Barve - povratne informacije */
    --color-success: oklch(0.6265 0.153125 180);
    /* Zelena */
    --color-success-hover: oklch(55% 0.15 160);
    --color-danger: oklch(0.666 0.153125 20);
    /* Rdeča */
    --color-danger-hover: oklch(50% 0.18 25);
    --color-warning: oklch(0.6504 0.153125 90);
    /* Oranžno-rumena */
    --color-warning-hover: oklch(70% 0.13 85);
    --color-info: oklch(0.6475 0.153125 250);
    /* Svetlo modra */
    --color-info-hover: oklch(55% 0.13 230);

    --font-fallback: BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
        "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-sans;
}

/* ========================================
   OSNOVNO
   ======================================== */
@font-face {
    font-family: "General";
    font-style: normal;
    font-weight: 100 1000;
    src: url("../fonts/GeneralSans-Variable.woff2") format("woff2 supports variations"),
        url("../fonts/GeneralSans-Variable.woff2") format("woff2-variations");
    font-display: swap;
}

@font-face {
    font-family: "Neco";
    font-style: normal;
    font-weight: 100 1000;
    src: url("../fonts/Neco-Variable.woff2") format("woff2 supports variations"),
        url("../fonts/Neco-Variable.woff2") format("woff2-variations");
    font-display: swap;
}

html {
    color: var(--color-text);
    background-color: var(--color-bg);
    font-family: "General", var(--font-fallback);
}

h1,
h2,
h3,
h4 {
    font-family: "Neco", var(--font-fallback);
}

h1 {
    font-weight: 900;
}

.text-focus {
    color: var(--color-primary);
}

.text-accent1 {
    color: var(--color-accent1);
}

.bg-accent1 {
    background-color: var(--color-accent1);
}

.text-accent2 {
    color: var(--color-accent2);
}

.bg-accent2 {
    background-color: var(--color-accent2);
}

.bg-focus {
    background-color: var(--color-primary);
}

/* ========================================
   POSTAVITEV
   ======================================== */

header,
footer,
section {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 var(--space-4);
}

.wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.wrap-full {
    width: 100%;
    padding: 0;
}

section:has(.wrap-full) {
    padding: 0;
}

/* ========================================
   INTERAKTIVNI ELEMENTI
   ======================================== */

a {
    font-weight: 500;
}

a:hover {
    color: var(--color-primary);
}

/* Gumbi */
button,
.btn {
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    font-weight: 500;
}

button:has(i.icon),
.btn {
    display: flex;
    align-items: center;
    line-height: 1.5rem;
    gap: var(--space-1);
}

button i.icon,
.btn i.icon {
    font-size: var(--font-4);
}

a.btn:hover {
    color: var(--color-text);
}

.btn-primary {
    color: var(--color-bg);
    background-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
}

.btn-secondary {
    background-color: var(--color-bg-secondary);
}

.btn-secondary:hover {
    background-color: var(--color-text-muted);
}

.btn-accent1 {
    color: var(--color-text);
    background-color: var(--color-accent1);
}

.btn-accent1:hover {
    background-color: var(--color-accent1-hover);
}

.btn-accent2 {
    color: var(--color-text);
    background-color: var(--color-accent2);
}

.btn-accent2:hover {
    background-color: var(--color-accent2-hover);
}

/* ========================================
   OBRAZCI
   ======================================== */

input,
textarea,
select {
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    background-color: var(--color-bg-secondary);
}

/* ========================================
   MEDIJSKI ELEMENTI
   ======================================== */

img {
    border-radius: var(--radius-sm);
}

.img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   TABELE
   ======================================== */

table {
    width: 100%;
    max-width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-text-muted);
    text-align: left;
}

th {
    font-weight: 600;
}

tr:nth-child(even) {
    background-color: var(--color-bg-secondary);
}

tbody tr {
    transition: background-color var(--transition-fast);
}

tbody tr:hover {
    background-color: var(--color-primary);
}

/* ========================================
   IKONE
   ======================================== */

i.icon {
    font-size: inherit;
}

/* ========================================
   OZADJE
   ======================================== */

.main-back {
    background-color: var(--color-bg);
}

.sec-back {
    background-color: var(--color-bg-secondary);
}

/* ========================================
   PIŠKOTKI
   ======================================== */

#cookie {
    padding: var(--space-4);
    border: 1px solid var(--color-text);
    border-radius: var(--radius-xl);
    background: var(--color-bg-secondary);
    font-size: var(--font-2);
    gap: var(--space-4);
}

/* ========================================
   Elementi
   ======================================== */

.ticker .msg {
    color: var(--color-bg-secondary);
}

/* ========================================
   Glava in noga
   ======================================== */

header .wrap {
    min-height: 5rem;
}

#logo svg {
    height: 1.5rem;
}

nav .selected {
    color: var(--color-primary);
    font-weight: 600;
}

#logo-footer {
    max-width: 150px;
}

/* ========================================
   Hero
   ======================================== */

/* 100% višine zaslona - glava) */
#hero {
    display: grid;
    align-content: center;
    min-height: calc(100svh - 7rem);
    padding-top: var(--space-5);
    padding-bottom: var(--space-5);
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;

}

#hero img {
    width: auto;
    max-height: 25vh !important;
    aspect-ratio: 1 / 1 !important;
}

/* ========================================
   HORIZONTALNI SCROLL
   ======================================== */

/* Touch naprave - horizontalni scroll */
@media (hover: none) and (pointer: coarse) {
    .scroll-x {
        display: flex;
        overflow-x: auto;
        flex-direction: row !important;
        padding-right: var(--space-4);
        padding-left: var(--space-4);
        margin-right: calc(-1 * var(--space-4));
        margin-left: calc(-1 * var(--space-4));
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: var(--space-4);
        scroll-snap-type: x mandatory;
        scroll-padding: var(--space-4);
    }

    .scroll-x::-webkit-scrollbar {
        display: none;
    }

    .scroll-x>* {
        flex: 0 0 auto;
        width: min(320px, 85vw);
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }
}

/* Ne-touch naprave (desktop) - wrap z optimalno širino */
@media (hover: hover) and (pointer: fine) {
    .scroll-x {
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-4);
    }

    .scroll-x>* {
        flex: 1 1 clamp(280px, 30%, 400px);
        min-width: 280px;
    }
}

/* ========================================
   ODZIVNI RAZREDI
   ======================================== */

/* Tablice (768px+) */
@media (min-width: 768px) {}

/* Večje od tablic */
@media (max-width: 1024px) {
    .desktop-only {
        display: none !important;
    }
}

/* Namizni računalniki (1024px+) */
@media (min-width: 1024px) {
    .mobile-only {
        display: none !important;
    }

    .mobile-only {
        display: none !important;
    }

    #m-menu:popover-open {
        width: auto;
    }
}

/* Veliki namizni računalniki (1280px+) */
@media (min-width: 1280px) {}

/* Zelo veliki namizni računalniki (1568px+) */
@media (min-width: 1568px) {
    .scroll-x {
        flex-wrap: nowrap;
    }

    html {
        font-size: 16px;
    }
}

/* ========================================
   TEAM SLIKE
   ======================================== */

.team-img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 1 / 1;
}

/* ========================================
   PROSE MAX WIDTH
   ======================================== */

.prose {
    max-width: 700px;
}

/* ========================================
   PRICING KARTICE
   ======================================== */

.pricing-card {
    display: flex;
    flex-direction: column;
}

.pricing-features {
    flex-grow: 1;
}

/* Manjši odmiki na mobilnih napravah in tablicah */
@media (max-width: 1024px) {
    .pricing-card {
        padding: var(--space-4) !important;
        gap: var(--space-3) !important;
    }

    .pricing-features {
        gap: var(--space-1) !important;
    }
}