/* Fil: wp-content/themes/helmia-twentyfive/assets/css/helmia-2026.css
 * Helmia Design System 2026 – sektionslager ovanpå temat.
 * Aktiveras med body.hds-2026 (redaktör / ?hds=1).
 * ORÖRT: topheader, .helmia-hero, .site-footer (inga regler för dessa).
 * Scope: main + .helmia-cta-band (innehåll före footer).
 * Live-klass: .helmia-quick-actions (= tjänsterad / service-strip i facit).
 */

/* ---- Tokens (självständiga under hds-2026) ---- */
body.hds-2026 {
  --hds-ink: #14171a;
  --hds-muted: #4f5a65;
  --hds-link: #015bd9;
  --hds-blue-700: #001c89;
  --hds-blue-900: #000a32;
  --hds-sand: #f7f1e8;
  --hds-sand-line: #e9dfcf;
  --hds-persika: #ffe0cf;
  --hds-aprikos: #ff8a5c;
  --hds-is: #e3f7ef;
  --hds-mint: #6fd8b0;
  --hds-himmel: #cfe3ff;
  --hds-grad-sand: radial-gradient(ellipse 120% 95% at 100% 0%, rgba(255, 217, 196, 0.9) 0%, rgba(255, 217, 196, 0.55) 28%, rgba(255, 217, 196, 0.18) 60%, rgba(255, 217, 196, 0) 100%), radial-gradient(ellipse 100% 75% at 0% 100%, rgba(227, 247, 239, 0.85) 0%, rgba(227, 247, 239, 0.3) 50%, rgba(227, 247, 239, 0) 100%), #f7f1e8;
  --hds-grad-is: radial-gradient(ellipse 120% 95% at 100% 0%, rgba(207, 227, 255, 0.85) 0%, rgba(207, 227, 255, 0.5) 28%, rgba(207, 227, 255, 0.16) 60%, rgba(207, 227, 255, 0) 100%), radial-gradient(ellipse 100% 70% at 0% 100%, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 100%), #e6f6ef;
  --hds-grad-persika: radial-gradient(ellipse 120% 95% at 100% 0%, rgba(255, 205, 181, 0.85) 0%, rgba(255, 205, 181, 0.5) 28%, rgba(255, 205, 181, 0.16) 60%, rgba(255, 205, 181, 0) 100%), radial-gradient(ellipse 100% 75% at 0% 100%, rgba(247, 241, 232, 1) 0%, rgba(247, 241, 232, 0) 100%), #fbede3;
  --hds-grad-himmel: radial-gradient(ellipse 120% 95% at 100% 0%, rgba(183, 203, 255, 0.75) 0%, rgba(183, 203, 255, 0.45) 28%, rgba(183, 203, 255, 0.14) 60%, rgba(183, 203, 255, 0) 100%), radial-gradient(ellipse 100% 75% at 0% 100%, rgba(227, 247, 239, 0.7) 0%, rgba(227, 247, 239, 0) 100%), #eef3ff;
  --hds-grad-blue: radial-gradient(ellipse 130% 95% at 100% 0%, rgba(79, 128, 234, 0.62) 0%, rgba(79, 128, 234, 0.38) 28%, rgba(79, 128, 234, 0.12) 60%, rgba(79, 128, 234, 0) 100%), radial-gradient(ellipse 90% 70% at 0% 100%, rgba(111, 216, 176, 0.16) 0%, rgba(111, 216, 176, 0.06) 50%, rgba(111, 216, 176, 0) 100%), linear-gradient(165deg, #0a3fb8 0%, #001c89 55%, #00125e 100%);
  --hds-grad-navy: radial-gradient(ellipse 120% 90% at 100% 0%, rgba(10, 63, 184, 0.7) 0%, rgba(10, 63, 184, 0.42) 28%, rgba(10, 63, 184, 0.13) 60%, rgba(10, 63, 184, 0) 100%), radial-gradient(ellipse 90% 70% at 0% 100%, rgba(207, 227, 255, 0.12) 0%, rgba(207, 227, 255, 0) 100%), linear-gradient(170deg, #00125e 0%, #000a32 70%);
  --hds-radius-card: 12px;
  --hds-radius-btn: 999px;
  --hds-radius-field: 4px;
  --hds-touch: 44px;
  --hds-content-max: 1280px;
  --hds-prose-max: 720px;
}

/* Preview-markör (synlig bara när lagret är på via ?hds / redaktör) */
body.hds-2026::before {
  content: "Helmia 2026 – stäng med ?hds=0";
  position: fixed;
  z-index: 99999;
  left: 0.75rem;
  bottom: 0.75rem;
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  background: var(--hds-blue-900);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  pointer-events: none;
}

/* ==========================================================================
   Del 4 – Globala regler (bara i main, hoppa över hero)
   ========================================================================== */

body.hds-2026 main :is(h1, h2, h3, h4, h5, h6):not(.helmia-hero *) {
  color: var(--hds-ink);
}

body.hds-2026 main :is(
  .is-style-helmia-blue,
  .is-style-helmia-navy,
  [class*="is-style-helmia-blue"],
  [class*="is-style-helmia-navy"]
) :is(h1, h2, h3, h4, h5, h6) {
  color: #fff;
}

/* Sektionsrubriker. Kortrubriker (campaign-card, explore-card, brand-card,
 * vehicle-title, anstallda-card) ska INTE ha eyebrow eller streck - de ar
 * inte sektionsrubriker. */
body.hds-2026 main .helmia-section-heading__title,
body.hds-2026 main .helmia-section-intro__title,
body.hds-2026 main .helmia-media-split__title,
body.hds-2026 main .is-style-helmia-heading {
  color: var(--hds-ink);
  font-weight: 500;
}

body.hds-2026 main .helmia-section-heading__category,
body.hds-2026 main .helmia-section-heading__eyebrow,
body.hds-2026 main .helmia-section-intro__category,
body.hds-2026 main .helmia-media-split__eyebrow {
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hds-muted);
}

body.hds-2026 main .helmia-section-heading__title::after,
body.hds-2026 main .helmia-section-intro__title::after,
body.hds-2026 main .helmia-media-split__title::after,
body.hds-2026 main .is-style-helmia-heading::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin-top: 0.75rem;
  background: currentColor;
}

/* Knappform: kapsel 999 px pa temats faktiska knappklasser.
 * Undantag: .helmia-hero__* (hero ar orort) och .helmia-model-* /
 * .helmia-brand-model-* (market tar over knappform pa markessidor). */
body.hds-2026 main :is(
  .btn,
  .wp-block-button__link,
  button[type="submit"],
  input[type="submit"],
  .helmia-cta-banner__btn,
  .helmia-cta-callout__btn,
  .helmia-cta-dackhotell__link,
  .helmia-media-split__cta,
  .helmia-vehicle-stream__btn,
  .helmia-explore-card__cta,
  .helmia-brand-card__cta,
  .helmia-trust-badges__cta,
  .helmia-favorites__link
):not(.helmia-hero *) {
  border-radius: var(--hds-radius-btn) !important;
  font-weight: 600;
  min-height: var(--hds-touch);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

body.hds-2026 main a:not(.btn):not(.wp-block-button__link):not(.helmia-quick-actions__item):not(.helmia-cta-band__btn):not(.helmia-card):not(.helmia-phone-directory__link):not([href^="tel:"]) {
  color: var(--hds-link);
}

body.hds-2026 main .entry-content a:hover,
body.hds-2026 main .helmia-page-content a:hover {
  text-decoration: underline;
}

body.hds-2026 main a.helmia-phone-directory__link,
body.hds-2026 main a[href^="tel:"] {
  color: var(--hds-blue-700);
  text-decoration: none;
  font-weight: 600;
}

body.hds-2026 main a.helmia-phone-directory__link:hover,
body.hds-2026 main a[href^="tel:"]:hover {
  text-decoration: underline;
}

/* Katalog: formatchip-högar döljs; synliga alts-raden behålls. */
body.hds-2026 main .helmia-phone-directory .helmia-phone-format-chips {
  display: none !important;
}

body.hds-2026 main .helmia-phone-directory__alts {
  color: var(--hds-ink-muted, #4F5A65);
}

body.hds-2026 main .entry-content > :is(p, ul, ol),
body.hds-2026 main .helmia-prose,
body.hds-2026 main .helmia-page-intro__text {
  max-width: var(--hds-prose-max);
}

body.hds-2026.page-id-61018 main .helmia-page-intro {
  background-color: transparent;
  background-image: var(--helmia-grad-sand, #F7F1E8);
  border-bottom: 1px solid var(--border-light, #E5E9F0);
}

body.hds-2026.page-id-61018 main .helmia-page-intro__title,
.page-id-61018 .helmia-page-intro__title {
  color: var(--text-primary, #14171A) !important;
}

body.hds-2026.page-id-61018 main .helmia-page-intro__title::after,
.page-id-61018 .helmia-page-intro__title::after {
  content: '';
  display: block;
  width: var(--helmia-heading-accent-width, 2.5rem);
  height: var(--helmia-heading-accent-height, 3px);
  margin-top: var(--helmia-heading-accent-margin-top, 0.75rem);
  background: var(--text-primary, #14171A);
}

/* Sand-header även utan hds-2026-klass */
.page-id-61018 .helmia-page-intro {
  background-color: var(--helmia-sand, #F7F1E8) !important;
  background-image: var(--helmia-grad-sand) !important;
}

body.hds-2026 main .helmia-container,
body.hds-2026 main .helmia-card-grid {
  max-width: var(--hds-content-max);
}

body.hds-2026 main :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: var(--hds-touch);
  border-radius: var(--hds-radius-field);
}

body.hds-2026 main :is(input, select, textarea):focus {
  outline: 2px solid var(--hds-blue-700);
  outline-offset: 2px;
}

/* ==========================================================================
   Blockstilar – sektionsytor (core/group)
   ========================================================================== */

body.hds-2026 main .is-style-helmia-sand,
body.hds-2026 main .wp-block-group.is-style-helmia-sand {
  background: var(--hds-grad-sand) !important;
  color: var(--hds-ink);
}

body.hds-2026 main .is-style-helmia-is,
body.hds-2026 main .wp-block-group.is-style-helmia-is {
  background: var(--hds-grad-is) !important;
  color: var(--hds-ink);
}

body.hds-2026 main .is-style-helmia-persika,
body.hds-2026 main .wp-block-group.is-style-helmia-persika {
  background: var(--hds-grad-persika) !important;
  color: var(--hds-ink);
}

body.hds-2026 main .is-style-helmia-himmel,
body.hds-2026 main .wp-block-group.is-style-helmia-himmel {
  background: var(--hds-grad-himmel) !important;
  color: var(--hds-ink);
}

body.hds-2026 main .is-style-helmia-blue,
body.hds-2026 main .wp-block-group.is-style-helmia-blue {
  background: var(--hds-grad-blue) !important;
  color: #fff;
}

body.hds-2026 main .is-style-helmia-navy,
body.hds-2026 main .wp-block-group.is-style-helmia-navy {
  background: var(--hds-grad-navy) !important;
  color: #fff;
}

body.hds-2026 main .wp-block-image.is-style-helmia-sned img,
body.hds-2026 main .helmia-card__image {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 0 100%);
}

/* ==========================================================================
   Quick actions (meny under hero) – INGEN gradient. Behåll temats yta.
   ========================================================================== */

body.hds-2026 main .helmia-home-section--quick-actions,
body.hds-2026 main .helmia-home-section--quick-actions.helmia-home-section--bg-custom,
body.hds-2026 main .helmia-quick-actions {
  background-image: none !important;
}

body.hds-2026 main .helmia-quick-actions__item {
  color: var(--hds-ink);
}

body.hds-2026 main .helmia-quick-actions__item:hover {
  background: #fff;
}

body.hds-2026 main .helmia-quick-actions__icon,
body.hds-2026 main .helmia-quick-actions__item svg,
body.hds-2026 main .helmia-quick-actions__item .helmia-icon {
  color: var(--hds-blue-700);
  stroke: currentColor;
}

/* ==========================================================================
   2–6) Kort (photo / kampanj / ort) – utilities
   ========================================================================== */

body.hds-2026 main .helmia-card {
  background: #fff;
  border-radius: var(--hds-radius-card);
  box-shadow: 0 2px 8px rgba(0, 10, 50, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  color: var(--hds-ink);
}

body.hds-2026 main .helmia-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 10, 50, 0.12);
}

body.hds-2026 main .helmia-card--persika {
  background: var(--hds-persika);
}

/* Temats befintliga kort far 2026-form: radie 12 px och hover-lyft.
 * Undantag: .helmia-brand-model-card och .helmia-model-* (markesagda). */
body.hds-2026 main :is(
  .helmia-campaign-card,
  .helmia-explore-card,
  .helmia-brand-offer-card,
  .helmia-brand-card,
  .helmia-vehicle-card,
  .helmia-flex-card
) {
  border-radius: var(--hds-radius-card);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.hds-2026 main :is(
  .helmia-campaign-card,
  .helmia-explore-card,
  .helmia-brand-offer-card,
  .helmia-brand-card,
  .helmia-vehicle-card,
  .helmia-flex-card
):hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 10, 50, 0.12);
}

/* Sned underkant pa kortbilder. Bildomslaget maskeras, inte hela kortet,
 * sa text och knappar behaller rak baslinje. */
body.hds-2026 main :is(
  .helmia-campaign-card__image-wrap,
  .helmia-explore-card__image-wrap,
  .helmia-brand-offer-card__image-wrap,
  .helmia-vehicle-image-container
) {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), 0 100%);
}

/* Kortrubriker: ren text utan streck (streck hor till sektionsrubriker). */
body.hds-2026 main :is(
  .helmia-campaign-card__title,
  .helmia-explore-card__heading,
  .helmia-brand-offer-card__title,
  .helmia-brand-card__title,
  .helmia-vehicle-title,
  .helmia-related-services__card-title
)::after {
  content: none;
}

/* Kortbadge: aprikos med mork text i stallet for mork halvtransparent platta. */
body.hds-2026 main :is(
  .helmia-department-offers__badge,
  .helmia-explore-card__badge,
  .helmia-campaign-card__badge
) {
  background: var(--hds-aprikos) !important;
  color: var(--hds-blue-900) !important;
  border-radius: var(--hds-radius-btn);
  font-weight: 600;
}

/* Pris i kort: halvfet, aldrig Helmia-bla. */
body.hds-2026 main :is(
  .helmia-brand-offer-card__price,
  .helmia-vehicle-price
) {
  color: var(--hds-ink);
  font-weight: 600;
}

body.hds-2026 main .helmia-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  border-radius: var(--hds-radius-btn);
  background: var(--hds-aprikos);
  color: var(--hds-blue-900);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.2;
}

body.hds-2026 main .helmia-tag--mint {
  background: var(--hds-mint);
  color: var(--hds-ink);
}

body.hds-2026 main .helmia-chip {
  display: inline-flex;
  align-items: center;
  min-height: var(--hds-touch);
  padding: 0.5rem 1rem;
  border-radius: var(--hds-radius-btn);
  border: 2px solid var(--hds-blue-700);
  background: transparent;
  color: var(--hds-blue-700);
  font-weight: 600;
  cursor: pointer;
}

body.hds-2026 main .helmia-chip[aria-pressed="true"],
body.hds-2026 main .helmia-chip.is-active {
  background: var(--hds-blue-700);
  color: #fff;
}

body.hds-2026 main .helmia-chip:focus-visible {
  outline: 2px solid var(--hds-blue-700);
  outline-offset: 2px;
}

/* Ingen auto-sand på grå sektioner / brands / explore.
 * Gradient bara via Gutenberg-blockstil (is-style-helmia-*).
 * Aldrig två samma gradientytor i rad – redaktör väljer rytm. */

/* Märkeslandning: inga Helmia-gradienter på märkesmoduler */
body.hds-2026 main.helmia-brand-landing .is-style-helmia-sand,
body.hds-2026 main.helmia-brand-landing .is-style-helmia-is,
body.hds-2026 main.helmia-brand-landing .is-style-helmia-persika,
body.hds-2026 main.helmia-brand-landing .is-style-helmia-himmel,
body.hds-2026 main.helmia-brand-landing .is-style-helmia-blue,
body.hds-2026 main.helmia-brand-landing .is-style-helmia-navy {
  background-image: none !important;
}

/* ==========================================================================
   7) CTA-band – platt vit yta före blå footer (ingen sand-gradient).
   Opt-in blått mitt på sida: .helmia-cta-band--blue
   ========================================================================== */

body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) {
  background: #fff !important;
  background-image: none !important;
  color: var(--hds-ink);
}

body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__title,
body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) h2 {
  color: var(--hds-ink);
}

body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__title::after,
body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) h2::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0.75rem auto 0;
  background: currentColor;
}

body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__text,
body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) p {
  color: var(--hds-muted);
  opacity: 1;
}

body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__btn {
  background: #fff;
  color: var(--hds-blue-700);
  border: 1px solid var(--hds-sand-line);
  border-radius: var(--hds-radius-card);
  box-shadow: 0 2px 8px rgba(0, 10, 50, 0.08);
  min-height: var(--hds-touch);
}

body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__icon,
body.hds-2026 .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__label {
  color: var(--hds-blue-700);
}

body.hds-2026 .helmia-cta-band--blue {
  background: var(--hds-grad-blue) !important;
  color: #fff;
}

body.hds-2026 .helmia-cta-band--blue .helmia-cta-band__title,
body.hds-2026 .helmia-cta-band--blue h2 {
  color: #fff;
}

body.hds-2026 .helmia-cta-band--blue .helmia-cta-band__btn {
  border-radius: var(--hds-radius-btn);
  min-height: var(--hds-touch);
}

/* Standardsida: CTA vit = svart rubrik */
body.hds-2026 .helmia-standard-page .helmia-entry-content .helmia-cta-band:not(.helmia-cta-band--blue) h2,
body.hds-2026 .helmia-standard-page .helmia-entry-content .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__title {
  color: var(--hds-ink);
}

body.hds-2026 .helmia-standard-page .helmia-entry-content .helmia-cta-band:not(.helmia-cta-band--blue) h2::after,
body.hds-2026 .helmia-standard-page .helmia-entry-content .helmia-cta-band:not(.helmia-cta-band--blue) .helmia-cta-band__title::after {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  margin: 0.75rem auto 0;
  background: currentColor;
}

@media (max-width: 768px) {
  body.hds-2026::before {
    font-size: 0.65rem;
    max-width: calc(100vw - 1.5rem);
  }
}