/* =========================================================================
   Devam Sweets — devamsweets.com
   Built during the recovery pass, September 2025 → August 2026.

   The previous site was WordPress + WooCommerce + Elementor on the "Bakevo"
   theme. WordPress is gone (wp-admin, wp-json and wp-content all answer 404)
   and every one of its 48 stylesheets, 70 scripts and all imagery went with
   it, so there was no design left to recover. This is new, and deliberately
   self-contained: no CDN, no webfont host beyond Google Fonts, no external
   image. The last site died because its assets lived somewhere else.

   Contents
     1  Tokens
     2  Reset and base
     3  Typography
     4  Header and navigation
     5  Buttons
     6  Hero
     7  Sections and headings
     8  Product tiles and the menu grid
     9  Category chips and filtering
     10 Panels, notes, contact blocks
     11 Gallery
     12 Footer
     13 Accessibility and motion
   ========================================================================= */

/* ---- 1  Tokens -------------------------------------------------------- */
:root {
    /* A mithai-box palette: maroon card, saffron, pistachio, gold leaf. */
    --ink:        #241a12;
    --ink-soft:   #5a4a3d;   /* 7.02:1 on --cream */
    --maroon:     #7a2233;   /* 9.24:1 on --cream */
    --maroon-dk:  #5c1926;
    --saffron:    #e8871e;
    --saffron-dk: #9d4f00;   /* 4.78:1 at worst across every tint it lands on */
    --pistachio:  #4c6d31;   /* 4.79:1 at worst */
    --gold-text:  #d5ae33;   /* 4.72:1 on --maroon; the eyebrow on dark panels */
    --gold:       #c9a227;
    --cream:      #fdf7ee;
    --cream-dk:   #f6ecdd;
    --line:       #e6d8c4;
    --white:      #ffffff;

    --shadow-sm: 0 1px 2px rgba(36, 26, 18, .06), 0 2px 8px rgba(36, 26, 18, .05);
    --shadow-md: 0 4px 12px rgba(36, 26, 18, .08), 0 12px 28px rgba(36, 26, 18, .07);
    --radius: 14px;
    --wrap: 1180px;
    /* Seamless jali lattice, drawn inline so it costs no request.
       currentColor is not available inside a background-image, so the
       stroke is black and opacity does the tinting at each use site. */
    --jali: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23000%22%20stroke-width%3D%222.2%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%2256%22%20height%3D%2256%22%2F%3E%3Crect%20x%3D%2222%22%20y%3D%2222%22%20width%3D%2256%22%20height%3D%2256%22%20transform%3D%22rotate%2845%2050%2050%29%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2212%22%2F%3E%3Cpath%20d%3D%22M0%2050%20L14%2050%20M86%2050%20L100%2050%20M50%200%20L50%2014%20M50%2086%20L50%20100%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%220%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%220%22%20cy%3D%22100%22%20r%3D%2214%22%2F%3E%3Ccircle%20cx%3D%22100%22%20cy%3D%22100%22%20r%3D%2214%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");

    --display: "Playfair Display", Georgia, "Times New Roman", serif;
    --body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ---- 2  Reset and base ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.7;
    color: var(--ink-soft);
    background: var(--cream);
    overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
/* A class that sets `display` outranks the `hidden` attribute, which would
   leave the filter chips on screen but inert for anyone without JavaScript.
   `hidden` must win. */
[hidden] { display: none !important; }
a { color: var(--maroon); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--maroon-dk); }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
      clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* ---- 3  Typography ---------------------------------------------------- */
h1, h2, h3, h4 { font-family: var(--display); color: var(--ink); margin: 0 0 .5em; line-height: 1.15; font-weight: 700; }
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1.1em; }
.lede { font-size: 1.12rem; color: var(--ink-soft); }
.eyebrow {
    font-family: var(--body);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--saffron-dk);
    display: block;
    margin-bottom: .6em;
}

/* ---- 4  Header -------------------------------------------------------- */
.topbar {
    background: var(--maroon);
    color: #f4e3d4;
    font-size: .85rem;
    letter-spacing: .02em;
}
.topbar .wrap { display: flex; gap: 18px; align-items: center; justify-content: center;
                flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; text-align: center; }
.topbar a { color: #fff; text-decoration: none; font-weight: 600; }
.topbar a:hover { color: var(--gold); text-decoration: underline; }

.site-header {
    position: sticky; top: 0; z-index: 60;
    background: rgba(253, 247, 238, .94);
    backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 78px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 46px; height: 46px; flex: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
    font-family: var(--display); font-weight: 900; font-size: 1.42rem;
    color: var(--maroon); letter-spacing: .01em;
}
.brand-tag {
    font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
    color: var(--saffron-dk); font-weight: 700;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
    display: block; padding: 10px 13px; border-radius: 8px;
    font-weight: 600; font-size: .95rem; color: var(--ink); text-decoration: none;
    white-space: nowrap;
}
.nav a:hover { background: var(--cream-dk); color: var(--maroon); }
.nav a[aria-current="page"] { color: var(--maroon); box-shadow: inset 0 -2px 0 var(--saffron); }

.nav-toggle {
    display: none; margin-left: auto;
    background: var(--maroon); color: #fff; border: 0;
    width: 46px; height: 46px; border-radius: 10px; cursor: pointer;
    align-items: center; justify-content: center;
}
.nav-toggle svg { width: 22px; height: 22px; }

/*
   The collapsed mobile menu is opt-in, not the default. An inline script in
   <head> stamps `js` on <html>; only then does the nav collapse behind the
   toggle. Without JavaScript the menu simply stays open and stacked, because
   a hamburger that cannot be opened is worse than no hamburger at all.
*/
@media (max-width: 980px) {
    .site-header .wrap { flex-wrap: wrap; }
    .nav {
        order: 3; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        border-top: 1px solid var(--line);
        padding: 6px 0 12px;
    }
    .nav a { padding: 13px 6px; border-bottom: 1px solid var(--line); border-radius: 0; }
    .nav a:last-child { border-bottom: 0; }

    html.js .nav-toggle { display: inline-flex; }
    html.js .nav {
        position: fixed; inset: 78px 0 auto 0;
        width: auto; order: 0;
        background: var(--cream); border-top: 0; border-bottom: 1px solid var(--line);
        padding: 10px 16px 18px;
        box-shadow: var(--shadow-md);
        display: none;
    }
    html.js .nav.open { display: flex; }
}

/* ---- 5  Buttons ------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 24px; border-radius: 999px;
    font-weight: 700; font-size: .95rem; letter-spacing: .02em;
    text-decoration: none; border: 2px solid transparent; cursor: pointer;
    transition: transform .15s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--maroon); color: #fff; }
.btn-primary:hover { background: var(--maroon-dk); color: #fff; }
.btn-wa { background: #147a3a; color: #fff; }          /* 5.42:1 */
.btn-wa:hover { background: #0f602f; color: #fff; }
.btn-ghost { background: transparent; color: var(--maroon); border-color: var(--maroon); }
.btn-ghost:hover { background: var(--maroon); color: #fff; }
.btn-light { background: var(--cream); color: var(--maroon); }
.btn-light:hover { background: #fff; color: var(--maroon-dk); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- 6  Hero ---------------------------------------------------------- */
.hero {
    position: relative; overflow: hidden;
    background: var(--maroon);
    color: #f7e9dc;
    padding: clamp(56px, 9vw, 104px) 0;
}
.hero::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--jali);
    background-size: 130px 130px;
    opacity: .16;
    pointer-events: none;
}
.hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 15% 15%, rgba(232,135,30,.30), transparent 60%);
    pointer-events: none;
}
.hero .wrap { position: relative; z-index: 2; }
.hero h1 { color: #fff; max-width: 16ch; }
.hero .eyebrow { color: var(--gold-text); }
.hero .lede { color: #f0dccb; max-width: 54ch; font-size: 1.15rem; }
.hero .btn-row { margin-top: 26px; }

.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 30px; } }

.hero-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: var(--radius);
    padding: 22px 24px;
    backdrop-filter: blur(3px);
}
.hero-card h2 { color: #fff; font-size: 1.15rem; margin-bottom: .5em; }
.hero-card dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .95rem; }
.hero-card dt { color: var(--gold-text); font-weight: 700; }
.hero-card dd { margin: 0; color: #f0dccb; }
.hero-card a { color: #fff; }

/* ---- 7  Sections ------------------------------------------------------ */
.section { padding: clamp(48px, 7vw, 88px) 0; }
.section-alt { background: var(--cream-dk); }
.section-ink { background: var(--ink); color: #e8dcd0; }
.section-ink h2, .section-ink h3 { color: #fff; }
.section-head { max-width: 62ch; margin-bottom: 34px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }

/* ---- 8  Product tiles ------------------------------------------------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 20px; }

.tile {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease;
}
.tile:hover, .tile:focus-within { transform: translateY(-3px); box-shadow: var(--shadow-md); }

/* No product photography survived, and none has been substituted from a
   stock library — putting somebody else's sweets on a real shop would
   misrepresent the goods. Each tile carries a woven motif in its category
   colour with the dish's initials instead, and the slot is sized so a real
   photograph drops straight in when the client supplies one. */
.tile-motif {
    text-decoration: none;
    position: relative;
    aspect-ratio: 4 / 3;
    display: grid; place-items: center;
    background: var(--tile-bg, var(--cream-dk));
    border-bottom: 1px solid var(--line);
}
.tile-motif::before {
    content: ""; position: absolute; inset: 0;
    background-image: var(--jali);
    background-size: 74px 74px;
    opacity: .30;
}
.tile-motif img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.monogram {
    position: relative;
    font-family: var(--display); font-weight: 900;
    font-size: 2rem; letter-spacing: .04em;
    color: var(--tile-ink, var(--maroon));
    background: rgba(255,255,255,.82);
    width: 74px; height: 74px; border-radius: 50%;
    display: grid; place-items: center;
    box-shadow: 0 2px 10px rgba(36,26,18,.12);
}
.tile-body { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.tile-body h3 { font-size: 1.06rem; margin: 0 0 6px; line-height: 1.3; }
.tile-body h3 a { color: var(--ink); text-decoration: none; }
.tile-body h3 a:hover { color: var(--maroon); text-decoration: underline; }
.tile-desc { font-size: .9rem; margin: 0 0 12px; color: var(--ink-soft); }
.tile-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.price { font-family: var(--display); font-weight: 700; font-size: 1.22rem; color: var(--maroon); }
.price-ask { font-size: .86rem; font-weight: 700; color: var(--saffron-dk); }

.badge {
    display: inline-block; font-size: .68rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 999px;
    background: var(--cream-dk); color: var(--maroon); border: 1px solid var(--line);
}

/* ---- 9  Category chips ------------------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip {
    font: inherit; font-size: .9rem; font-weight: 700;
    padding: 9px 18px; border-radius: 999px; cursor: pointer;
    background: var(--white); color: var(--ink); border: 1px solid var(--line);
}
.chip:hover { border-color: var(--maroon); color: var(--maroon); }
.chip[aria-pressed="true"] { background: var(--maroon); color: #fff; border-color: var(--maroon); }
.chip .n { opacity: .65; font-weight: 600; margin-left: 4px; }
.tile[hidden] { display: none; }
.empty-note { padding: 26px; text-align: center; color: var(--ink-soft); }

/* category tints, used on the tiles */
.c-sweets              { --tile-bg: #fbe9d6; --tile-ink: #9d4f00; }
.c-savouries           { --tile-bg: #eef0dc; --tile-ink: #4c6d31; }
.c-snacks              { --tile-bg: #fde8e2; --tile-ink: #a83a24; }
.c-main-course         { --tile-bg: #ece6f2; --tile-ink: #5b4478; }
.c-kathiyawadi-special { --tile-bg: #f7e2e5; --tile-ink: #7a2233; }
.c-catering            { --tile-bg: #e6eef2; --tile-ink: #2a5a72; }
.c-tiffin              { --tile-bg: #f1ece2; --tile-ink: #6b5330; }

/* ---- 10  Panels ------------------------------------------------------- */
.panel {
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 26px 26px 24px; box-shadow: var(--shadow-sm);
}
.panel h3 { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

.note {
    background: #fff8e8; border: 1px solid #f0dcae; border-left: 4px solid var(--saffron);
    border-radius: 10px; padding: 16px 20px; font-size: .95rem;
}
.note > :last-child { margin-bottom: 0; }
.note strong { color: var(--ink); }

.contact-list { list-style: none; padding: 0; margin: 0; }
.contact-list li { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 18px; }
.contact-list svg { width: 22px; height: 22px; flex: none; color: var(--saffron-dk); margin-top: 4px; }
.contact-list h3 { font-family: var(--body); font-size: .74rem; letter-spacing: .14em;
                   text-transform: uppercase; color: var(--ink-soft); margin: 0 0 2px; }
.contact-list p, .contact-list a { margin: 0; font-size: 1.02rem; color: var(--ink); }
.contact-list a { font-weight: 600; }

.feature { display: flex; gap: 16px; align-items: flex-start; }
.feature svg { width: 30px; height: 30px; flex: none; color: var(--maroon); }
.feature h3 { margin: 0 0 4px; font-size: 1.08rem; }
.feature p { margin: 0; font-size: .95rem; }

.checklist { list-style: none; padding: 0; margin: 0 0 1em; }
.checklist li { position: relative; padding-left: 30px; margin-bottom: 10px; }
.checklist li::before {
    content: ""; position: absolute; left: 0; top: .45em;
    width: 16px; height: 16px; border-radius: 50%;
    background: var(--pistachio);
    box-shadow: inset 0 0 0 3px var(--cream);
}

.price-table { width: 100%; border-collapse: collapse; }
.price-table th, .price-table td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); }
.price-table th { font-family: var(--body); font-size: .74rem; letter-spacing: .14em;
                  text-transform: uppercase; color: var(--ink-soft); }
.price-table td:last-child, .price-table th:last-child { text-align: right; white-space: nowrap; }
.price-table tr:last-child td { border-bottom: 0; }

/* ---- 11  Gallery ------------------------------------------------------ */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.gal figure { margin: 0; border-radius: var(--radius); overflow: hidden;
              border: 1px solid var(--line); background: var(--white); }
.gal .tile-motif { aspect-ratio: 1; border-bottom: 0; }
.gal figcaption { padding: 12px 16px; font-size: .9rem; color: var(--ink-soft); }

/* ---- 12  Footer ------------------------------------------------------- */
.site-footer { background: var(--ink); color: #cbbcae; padding: 56px 0 0; }
.site-footer h3 { color: #fff; font-family: var(--body); font-size: .8rem;
                  letter-spacing: .16em; text-transform: uppercase; margin: 0 0 14px; }
.site-footer a { color: #e8dcd0; text-decoration: none; }
.site-footer a:hover { color: var(--gold); text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 34px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 9px; font-size: .95rem; }
.footer-brand .brand-name { color: #fff; }
.footer-brand p { font-size: .95rem; }
.socials { display: flex; gap: 10px; margin-top: 14px; }
.socials a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
             background: rgba(255,255,255,.08); }
.socials a:hover { background: var(--maroon); }
.socials svg { width: 19px; height: 19px; }
.footer-bottom { margin-top: 42px; border-top: 1px solid rgba(255,255,255,.12);
                 padding: 20px 0; font-size: .86rem; }
.footer-bottom .wrap { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; }

/* ---- 13  Accessibility and motion ------------------------------------- */
.skip {
    position: absolute; left: 12px; top: 0; z-index: 200;
    width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
    background: var(--white); color: var(--maroon); font-weight: 700;
    border-radius: 0 0 8px 8px;
}
.skip:focus { width: auto; height: auto; clip-path: none; padding: 12px 20px; outline: 3px solid var(--maroon); }

a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--saffron-dk);
    outline-offset: 3px;
    border-radius: 4px;
}
.hero a:focus-visible, .site-footer a:focus-visible, .topbar a:focus-visible,
.section-ink a:focus-visible { outline-color: var(--gold); }

:target { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
    }
    .tile:hover, .btn:hover { transform: none; }
}

@media print {
    .site-header, .site-footer, .topbar, .nav-toggle, .btn-row, .chips { display: none !important; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .tile { break-inside: avoid; }
}