/* ==========================================================================
   Cucanak.am - Phase 3 design proposal.
   Warm paper background + near-black ink + one vivid "print ink" orange
   accent. Headings in Manrope (loaded in layout.php), body text in the
   system font stack (fast, no extra request). No Bootstrap, no jQuery.
   ========================================================================== */

:root {
    --color-ink: #17171b;
    --color-ink-soft: #6b6b72;
    --color-bg: #faf8f4;
    --color-surface: #ffffff;
    --color-border: #eae5dc;
    --color-primary: #ff5a2b;
    --color-primary-dark: #e14a1f;
    --color-header-bg: #15141a;
    --color-header-text: #f3f1ec;
    --font-heading: 'Manrope', system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --radius: 12px;
    --radius-sm: 8px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: var(--color-bg);
    line-height: 1.55;
}

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 12px;
}

.container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* The header/top-bar carry more items (nav links, phone, social, lang
   switcher) than a body section ever does, so they get a wider cap
   instead of fighting the same 1140px every content section uses. */
.container--wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

a { color: inherit; }

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.btn:hover {
    background: var(--color-primary-dark);
    transform: translateY(-1px);
}

/* --- Sticky wrapper: keeps the top-bar (phone/social) and the main
   header pinned together at the top of the viewport while scrolling,
   so the phone number and social icons stay visible on every page. --- */
.site-sticky-top {
    position: sticky;
    top: 0;
    z-index: 30;
}

/* --- Top bar: phone + social, above the main nav. --- */

.top-bar {
    background: var(--color-primary);
    color: #fff;
    font-size: 0.82rem;
}

.top-bar__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    padding: 7px 20px;
}

.top-bar__phone {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
}

.top-bar__phone:hover { text-decoration: underline; }

.top-bar__social {
    display: flex;
    align-items: center;
    gap: 14px;
}

.top-bar__social a {
    display: inline-flex;
    color: #fff;
    opacity: 0.85;
    transition: opacity 0.15s ease;
}

.top-bar__social a:hover { opacity: 1; }

.top-bar__lang {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-left: 10px;
    margin-left: 4px;
    border-left: 1px solid rgba(255, 255, 255, 0.35);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.02em;
}

.top-bar__lang a {
    color: #fff;
    text-decoration: none;
    opacity: 0.7;
}

.top-bar__lang a:hover { opacity: 1; }

.top-bar__lang .is-current {
    color: #fff;
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* --- Header --- */

.site-header {
    background: var(--color-header-bg);
    color: var(--color-header-text);
}

.site-header__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 20px;
}

.site-header__logo {
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.4rem;
    color: var(--color-header-text);
    text-decoration: none;
    white-space: nowrap;
    order: 0;
}

.site-header__logo span { color: var(--color-primary); }

.nav-toggle { display: none; }

/* Search icon and the hamburger both get an explicit `order` lower than
   .site-nav's, so they always render on the logo's row. DOM position of
   the checkbox/label is separate and only there for the
   ":checked ~ .site-nav" CSS toggle. */
.site-header__icon-btn,
.nav-toggle-btn {
    order: 1;
    display: flex;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-header-text);
    text-decoration: none;
    cursor: pointer;
    font-size: 1.1rem;
}

.site-header__icon-btn:hover,
.nav-toggle-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

/* Dropdown nav by default - with this many categories, forcing an
   inline row either wraps into a ragged second line or needs a
   horizontal scrollbar at in-between widths, and neither reads as
   intentional. Re-enabled as a normal inline row below, once the
   screen is measurably wide enough (1240px+) to fit every item on one
   line with no scroll and no wrap. */
.site-nav {
    order: 2;
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    max-height: 0;
    overflow: hidden;
    gap: 2px;
    transition: max-height 0.25s ease;
}

.site-nav a {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border-radius: var(--radius-sm);
    color: var(--color-header-text);
    text-decoration: none;
    font-size: 0.92rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.site-nav a:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--color-primary);
}

.nav-toggle:checked ~ .site-nav {
    max-height: 500px;
    padding-bottom: 10px;
}

/* Measured against the real rendered header (logo + search icon + nav,
   inside .container--wide, 8 nav items after "About" moved out of the
   nav): the row needs 1292px however wide the viewport is. 1310px is
   the lowest breakpoint that comfortably clears that with the
   container's own padding/scrollbar allowance. */
@media (min-width: 1310px) {
    .nav-toggle-btn { display: none; }

    .site-header__bar { flex-wrap: nowrap; }

    .site-nav {
        flex-basis: auto;
        flex-direction: row;
        flex: 1 1 auto;
        min-width: 0;
        max-height: none;
        /* Safety net, not the plan: at this width everything should fit
           with room to spare (see the comment above this media query),
           but scrolling is a far better failure mode than the row
           silently overflowing the page if that math is ever wrong. */
        overflow-x: auto;
        scrollbar-width: thin;
        gap: 6px;
    }

    .site-nav a {
        width: auto;
        padding: 8px 11px;
        border-radius: 999px;
        font-size: 0.86rem;
        white-space: nowrap;
    }
}

/* --- Hero carousel (vanilla JS, see assets/js/carousel.js) --- */

.hero-carousel {
    position: relative;
    overflow: hidden;
}

.hero-carousel__track {
    position: relative;
    height: 460px;
    max-height: 62vw;
    /* On narrow phones 62vw shrinks below what the overlay copy needs,
       pushing the heading up above the image. Floor it so the text
       always has room, whatever the aspect ratio does to the photo. */
    min-height: 360px;
    background: #111;
}

.hero-carousel__slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.hero-carousel__slide.is-active { opacity: 1; }

.hero-carousel__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(10, 8, 6, 0.78) 0%, rgba(10, 8, 6, 0.15) 55%, rgba(10, 8, 6, 0.35) 100%);
    pointer-events: none;
}

.hero-carousel__copy {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 56px;
    padding: 0 24px;
    color: #fff;
    text-align: center;
}

.hero-carousel__copy h1 {
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    margin-bottom: 10px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hero-carousel__copy p {
    margin: 0 0 20px;
    font-size: 1.05rem;
    color: #f0ede7;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

@media (max-width: 480px) {
    .hero-carousel__copy {
        bottom: 40px;
    }

    .hero-carousel__copy h1 {
        margin-bottom: 6px;
    }

    .hero-carousel__copy p {
        font-size: 0.9rem;
        margin-bottom: 14px;
    }

    .hero-carousel__copy .btn {
        padding: 10px 18px;
        font-size: 0.88rem;
    }
}

.hero-carousel__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(2px);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.hero-carousel__nav:hover { background: rgba(255, 255, 255, 0.28); }
.hero-carousel__nav--prev { left: 18px; }
.hero-carousel__nav--next { right: 18px; }

.hero-carousel__dots {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
}

.hero-carousel__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.hero-carousel__dot.is-active { background: var(--color-primary); }

/* --- Section headings --- */

.section {
    margin: 56px 0;
}

.section__eyebrow {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: 6px;
}

.section__title {
    font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}

/* --- Category pills (used on category.php header) --- */

.category-pill {
    display: inline-block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
    background: rgba(255, 90, 43, 0.1);
    padding: 6px 14px;
    border-radius: 999px;
    margin-bottom: 10px;
}

/* --- Lazy-loaded images: shimmer placeholder while loading, then fade in
   (see the onload handler in the templates). --- */
.product-card__image {
    opacity: 0;
    background-color: #eee;
    background-image: linear-gradient(90deg, #eee 25%, #f2f2f2 37%, #eee 63%);
    background-size: 400% 100%;
    animation: img-placeholder-pulse 1.4s ease infinite;
    transition: opacity 0.35s ease, transform 0.3s ease;
}

.product-card__image.is-loaded {
    opacity: 1;
    background-image: none;
    animation: none;
}

@keyframes img-placeholder-pulse {
    0% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .product-card__image {
        animation: none;
        transition: none;
        opacity: 1;
    }
}

/* --- Product grid --- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 18px;
}

.product-card {
    display: block;
    overflow: hidden;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 12px;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.product-card:hover {
    border-color: transparent;
    box-shadow: 0 10px 28px rgba(23, 23, 27, 0.1);
    transform: translateY(-3px);
}

.product-card:hover .product-card__image.is-loaded {
    transform: scale(1.05);
}

.product-card__image {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.product-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 4 / 3;
    background: #f2efe9;
    color: #aaa;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
}

/* --- Product detail page --- */

.product-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
    margin: 32px 0;
}

@media (min-width: 700px) {
    .product-detail {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: start;
    }
}

.product-detail__image img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.product-detail__info h1 {
    font-size: clamp(1.4rem, 3vw, 2rem);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.gallery-grid img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* --- Lightbox (assets/js/lightbox.js) - click a product image to browse
   every image in that grid without leaving the page. --- */

body.lightbox-open { overflow: hidden; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 8, 6, 0.92);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.lightbox.is-open {
    opacity: 1;
    pointer-events: auto;
}

.lightbox__figure {
    margin: 0;
    max-width: 90vw;
    max-height: 88vh;
    text-align: center;
}

.lightbox__image {
    display: block;
    max-width: 90vw;
    max-height: 76vh;
    border-radius: var(--radius-sm);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    margin: 0 auto;
}

.lightbox__figure figcaption {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 14px;
    color: #f0ede7;
}

.lightbox__link {
    color: var(--color-primary);
    text-decoration: none;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.9rem;
}

.lightbox__link:hover { text-decoration: underline; }

.lightbox__close {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox__close:hover { background: rgba(255, 255, 255, 0.25); }

.lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
}

.lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }

@media (max-width: 600px) {
    .lightbox__nav { width: 38px; height: 38px; font-size: 1.4rem; }
    .lightbox__close { width: 38px; height: 38px; font-size: 1.3rem; }
}

/* --- Services page --- */

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 24px 0;
}

.service-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.service-card:hover {
    box-shadow: 0 10px 28px rgba(23, 23, 27, 0.08);
    transform: translateY(-2px);
}

.service-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 90, 43, 0.1);
    color: var(--color-primary);
    margin-bottom: 14px;
}

.service-card h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    margin: 0;
}

.service-cta {
    margin: 32px 0 8px;
    color: var(--color-ink-soft);
}

.service-cta a {
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
}

.service-cta a:hover { text-decoration: underline; }

/* --- Contact page --- */

.map-embed {
    line-height: 0;
    background: #e8e4de;
}

.map-embed iframe {
    display: block;
    width: 100%;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.contact-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 22px;
}

.contact-card h3 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    margin: 0 0 10px;
}

.contact-card p { margin: 0; color: var(--color-ink-soft); }
.contact-card strong { color: var(--color-ink); }

.contact-card__line {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-ink);
    text-decoration: none;
}

.contact-card__line:hover { color: var(--color-primary); }
.contact-card__line img { border-radius: 4px; }

/* --- About page --- */

.about-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
}

@media (min-width: 760px) {
    .about-layout {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        align-items: center;
    }
}

.about-layout__image img {
    display: block;
    width: 100%;
    border-radius: var(--radius);
}

.about-layout__info p {
    color: var(--color-ink-soft);
}

.about-layout__info .btn {
    margin-top: 8px;
}

/* --- Search page --- */

.search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 20px 0 8px;
}

.search-form__input,
.search-form__select {
    height: 46px;
    padding: 0 14px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-body);
    font-size: 0.95rem;
}

.search-form__input {
    flex: 1 1 220px;
}

.search-form__select {
    flex: 0 1 220px;
}

.search-form__input:focus,
.search-form__select:focus {
    outline: none;
    border-color: var(--color-primary);
}

.search-form .btn {
    height: 46px;
    padding: 0 24px;
}

.search-hint {
    color: var(--color-ink-soft);
    margin: 16px 0;
}

/* --- Footer --- */

.site-footer {
    background: var(--color-header-bg);
    color: #cfccc4;
    margin-top: 64px;
}

.site-footer a { color: inherit; }

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 32px;
    padding: 48px 20px 40px;
}

.footer-col h4 {
    font-family: var(--font-heading);
    font-weight: 800;
    color: #fff;
    font-size: 1rem;
    margin: 0 0 14px;
}

.footer-col p {
    margin: 0 0 16px;
    font-size: 0.88rem;
    line-height: 1.6;
    color: #cfccc4;
}

.footer-list {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: 0.88rem;
}

.footer-list li {
    padding: 5px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-list li:first-child { padding-top: 0; }

.btn--sm {
    padding: 8px 16px;
    font-size: 0.82rem;
}

.footer-photostream {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.footer-photostream img,
.footer-photostream__placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
}

.footer-photostream a {
    display: block;
    border-radius: 6px;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.footer-photostream a:hover { opacity: 0.8; }

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 18px 0;
}

.footer-bottom p {
    margin: 0;
    font-size: 0.85rem;
    color: #9c988f;
}