/* =============================================================================
   KHOJ JUNTION — UI FOUNDATION
   =============================================================================
   One file that decides colour, type size, spacing and the shape of the small
   shared pieces. Loaded LAST, after tw.min.css and style.css, on every page.

   ── WHY THIS EXISTS

   A survey of the blade files found EIGHTEEN different hardcoded font sizes —
   10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, 28, 30, 32, 44 and 52px —
   chosen page by page. That is what makes a site look homemade: not any single
   page being wrong, but no two pages agreeing.

   The fix is not to edit 170 templates. It is to put the decisions in ONE place
   and let everything inherit them.

   ── HOW IT IS SAFE TO ADD TO A LIVE SITE

   1. It is loaded last, so it can override, but it deliberately sets very few
      global rules.
   2. The heading sizes below are ELEMENT selectors (h1, h2…). A Tailwind class
      or an inline style beats an element selector every time — so any heading a
      page already styles is left exactly as it is, and only the ones nobody
      styled get the scale. It fixes the inconsistent ones and touches nothing
      that already works.
   3. Every new component is a `kj-` class. Nothing existing uses that prefix,
      so nothing existing can collide.

   ⚠️ public/css/tw.min.css was compiled 1 June 2026 and is never rebuilt. Any
      Tailwind class invented after that date does nothing. Everything in this
      file is plain CSS for exactly that reason.
============================================================================= */

:root {
    /* ── Brand ───────────────────────────────────────────────────────────
       Taken from what the site already uses, not invented: #e40001 is in
       style.css (.main_btn), #0F3460 is the admin heading colour. */
    --kj-red:        #e40001;
    --kj-red-dark:   #b80001;
    --kj-red-soft:   #fef2f2;
    --kj-navy:       #0F3460;

    /* ── Neutrals ─────────────────────────────────────────────────────── */
    --kj-ink:        #111827;   /* body text, headings          */
    --kj-body:       #374151;   /* long-form paragraphs         */
    --kj-muted:      #6b7280;   /* captions, meta, placeholders  */
    --kj-faint:      #9ca3af;   /* disabled, dividers with text  */
    --kj-line:       #e5e7eb;   /* borders                       */
    --kj-bg:         #f7f7f8;   /* page background               */
    --kj-surface:    #ffffff;   /* cards                         */

    /* ── Status ───────────────────────────────────────────────────────────
       One colour per meaning, used by toasts, badges and form errors alike,
       so "green" always means the same thing wherever it appears. */
    --kj-ok:         #16a34a;   --kj-ok-soft:   #f0fdf4;
    --kj-warn:       #d97706;   --kj-warn-soft: #fffbeb;
    --kj-err:        #dc2626;   --kj-err-soft:  #fef2f2;
    --kj-info:       #2563eb;   --kj-info-soft: #eff6ff;

    /* ── Type scale ───────────────────────────────────────────────────────
       Seven sizes. Not eighteen.

       The headings use clamp() so they grow with the viewport instead of
       needing a separate mobile size: clamp(min, preferred, max). On a 360px
       phone h1 lands near 24px; on a desktop near 36px. One rule, no media
       query, and it can never produce a 52px heading on a phone — which is
       what a fixed 52px does today. */
    --kj-fs-xs:      0.75rem;    /* 12px — badges, legal        */
    --kj-fs-sm:      0.8125rem;  /* 13px — meta, captions       */
    --kj-fs-base:    0.875rem;   /* 14px — UI text, buttons     */
    --kj-fs-md:      1rem;       /* 16px — body copy            */
    --kj-fs-lg:      1.125rem;   /* 18px — lead paragraph       */

    --kj-h4: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
    --kj-h3: clamp(1.125rem, 1.03rem + 0.45vw, 1.375rem);
    --kj-h2: clamp(1.25rem,  1.05rem + 0.95vw, 1.75rem);
    --kj-h1: clamp(1.5rem,   1.15rem + 1.7vw,  2.25rem);

    --kj-lh-tight:   1.25;
    --kj-lh-normal:  1.5;
    --kj-lh-loose:   1.65;

    /* ── Spacing ─────────────────────────────────────────────────────── */
    --kj-1: 4px;  --kj-2: 8px;  --kj-3: 12px; --kj-4: 16px;
    --kj-5: 20px; --kj-6: 24px; --kj-8: 32px; --kj-10: 40px;

    /* ── Shape ────────────────────────────────────────────────────────────
       The site's signature is an ASYMMETRIC radius (see .custom_rounded in
       style.css): round on the top-left and bottom-right, square on the other
       two. Repeated here as a variable so new components can match without
       anyone having to go and look it up. */
    --kj-radius:     15px 1px 15px 1px;   /* TL TR BR BL */
    --kj-radius-sm:  10px 1px 10px 1px;
    --kj-radius-flat: 10px;

    --kj-shadow-sm:  0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
    --kj-shadow-md:  0 4px 12px rgba(16,24,40,.10);
    --kj-shadow-lg:  0 12px 32px rgba(16,24,40,.16);
}

/* =============================================================================
   1. TYPE — element level only, so nothing already styled is disturbed
============================================================================= */

h1, .kj-h1 { font-size: var(--kj-h1); line-height: var(--kj-lh-tight); font-weight: 700; color: var(--kj-ink); }
h2, .kj-h2 { font-size: var(--kj-h2); line-height: var(--kj-lh-tight); font-weight: 700; color: var(--kj-ink); }
h3, .kj-h3 { font-size: var(--kj-h3); line-height: var(--kj-lh-tight); font-weight: 600; color: var(--kj-ink); }
h4, .kj-h4 { font-size: var(--kj-h4); line-height: var(--kj-lh-normal); font-weight: 600; color: var(--kj-ink); }

.kj-lead  { font-size: var(--kj-fs-lg);   line-height: var(--kj-lh-loose); color: var(--kj-body); }
.kj-text  { font-size: var(--kj-fs-md);   line-height: var(--kj-lh-normal); color: var(--kj-body); }
.kj-ui    { font-size: var(--kj-fs-base); line-height: var(--kj-lh-normal); }
.kj-meta  { font-size: var(--kj-fs-sm);   line-height: var(--kj-lh-normal); color: var(--kj-muted); }
.kj-tiny  { font-size: var(--kj-fs-xs);   line-height: var(--kj-lh-normal); color: var(--kj-muted); }

/* Long text is easier to read when a line does not run the full width of a
   desktop screen. 70 characters is the usual comfortable maximum. */
.kj-prose { max-width: 70ch; }

/* =============================================================================
   2. FOCUS — visible, always
   -----------------------------------------------------------------------------
   Tailwind's reset removes the browser's focus ring, and nothing in this
   project put one back. That means somebody navigating by keyboard — or using
   a screen reader — cannot see where they are. :focus-visible shows it only for
   keyboard users, so mouse clicks stay clean.
============================================================================= */

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
    outline: 2px solid var(--kj-red);
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================================
   3. TOASTS
   -----------------------------------------------------------------------------
   Position: TOP on desktop, BOTTOM on phones.

   On a phone the top of the screen is where the sticky header and the notch
   live, and it is the hardest place to reach with a thumb. A toast at the
   bottom is closer to the hand and covers nothing that matters. Every mobile
   app does it this way.
============================================================================= */

.kj-toasts {
    position: fixed;
    z-index: 2147483000;          /* above the header (50) and the filter drawer */
    display: flex;
    flex-direction: column;
    gap: var(--kj-2);
    pointer-events: none;         /* the container never blocks the page */
    padding: var(--kj-3);
}

/* Phone: bottom, full width, newest at the bottom nearest the thumb */
@media (max-width: 639.98px) {
    .kj-toasts {
        left: 0; right: 0; bottom: 0;
        flex-direction: column;
        padding-bottom: calc(var(--kj-3) + env(safe-area-inset-bottom, 0px));
    }
}

/* Tablet and up: top right, out of the way of the content */
@media (min-width: 640px) {
    .kj-toasts {
        top: 0; right: 0;
        width: 400px;
        max-width: calc(100vw - var(--kj-6));
    }
}

.kj-toast {
    pointer-events: auto;         /* but each toast IS clickable */
    display: flex;
    align-items: flex-start;
    gap: var(--kj-3);
    background: var(--kj-surface);
    border: 1px solid var(--kj-line);
    border-left: 4px solid var(--kj-muted);
    border-radius: var(--kj-radius-sm);
    box-shadow: var(--kj-shadow-lg);
    padding: var(--kj-3) var(--kj-4);
    font-size: var(--kj-fs-base);
    line-height: var(--kj-lh-normal);
    color: var(--kj-ink);
    position: relative;
    overflow: hidden;
    animation: kj-toast-in 220ms cubic-bezier(.16,1,.3,1) both;
}

.kj-toast--out { animation: kj-toast-out 160ms ease-in both; }

.kj-toast__icon {
    flex: 0 0 20px; width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-size: 12px; font-weight: 800; color: #fff; line-height: 1;
    margin-top: 1px;
}

.kj-toast__body  { flex: 1 1 auto; min-width: 0; }
.kj-toast__title { font-weight: 700; display: block; margin-bottom: 2px; }
.kj-toast__msg   { display: block; word-wrap: break-word; overflow-wrap: anywhere; }

.kj-toast__close {
    flex: 0 0 auto;
    background: none; border: 0; cursor: pointer;
    color: var(--kj-faint);
    font-size: 20px; line-height: 1;
    padding: 0 2px; margin: -2px -4px 0 0;
}
.kj-toast__close:hover { color: var(--kj-ink); }

/* The time left, as a thin bar. Tells people it will go away by itself, so
   nobody sits waiting to see whether they must dismiss it. */
.kj-toast__bar {
    position: absolute; left: 0; bottom: 0; height: 3px; width: 100%;
    transform-origin: left center;
    opacity: .45;
}

.kj-toast--success { border-left-color: var(--kj-ok); }
.kj-toast--success .kj-toast__icon { background: var(--kj-ok); }
.kj-toast--success .kj-toast__bar  { background: var(--kj-ok); }

.kj-toast--error   { border-left-color: var(--kj-err); }
.kj-toast--error .kj-toast__icon   { background: var(--kj-err); }
.kj-toast--error .kj-toast__bar    { background: var(--kj-err); }

.kj-toast--warning { border-left-color: var(--kj-warn); }
.kj-toast--warning .kj-toast__icon { background: var(--kj-warn); }
.kj-toast--warning .kj-toast__bar  { background: var(--kj-warn); }

.kj-toast--info    { border-left-color: var(--kj-info); }
.kj-toast--info .kj-toast__icon    { background: var(--kj-info); }
.kj-toast--info .kj-toast__bar     { background: var(--kj-info); }

@keyframes kj-toast-in  { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes kj-toast-out { from { opacity: 1; } to { opacity: 0; transform: translateY(-6px); } }

/* Someone who has asked their system for less motion gets none. This is a
   real accessibility setting — moving UI can trigger nausea and migraine. */
@media (prefers-reduced-motion: reduce) {
    .kj-toast, .kj-toast--out { animation: none !important; }
    .kj-toast__bar { transition: none !important; }
}

/* =============================================================================
   4. INLINE MESSAGES — for things that belong ON the page, not floating
   -----------------------------------------------------------------------------
   A toast is right for "saved" — it disappears and nothing is lost. It is
   WRONG for "these three fields are invalid", because that has to stay on
   screen next to the form while the person fixes it.
============================================================================= */

.kj-alert {
    display: flex; gap: var(--kj-3); align-items: flex-start;
    padding: var(--kj-3) var(--kj-4);
    border: 1px solid var(--kj-line);
    border-left: 4px solid var(--kj-muted);
    border-radius: var(--kj-radius-sm);
    font-size: var(--kj-fs-base);
    line-height: var(--kj-lh-normal);
    margin-bottom: var(--kj-4);
}
.kj-alert ul { margin: var(--kj-1) 0 0; padding-left: var(--kj-5); }
.kj-alert li { margin-top: 2px; }

.kj-alert--success { border-left-color: var(--kj-ok);   background: var(--kj-ok-soft);   color: #14532d; }
.kj-alert--error   { border-left-color: var(--kj-err);  background: var(--kj-err-soft);  color: #7f1d1d; }
.kj-alert--warning { border-left-color: var(--kj-warn); background: var(--kj-warn-soft); color: #78350f; }
.kj-alert--info    { border-left-color: var(--kj-info); background: var(--kj-info-soft); color: #1e3a8a; }

/* =============================================================================
   5. BADGES — one shape and one meaning per colour, everywhere
============================================================================= */

.kj-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--kj-fs-xs);
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
}
.kj-badge--success { background: var(--kj-ok-soft);   color: #15803d; }
.kj-badge--error   { background: var(--kj-err-soft);  color: #b91c1c; }
.kj-badge--warning { background: var(--kj-warn-soft); color: #b45309; }
.kj-badge--info    { background: var(--kj-info-soft); color: #1d4ed8; }
.kj-badge--muted   { background: #f3f4f6;             color: #4b5563; }

/* =============================================================================
   6. RESPONSIVE SAFETY NETS
   -----------------------------------------------------------------------------
   Two rules that stop the most common way a page breaks on a phone: something
   slightly too wide makes the WHOLE page scroll sideways, and every section
   then looks misaligned.
============================================================================= */

/* 25 Sep 2026 — wrapped in @layer base. ROOT CAUSE of "card image height
   changes with whatever photo is uploaded" on the homepage and /tourist-places.
   tw.min.css is Tailwind v4, which puts every utility (h-52, h-40, h-8 …)
   inside `@layer utilities`. A rule OUTSIDE any layer — which this one was —
   always beats a layered rule, whatever the specificity. So this plain
   `height:auto` was silently overriding every Tailwind height class on every
   <img> on the site: `w-full h-52 object-cover` rendered at the photo's own
   height (a portrait photo → a 900px-tall card). Only images with an inline
   style="height:…" (the worker card) escaped it.
   Inside @layer base it sits in the same layer as Tailwind's own reset, below
   utilities: images with a height class get that height again, and images
   without one still scale proportionally exactly as before (tested in a real
   browser: 900px → 208px for h-52; attribute-only images unchanged). */
@layer base {
    img, video, canvas, svg { max-width: 100%; height: auto; }
}

/* A table cannot be made narrow, so it gets its own scrollbar instead of
   giving one to the page. */
.kj-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Long unbroken strings — an email, a URL, a slug — are the other usual
   culprit. */
.kj-break { overflow-wrap: anywhere; word-break: break-word; }

/* On a touch screen anything tappable should be about 44px, which is roughly a
   fingertip. Applied only to our own small controls so it cannot stretch a
   page's existing layout. */
@media (hover: none) and (pointer: coarse) {
    .kj-toast__close { min-width: 32px; min-height: 32px; }
}