/* ══════════════════════════════════════════════════════════════════════════
   Kloudmint Tools — shared interface standard
   Loaded LAST in <head> so it normalises every tool's hero band.
   Only visual properties are touched; no IDs, scripts or tool layouts below
   the hero are affected.
   ══════════════════════════════════════════════════════════════════════════ */
:root {
    --km-hero-bg: linear-gradient(145deg, #0e2d27 0%, #16483d 55%, #0e2d27 100%);
    --km-hero-accent: #6fd1b3;
    --km-hero-text: #e1f5ee;
    --km-hero-muted: #a9d9c9;
    --km-hero-max: 1200px;
}

/* 1. One band: same background, spacing and full width on every tool page */
.km-hero {
    background: var(--km-hero-bg) !important;
    padding: 36px 32px 30px !important;
    min-height: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    margin-top: 0 !important;
}
/* Boxed heroes (inside a narrow page wrapper) bleed to full width */
.km-hero.km-bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box;
}
.km-hero.km-bleed > * { max-width: var(--km-hero-max); margin-left: auto !important; margin-right: auto !important; }

/* 2. One heading style */
.km-hero h1 {
    font-family: 'DM Sans', -apple-system, 'Segoe UI', sans-serif !important;
    font-size: clamp(1.7rem, 3vw, 2.25rem) !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: #fff !important;
    margin: 6px 0 10px !important;
    max-width: 860px;
}
.km-hero h1 em, .km-hero h1 mark, .km-hero h1 .accent {
    color: var(--km-hero-accent) !important;
    background: none !important;
    font-style: normal !important;
    padding: 0 !important;
}
.km-hero h1 br + em { display: inline; }

/* 3. Standard band markup (includes/tool-hero.php) */
.km-hero-std { margin-bottom: 24px; }
.km-hero-std .km-hero-inner { max-width: var(--km-hero-max); margin: 0 auto; }
.km-hero-eyebrow {
    font: 500 12px/1 'DM Mono', ui-monospace, monospace;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--km-hero-accent);
}
.km-hero-lead { color: var(--km-hero-muted); font-size: 1rem; line-height: 1.65; max-width: 760px; margin: 0; }

/* 4. Privacy badge: always the last row of the band, aligned to the content width */
.km-hero > #km-privacy-badge { max-width: var(--km-hero-max) !important; margin: 20px auto 0 !important; position: relative; z-index: 1; }

/* 5. Everything in the band reads left-aligned */
.km-hero, .km-hero .container, .km-hero [class*="inner"] { text-align: left !important; }
.km-hero h1, .km-hero p { margin-left: 0 !important; }
.km-hero [class*="pills"], .km-hero [class*="tags"], .km-hero [class*="chips"], .km-hero [class*="badges"], .km-hero [class*="feats"] { justify-content: flex-start !important; }

@media (max-width: 640px) {
    .km-hero { padding: 28px 16px 24px !important; }
}

/* ══ Site-wide form polish (2026-10-17): file pickers, sample chips, dropdown lists ══
   Low-specificity (:where) so any page's own styles still win. Uses the km-theme tokens, so light and dark both work. */

/* File inputs — "Choose File" becomes a brand button, the file name a muted label */
:where(input[type="file"]){font:inherit;font-size:.82rem;color:var(--km-muted,#4a605a);max-width:100%;cursor:pointer}
:where(input[type="file"])::file-selector-button{
  font:inherit;font-size:.8rem;font-weight:600;margin-right:.7rem;padding:.48rem .95rem;
  border:1px solid var(--km-accent,#1f8a70);border-radius:8px;background:var(--km-soft,#e8f5f0);color:var(--km-soft-ink,#1f6b58);
  cursor:pointer;transition:background .15s,color .15s,border-color .15s}
:where(input[type="file"]):hover::file-selector-button{background:var(--km-accent,#1f8a70);color:var(--km-accent-ink,#fff)}
:where(input[type="file"]):focus-visible{outline:2px solid var(--km-accent,#1f8a70);outline-offset:3px;border-radius:8px}

/* "Samples" / preset chips (JSON formatter and others that don't style .preset-btn themselves) */
:where(.preset-btn){
  font:inherit;font-size:.72rem;font-weight:600;line-height:1;padding:.38rem .7rem;margin:2px 2px 2px 0;
  border:1px solid var(--km-border-strong,#d2ded9);border-radius:999px;background:var(--km-surface,#fff);color:var(--km-ink,#10201c);
  cursor:pointer;transition:background .15s,border-color .15s,color .15s,transform .1s}
:where(.preset-btn):hover{border-color:var(--km-accent,#1f8a70);background:var(--km-soft,#e8f5f0);color:var(--km-soft-ink,#1f6b58)}
:where(.preset-btn):active{transform:translateY(1px)}
:where(.preset-btn):focus-visible{outline:2px solid var(--km-accent,#1f8a70);outline-offset:2px}

/* Dropdown lists — every browser: themed option colours and focus ring */
:where(select){accent-color:var(--km-accent,#1f8a70)}
:where(select):focus-visible{outline:2px solid var(--km-accent,#1f8a70);outline-offset:1px}
:where(select) option{background:var(--km-surface,#fff);color:var(--km-ink,#10201c)}

/* Browsers with customizable <select> (Chrome / Edge 135+): restyle the open list itself.
   Others keep their native list, which still works the same. */
@supports (appearance: base-select){
  select:not([multiple]):not([size]){appearance:base-select;align-items:center}
  select:not([multiple]):not([size])::picker-icon{content:"";flex:none;align-self:center;width:10px;height:10px;margin-left:auto;padding-left:.5rem;box-sizing:content-box;
    background:currentColor;opacity:.6;transition:rotate .15s;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
  select:not([multiple]):not([size]):open::picker-icon{rotate:180deg}
  select:not([multiple]):not([size])::picker(select){
    appearance:base-select;border:1px solid var(--km-border-strong,#d2ded9);border-radius:10px;padding:4px;
    background:var(--km-surface,#fff);color:var(--km-ink,#10201c);box-shadow:0 12px 32px rgba(16,32,28,.14);
    max-height:min(360px,60vh);margin-top:4px}
  select:not([multiple]):not([size]) option{padding:.5rem .7rem;border-radius:7px;font-size:.88rem;gap:.5rem;cursor:pointer}
  select:not([multiple]):not([size]) option:hover,select:not([multiple]):not([size]) option:focus-visible{background:var(--km-soft,#e8f5f0);color:var(--km-soft-ink,#1f6b58);outline:none}
  select:not([multiple]):not([size]) option:checked{background:var(--km-accent,#1f8a70);color:var(--km-accent-ink,#fff);font-weight:600}
  select:not([multiple]):not([size]) option::checkmark{display:none}
  select:not([multiple]):not([size]) optgroup{font-weight:700;font-size:.74rem;color:var(--km-muted,#4a605a);padding:.3rem .4rem}
}