:root {
    /* Semantic color tokens — endre farger i theme.json, ikke her */
    --color-primary:       var(--wp--preset--color--broom-500);    /* primær, CTA, knapper, lenker */
    --color-primary-hover: var(--wp--preset--color--brand-amber);  /* hover-state */
    --color-bg-dark:       var(--wp--preset--color--brand-black);  /* header, footer */
    --color-text-on-dark:  var(--wp--preset--color--white);        /* tekst på mørk bakgrunn */
    --color-danger:        var(--wp--preset--color--brand-red);
    --color-text:          var(--wp--preset--color--neutral-dark); /* brødtekst */
    --color-bg-light:      var(--wp--preset--color--neutral-light);/* lys seksjonsbakgrunn */

    /* Legacy aliases — beholdt for bakoverkompatibilitet i templates */
    --color-black:  var(--color-bg-dark);
    --color-yellow: var(--color-primary);
    --color-amber:  var(--color-primary-hover);
    --color-red:    var(--color-danger);
    --color-white:  var(--color-text-on-dark);

    --font-base: var(--wp--preset--font-family--figtree);
}

/* --- Text colors --- */
.color-white, .color-white:hover { color: var(--color-text-on-dark); }
.color-black, .color-black:hover { color: var(--color-bg-dark); }
.color-yellow, .color-yellow:hover { color: var(--color-primary); }
.color-amber  { color: var(--color-primary-hover); }
.color-red    { color: var(--color-danger); }
.color-text   { color: var(--color-text); }

/* --- Background colors --- */
.bg-black   { background-color: var(--color-bg-dark); }
.bg-yellow  { background-color: var(--color-primary); }
.bg-amber   { background-color: var(--color-primary-hover); }
.bg-red     { background-color: var(--color-danger); }
.bg-light   { background-color: var(--color-bg-light); }
.bg-white   { background-color: var(--color-text-on-dark); }

/* --- Border colors --- */
.border-yellow { border-color: var(--color-primary); }
.border-red    { border-color: var(--color-danger); }
.border-black  { border-color: var(--color-bg-dark); }

/* --- Buttons --- */
.btn-primary-mopedbilmysen {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
    border: none;
    font-weight: 600;
}

.btn-primary-mopedbilmysen:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-bg-dark);
}

button.btn-primary-mopedbilmysen > a,
.btn-primary-mopedbilmysen > a {
    color: var(--color-bg-dark);
    text-decoration: none;
}

button.btn-primary-mopedbilmysen > a:hover,
.btn-primary-mopedbilmysen > a:hover {
    text-decoration: underline;
}

.btn-outline-yellow {
    background-color: transparent;
    color: var(--color-primary);
    border: 2px solid var(--color-primary);
    font-weight: 600;
}

.btn-outline-yellow:hover {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
    border-color: var(--color-primary);
}

/* --- WP block button outline style ---
   theme.json sets border-width: 0 on all buttons — override for is-style-outline */
.wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent !important;
    border-width: 2px !important;
    border-style: solid !important;
    border-color: currentColor !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-bg-dark) !important;
    border-color: var(--color-primary) !important;
}

/* --- Links --- */
a {
    color: var(--color-primary);
}

a:hover {
    color: var(--color-primary-hover);
}

/* --- Navbar --- */
#mopedbilmysen-navbar {
    background-color: var(--color-bg-dark);
}

/* CTA-knapp i navbar — legg klassen "nav-cta" på menypunktet i WP-admin */
#mopedbilmysen-navbar .nav-item.nav-cta .nav-link {
    background-color: var(--color-primary);
    color: var(--color-bg-dark) !important;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
}

#mopedbilmysen-navbar .nav-item.nav-cta .nav-link:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-bg-dark) !important;
}

/* SVG logo inline */
a.navbar-brand .navbar-brand-svg {
    width: 350px;
    height: auto;
    fill: var(--color-primary) !important;
}

/* Fallback for img logo (non-SVG) */
a.navbar-brand img {
    width: 350px;
    height: auto;
}

#mopedbilmysen-navbar .nav-link {
    color: var(--color-primary) !important;
}

#mopedbilmysen-navbar .nav-link:hover {
    color: var(--color-primary-hover) !important;
    font-weight: bold;
    border-bottom: 4px solid var(--color-primary);
}

#mopedbilmysen-navbar .nav-link.nav-link-black,
#mopedbilmysen-navbar .nav-link.nav-link-black:hover {
    color: var(--color-bg-dark) !important;
    border-bottom: none;
}

/* --- Footer --- */
footer {
    background-color: var(--color-bg-dark);
    color: var(--color-text-on-dark);
}

footer a,
footer a:hover {
    color: var(--color-primary);
}

footer h1, footer h2, footer h3, footer h4, footer h5 {
    color: var(--color-text-on-dark);
}

/* --- Highlighted sections --- */
.section-highlight {
    background-color: var(--color-primary-hover);
}

/* --- Utility: mopedbilmysen color classes (for backward compat in templates) --- */
.mopedbilmysen-brand-primary-background-color {
    background-color: var(--color-primary);
    color: var(--color-bg-dark);
}

.mopedbilmysen-brand-primary-background-color:hover {
    background-color: var(--color-primary-hover);
}

button.mopedbilmysen-brand-primary-background-color > a {
    color: var(--color-bg-dark);
    text-decoration: none;
}

button.mopedbilmysen-brand-primary-background-color > a:hover {
    text-decoration: underline;
}

.mopedbilmysen-dark-shades-60-primary-color { color: var(--color-bg-dark); }
.mopedbilmysen-dark-shades-50-primary-color { color: #1a1a1a; }
.mopedbilmysen-dark-shades-40-primary-color { color: var(--color-text); }
.mopedbilmysen-dark-shades-20-primary-color { color: #555555; }

.mopedbilmysen-light-tint-60-primary-color  { color: var(--color-primary-hover); }
.mopedbilmysen-light-tint-40-primary-color  { color: #fee8bc; }
.mopedbilmysen-light-tint-20-primary-color  { color: #fff3dd; }
.mopedbilmysen-brand-primary-color          { color: var(--color-primary); }

.mopedbilmysen-dark-shades-60-primary-background-color { background-color: var(--color-bg-dark); }
.mopedbilmysen-dark-shades-50-primary-background-color { background-color: #1a1a1a; }
.mopedbilmysen-dark-shades-40-primary-background-color { background-color: var(--color-text); }
.mopedbilmysen-dark-shades-20-primary-background-color { background-color: #555555; }

.mopedbilmysen-light-tint-60-primary-background-color  { background-color: var(--color-primary-hover); }
.mopedbilmysen-light-tint-40-primary-background-color  { background-color: #fee8bc; }
.mopedbilmysen-light-tint-20-primary-background-color  { background-color: #fff3dd; }
.mopedbilmysen-light-tint-10-primary-background-color  { background-color: #fffbee; }

/* --- WPForms --- */

/* Override WPForms injected CSS variables */
[id^="wpforms-"] {
    --wpforms-label-color: var(--color-primary) !important;
    --wpforms-label-sublabel-color: var(--color-primary-hover) !important;
    --wpforms-field-background-color: var(--color-text-on-dark) !important;
    --wpforms-field-border-color: #cccccc !important;
    --wpforms-field-text-color: var(--color-bg-dark) !important;
    --wpforms-button-background-color: var(--color-primary) !important;
    --wpforms-button-text-color: var(--color-bg-dark) !important;
    --wpforms-button-border-color: var(--color-primary) !important;
}

/* Fallback direct property overrides */
.ic-wpform-form-adjustments .wpforms-field-label {
    color: var(--color-primary) !important;
}

.ic-wpform-form-adjustments input[type="text"],
.ic-wpform-form-adjustments input[type="number"],
.ic-wpform-form-adjustments fieldset[disabled] input[type="text"],
.ic-wpform-form-adjustments fieldset[disabled] input[type="number"] {
    background-color: var(--color-text-on-dark) !important;
    color: var(--color-bg-dark) !important;
    border: 1px solid #cccccc !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--color-bg-dark) !important;
}

.ic-wpform-form-adjustments input[type="text"]:focus,
.ic-wpform-form-adjustments input[type="number"]:focus {
    border-color: var(--color-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 237, 0, 0.4);
}

.ic-wpform-submit-button-adjustments {
    background-color: var(--color-primary) !important;
    color: var(--color-bg-dark) !important;
    border: none !important;
    font-weight: 600;
    margin-left: auto !important;
    display: block !important;
}

.ic-wpform-submit-button-adjustments:hover {
    background-color: var(--color-primary-hover) !important;
}

.ic-wpform-adjustments .wpforms-field,
.ic-wpform-form-adjustments .wpforms-field {
    padding-bottom: 16px !important;
}

.ic-wpform-adjustments .wpforms-submit-container {
    display: flex !important;
    justify-content: flex-end !important;
}

.ic-wpform-submit-button-adjustments {
    margin-left: auto !important;
    display: block !important;
}

/* --- Cards med mørk bakgrunn --- */
.card.bg-black .card-title a {
    color: var(--color-primary);
}

.card.bg-black .card-title a:hover {
    color: var(--color-primary-hover);
}

.card.bg-black .card-text {
    color: var(--color-primary-hover);
}

.card.bg-black .card-footer {
    color: var(--color-primary);
    border-top-color: var(--color-text);
}

.card.bg-black .card-footer strong {
    color: var(--color-primary);
}

/* --- Brand color scale (neutral grays) --- */
.color-brand-color-800, .has-brand-color-800-color { color: #1f2937; }
.color-brand-color-700, .has-brand-color-700-color { color: #374151; }
.color-brand-color-600, .has-brand-color-600-color { color: #4b5563; }
.color-brand-color-500, .has-brand-color-500-color { color: #6b7280; }
.color-brand-color-400, .has-brand-color-400-color { color: #9ca3af; }
.color-brand-color-300, .has-brand-color-300-color { color: #d1d5db; }
.color-brand-color-200, .has-brand-color-200-color { color: #e5e7eb; }
.color-brand-color-100, .has-brand-color-100-color { color: #f3f4f6; }
.color-brand-color-50,  .has-brand-color-50-color  { color: #f9fafb; }

.background-color-brand-color-800, .has-brand-color-800-background-color { background-color: #1f2937; }
.background-color-brand-color-700, .has-brand-color-700-background-color { background-color: #374151; }
.background-color-brand-color-600, .has-brand-color-600-background-color { background-color: #4b5563; }
.background-color-brand-color-500, .has-brand-color-500-background-color { background-color: #6b7280; }
.background-color-brand-color-400, .has-brand-color-400-background-color { background-color: #9ca3af; }
.background-color-brand-color-300, .has-brand-color-300-background-color { background-color: #d1d5db; }
.background-color-brand-color-200, .has-brand-color-200-background-color { background-color: #e5e7eb; }
.background-color-brand-color-100, .has-brand-color-100-background-color { background-color: #f3f4f6; }
.background-color-brand-color-50,  .has-brand-color-50-background-color  { background-color: #f9fafb; }