/* ============================================================
   Hotelcykler – fælles stilark (version 1, november 2026)
   Tema: "Midnat og messing"
   Bruges af: hotelcykler.dk, groups, guide, bikerental, serviceportal
   Bruges IKKE af: brugte.hotelcykler.dk (eget, billigt udtryk)

   Sådan bruges det på en side:
   <link rel="stylesheet" href="https://hotelcykler.dk/assets/brand/hotelcykler-brand.css">
   Alle klasser starter med "hcb-", så de ikke støder ind i sidens egne.
   ============================================================ */

:root{
  /* Farver */
  --hcb-navy:#18202c;        /* header, footer, mørke flader */
  --hcb-navy-2:#232b38;      /* hover/flader på navy */
  --hcb-cream:#f6f4ef;       /* sidebaggrund */
  --hcb-cream-2:#ece8df;     /* afdelinger, felter */
  --hcb-line:#e4e0d6;        /* streger og kanter */
  --hcb-white:#ffffff;       /* kort */
  --hcb-text:#1f2530;        /* brødtekst */
  --hcb-dim:#5a6170;         /* sekundær tekst */
  --hcb-on-dark:#f6f4ef;     /* tekst på navy */
  --hcb-on-dark-dim:#a9b0bc; /* sekundær tekst på navy */
  --hcb-brass:#c9a86a;       /* knapper, accent */
  --hcb-brass-dark:#b8955a;  /* knap-hover */
  --hcb-gold:#7a5d30;        /* links og små mærkater på lys baggrund */
  --hcb-gold-light:#efe7d6;  /* blød knap / markering */
  --hcb-ok:#2f7d5b;
  --hcb-error:#b42318;

  /* Skrift */
  --hcb-display:Georgia,'Iowan Old Style','Times New Roman',Times,serif;
  --hcb-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --hcb-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,'Liberation Mono',monospace;

  /* Former og mål */
  --hcb-radius:10px;         /* knapper og felter */
  --hcb-radius-lg:14px;      /* kort */
  --hcb-radius-pill:999px;   /* små mærker/chips */
  --hcb-header-h:64px;
  --hcb-logo:48px;
  --hcb-shadow:0 20px 60px -15px rgba(24,32,44,.18);
  --hcb-max:1200px;
}
@media (max-width:640px){:root{--hcb-header-h:60px;--hcb-logo:42px}}

/* ---------- Grundlag (valgfrit: sæt class="hcb" på <body>) ---------- */
.hcb{margin:0;background:var(--hcb-cream);color:var(--hcb-text);font-family:var(--hcb-body);line-height:1.6;-webkit-font-smoothing:antialiased}
.hcb-display,:where(.hcb) h1,:where(.hcb) h2,:where(.hcb) h3{font-family:var(--hcb-display);font-weight:400;letter-spacing:-.01em;line-height:1.15;color:inherit}
:where(.hcb) a{color:var(--hcb-gold)}
.hcb-wrap{max-width:var(--hcb-max);margin:0 auto;padding:0 24px}
@media (max-width:640px){.hcb-wrap{padding:0 16px}}

/* ---------- Mærkat (lille tekst i versaler) ---------- */
.hcb-label{font-family:var(--hcb-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hcb-gold)}
.hcb-dark .hcb-label,.hcb-header .hcb-label{color:var(--hcb-brass)}

/* ---------- Header ---------- */
.hcb-header{position:sticky;top:0;z-index:50;background:var(--hcb-navy);color:var(--hcb-on-dark);border-bottom:1px solid rgba(255,255,255,.06)}
.hcb-header__inner{max-width:var(--hcb-max);margin:0 auto;padding:0 24px;height:var(--hcb-header-h);display:flex;align-items:center;justify-content:space-between;gap:24px}
@media (max-width:640px){.hcb-header__inner{padding:0 16px}}
.hcb-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--hcb-on-dark);min-width:0}
.hcb-brand__logo{width:var(--hcb-logo);height:var(--hcb-logo);border-radius:50%;background:#fff;flex:none;object-fit:contain}
.hcb-brand__text{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.hcb-brand__name{font-family:var(--hcb-display);font-size:1.25rem;color:var(--hcb-on-dark);white-space:nowrap}
.hcb-brand__tag{font-family:var(--hcb-mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--hcb-brass);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:640px){.hcb-brand__name{font-size:1.05rem}.hcb-brand__tag{font-size:.55rem}}
.hcb-nav{display:flex;align-items:center;gap:26px}
.hcb-nav a{color:var(--hcb-on-dark);text-decoration:none;font-size:.9rem;font-weight:300;white-space:nowrap;transition:color .2s}
.hcb-nav a:hover,.hcb-nav a[aria-current="page"]{color:var(--hcb-brass)}
.hcb-menu-btn{display:none;background:none;border:0;color:var(--hcb-on-dark);width:44px;height:44px;border-radius:var(--hcb-radius);cursor:pointer;font-size:22px;line-height:1}
.hcb-menu-btn:hover{background:rgba(255,255,255,.08)}
.hcb-mobile{display:none;background:var(--hcb-navy);border-top:1px solid rgba(255,255,255,.08)}
.hcb-mobile.open{display:block}
.hcb-mobile a{display:block;padding:14px 24px;color:var(--hcb-on-dark);text-decoration:none;font-weight:300;border-bottom:1px solid rgba(255,255,255,.08)}
.hcb-mobile a:hover,.hcb-mobile a[aria-current="page"]{color:var(--hcb-brass)}
@media (max-width:1279px){.hcb-nav{display:none}.hcb-menu-btn{display:inline-flex;align-items:center;justify-content:center}}
@media (min-width:1280px){.hcb-mobile{display:none!important}}

/* ---------- Knapper ---------- */
.hcb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 26px;border-radius:var(--hcb-radius);border:1px solid transparent;font-family:var(--hcb-body);font-size:1rem;font-weight:500;text-decoration:none;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
.hcb-btn--primary{background:var(--hcb-brass);color:var(--hcb-navy)}
.hcb-btn--primary:hover{background:var(--hcb-brass-dark)}
.hcb-btn--dark{background:var(--hcb-navy);color:var(--hcb-on-dark)}
.hcb-btn--dark:hover{background:var(--hcb-navy-2)}
.hcb-btn--soft{background:var(--hcb-gold-light);color:var(--hcb-gold)}
.hcb-btn--soft:hover{background:var(--hcb-cream-2)}
.hcb-btn--ghost{background:transparent;color:var(--hcb-on-dark);border-color:rgba(246,244,239,.35)}
.hcb-btn--ghost:hover{border-color:var(--hcb-brass);color:var(--hcb-brass)}
.hcb-btn--sm{height:40px;padding:0 18px;font-size:.9rem}
.hcb-btn:disabled{opacity:.5;pointer-events:none}

/* ---------- Kort og flader ---------- */
.hcb-card{background:var(--hcb-white);border:1px solid var(--hcb-line);border-radius:var(--hcb-radius-lg);padding:24px;box-shadow:var(--hcb-shadow)}
.hcb-dark{background:var(--hcb-navy);color:var(--hcb-on-dark)}
.hcb-soft{background:var(--hcb-cream-2)}
.hcb-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:var(--hcb-radius-pill);background:rgba(201,168,106,.12);color:var(--hcb-brass);font-size:.8rem}

/* ---------- Formularfelter ---------- */
.hcb-input,.hcb-select,.hcb-textarea{width:100%;box-sizing:border-box;min-height:44px;padding:10px 12px;border:1px solid var(--hcb-line);border-radius:var(--hcb-radius);background:#fff;color:var(--hcb-text);font:inherit}
.hcb-input:focus,.hcb-select:focus,.hcb-textarea:focus{outline:2px solid var(--hcb-brass);outline-offset:1px}

/* ---------- Footer ---------- */
.hcb-footer{background:var(--hcb-navy);color:var(--hcb-on-dark-dim);padding:40px 0;font-size:.875rem;text-align:center}
.hcb-footer a{color:var(--hcb-on-dark-dim);text-decoration:none}
.hcb-footer a:hover{color:var(--hcb-brass)}
.hcb-footer__brand{font-family:var(--hcb-display);color:var(--hcb-on-dark);font-size:1.1rem;margin-bottom:6px}