/* ==========================================================================
   home-clean.css · ChopChop landing page colour reset · 1 October 2026
   Direction: https://claude.ai/artifact/2DLq44629o3SNozuF9jAga

   INSTALL
   1. Save this file next to the other stylesheets (style.css, apple.css,
      blue-theme.css, footer.css, restaurant-order.css ...).
   2. Register it the same way those are registered, as the LAST base
      stylesheet (after restaurant-order). Nothing else needs to change.
   3. To switch the whole change off, remove that one registration line.

   This file only adds overrides. It does not need any component (TSX)
   edits: the button order, chevrons, footer logo and footer order are all
   handled here against the current live markup. !important is used only
   where an existing rule has higher specificity or loads later
   (home-hero.css is a page-level sheet that loads after the base sheets).
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  --paper: #FDFCFA;
  --order-blue: #1C4E9D;
  --order-blue-hover: #1E2F77;

  --cc-canvas: #FDFCFA;   /* page, header, lunch notice, order strip, categories */
  --cc-stone: #F3F1ED;    /* sushi / poké / dessert / people tiles */
  --cc-stage: #C8D5E2;    /* Korean Fried Chicken stage, the one tinted block */
  --cc-cobalt: #1C4E9D;   /* ordering, links, finder */
  --cc-navy: #1E2F77;     /* hover / pressed */
  --cc-ink: #1d1d1f;
  --cc-muted: #6b6b6b;
  --cc-line: #E6E3DE;
  --cc-red: #E83C3C;      /* lunch dot only */
}

/* ---------- Canvas, header, lunch notice ---------- */
body { background: var(--cc-canvas); }

.site-header { background: var(--cc-canvas) !important; border-bottom: 1px solid var(--cc-line); box-shadow: none; }
.desktop-nav a { color: var(--cc-ink); }
.header-location { color: var(--cc-muted); }
.header-actions .button.order-cta:hover { background: var(--cc-navy) !important; border-color: var(--cc-navy) !important; }

.lunch-notice { background: var(--cc-canvas) !important; border-bottom: 1px solid var(--cc-line); color: var(--cc-ink); }
.lunch-notice-label { color: var(--cc-ink); border-color: var(--cc-line); }
.lunch-notice-label::before {
  content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--cc-red); margin-right: 7px; vertical-align: middle;
}

.button.order-cta:not(.outline):not(.glass):not(.light) { box-shadow: none; }
.order-cta:focus-visible, .finder-page .order-link:focus-visible { outline: 2px solid var(--cc-cobalt); outline-offset: 3px; }

/* ---------- Arrows and chevrons: never underlined, centred, nudge on hover ---------- */
a > span[aria-hidden="true"], a > svg { display: inline-block; text-decoration: none !important; }
.apple-link, .apple-link:hover { text-decoration: none !important; }
.apple-link span { line-height: 1; transform: translateY(-1px); }
.apple-link:hover span { transform: translate(3px, -1px); }

/* Hero "Se menyn ›": underline under the words only */
html body .home-hero-link {
  text-decoration: none !important;
  background: linear-gradient(#ffffffb3, #ffffffb3) no-repeat left calc(50% + 13px) / calc(100% - 19px) 2px;
}
html body .home-hero-link:hover { background-image: linear-gradient(#fff, #fff); }
html body .home-hero-link span { display: inline-block; line-height: 1; text-decoration: none !important; transform: translateY(-2px); }
html body .home-hero-link:hover span { transform: translate(3px, -2px); }

/* ---------- Order strip under the hero: canvas row, text link ---------- */
.combined-order-strip.action-spotlight {
  --spotlight-bg: var(--cc-canvas); --spotlight-text: var(--cc-ink); --spotlight-muted: var(--cc-muted);
  background: var(--cc-canvas) !important; border: 0; border-bottom: 1px solid var(--cc-line);
}
.combined-order-strip.action-spotlight > div > svg { color: var(--cc-cobalt); }
.combined-order-strip.action-spotlight > .apple-link {
  background: transparent; border: 0; border-radius: 0; padding: 0; gap: 6px; color: var(--cc-cobalt); font-size: 15px;
}
.combined-order-strip.action-spotlight > .apple-link:hover {
  background: transparent !important; border-color: transparent !important; color: var(--cc-cobalt) !important;
  font-weight: 700; text-decoration: none !important;
}
.combined-order-strip.action-spotlight a:focus-visible { outline: 2px solid var(--cc-cobalt); outline-offset: 4px; border-radius: 4px; }

/* ---------- Categories ---------- */
.combined-order-strip + .apple-menu { background: var(--cc-canvas); }
.apple-menu .apple-section-heading h2, .apple-menu .category-tile h3 { color: var(--cc-ink); }
.apple-menu .category-photo img { filter: none; }
.apple-section-heading .apple-link:hover { color: var(--cc-navy); }

/* ---------- Korean Fried Chicken stage ---------- */
.apple-korean, .product-spotlight { background: var(--cc-stage) !important; background-image: none !important; color: var(--cc-ink); }
.product-spotlight h2 { color: var(--cc-ink); }
.product-spotlight .apple-stage-copy > p { color: #3a4a60; }
.product-spotlight .apple-kicker, .apple-korean .apple-kicker { color: #56687f; }

/* ---------- Block actions (stage + tiles) ----------
   Live markup: [discover = .button.primary] [Beställ = .button.outline]
   Result:      [Beställ outline, first] [discover text link ›]          */
.apple-actions .button.outline {
  order: -1;
  background: transparent !important; border: 1px solid var(--cc-cobalt) !important; color: var(--cc-cobalt) !important;
  box-shadow: none;
}
.apple-actions .button.outline:hover { background: var(--cc-cobalt) !important; border-color: var(--cc-cobalt) !important; color: #fff !important; }
.apple-actions .button.outline:active { background: var(--cc-navy) !important; border-color: var(--cc-navy) !important; color: #fff !important; }

.apple-actions .button.primary {
  background: transparent !important; border-color: transparent !important; color: var(--cc-ink) !important;
  box-shadow: none; padding-inline: 4px;
}
.apple-actions .button.primary:hover { color: var(--cc-cobalt) !important; text-decoration: none !important; }
.apple-actions .button.primary::after {
  content: '\203A'; display: inline-block; margin-left: 6px; font-size: 1.3em; line-height: 1; transform: translateY(-2px);
}
.apple-actions .button.primary:hover::after { transform: translate(3px, -2px); }
.apple-actions .button:focus-visible { outline: 2px solid var(--cc-cobalt); outline-offset: 3px; }

/* ---------- Tiles: warm stone, straight corners ---------- */
.apple-tile, .apple-sushi, .apple-poke, .apple-dessert { background: var(--cc-stone) !important; border: 0; }
.apple-tile, .apple-photo-tile { border-radius: 0 !important; }
.apple-tile h2 { color: var(--cc-ink); }
.apple-tile-copy > p { color: var(--cc-muted); }
.apple-tile .apple-kicker, .apple-poke .apple-kicker, .apple-dessert .apple-kicker { color: var(--cc-muted); }
.apple-dessert .apple-kicker:before { content: none; }

/* People tile: scrim above the photo so "Hej från köket" reads */
.apple-photo-tile::after, .apple-people::after {
  z-index: 0;
  background: linear-gradient(rgba(8,11,18,.82) 0%, rgba(8,11,18,.6) 40%, rgba(8,11,18,.2) 70%, rgba(8,11,18,0) 100%);
}
.apple-photo-tile .apple-tile-copy { position: relative; z-index: 1; text-shadow: 0 1px 10px rgba(0,0,0,.35); }
.apple-photo-tile h2, .apple-photo-tile .apple-tile-copy > p, .apple-photo-tile .apple-kicker { color: #fff; }

/* ---------- Finder "Kom hungrig": cobalt, photo left ---------- */
.apple-finder .home-finder-media { order: -1; }
.apple-finder.action-spotlight {
  --spotlight-bg: var(--cc-cobalt); --spotlight-text: #fff; --spotlight-muted: #d6e0f0;
  background: var(--cc-cobalt) !important; background-image: none !important;
}
.apple-finder.action-spotlight .apple-kicker { color: #d6e0f0; }
.apple-finder.action-spotlight form { background: #fff; border: 1px solid #fff; box-shadow: none; }
.apple-finder.action-spotlight button { background: var(--cc-cobalt); color: #fff; }
.apple-finder.action-spotlight button:hover { background: var(--cc-navy); }
.apple-finder.action-spotlight .apple-finder-copy > .apple-link,
.apple-finder.action-spotlight .apple-finder-copy > .apple-link:hover { color: #fff; }

/* ---------- Footer: no logo, shorter, colour shift on hover ---------- */
.compact-footer .footer-directory > .brand { display: none; }
.compact-footer-inner { padding-block: 28px 20px; }
.footer-directory { gap: 18px; }
.compact-footer a:hover, .compact-footer a:focus-visible { text-decoration: none !important; color: var(--cc-cobalt); }
.compact-footer a:focus-visible { outline: 2px solid var(--cc-cobalt); outline-offset: 4px; }

/* ---------- Motion, only for people who allow it ---------- */
@media (prefers-reduced-motion: no-preference) {
  .apple-link span, html body .home-hero-link span,
  .apple-actions .button.primary::after { transition: transform .18s ease; }
  .apple-actions .button.outline { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
}

/* ---------- Phones ---------- */
@media (max-width: 700px) {
  /* Footer link order on phones: Om oss, Kontakt, Aktuellt, Vanliga frågor, Jobba med oss, Produktinformation */
  .compact-footer .footer-links a:nth-child(1) { order: 1; }
  .compact-footer .footer-links a:nth-child(5) { order: 2; }
  .compact-footer .footer-links a:nth-child(2) { order: 3; }
  .compact-footer .footer-links a:nth-child(4) { order: 4; }
  .compact-footer .footer-links a:nth-child(6) { order: 5; }
  .compact-footer .footer-links a:nth-child(3) { order: 6; }
}
@media (max-width: 600px) {
  .combined-order-strip.action-spotlight > .apple-link { padding: 0 !important; }
}