/* ==========================================================================
   CLA 2026 visual refresh
   Added 2026-08-28. Loads after the parent Scalia stylesheet.
   CSS only: no markup, WPBakery, WPML or database changes.

   NOTE: the parent theme sets html { font-size: 10px }, so this file uses px
   throughout. Any rem value here would render at 62.5% of its intended size.

   To revert: delete css/cla-2026.css and the cla_2026_styles block in
   the child theme functions.php.
   ========================================================================== */

:root {
  --cla-red:    #dc1e34;   /* sampled from the live site, unchanged */
  --cla-red-d:  #b31728;
  --cla-red-l:  #ff6b7a;   /* lifted, for small text on dark grounds */
  --cla-ink:    #14181d;
  --cla-ink-2:  #4a5665;
  --cla-ink-3:  #7b8794;
  --cla-rule:   #dde3e8;
  --cla-record: #12171d;
  --cla-serif:  "Source Serif 4", Georgia, "Times New Roman", serif;
}

/* --------------------------------------------------------------------------
   1. Typography
   Headings move from Roboto Condensed 300 (thin and narrow) to a serif at 600.
   -------------------------------------------------------------------------- */
body,
.entry-content,
p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--cla-ink);
}

h1, h2, h3, h4,
.entry-title,
.quickfinder-item-title,
.sc-title,
.widget-title {
  font-family: var(--cla-serif) !important;
  font-weight: 600 !important;
  letter-spacing: -0.012em;
  color: var(--cla-ink);
  text-wrap: balance;
}

h1 { font-size: clamp(32px, 4.6vw, 46px) !important; line-height: 1.1; font-weight: 700 !important; }
h2 { font-size: clamp(26px, 3.4vw, 36px) !important; line-height: 1.2; }
h3 { font-size: clamp(20px, 2.4vw, 26px) !important; line-height: 1.28; }

.widget-title { font-size: 20px !important; }

/* keep running text to a readable measure */
.entry-content > p,
.wpb_text_column > .wpb_wrapper > p {
  max-width: 68ch;
}

/* --------------------------------------------------------------------------
   2. Statistics band (sc_quickfinder on the homepage)
   Becomes a dark record band rather than four floating circle icons.
   Inline styles on .sc-icon require !important to override.
   -------------------------------------------------------------------------- */
.quickfinder.inline-row {
  background: var(--cla-record);
  border-top: 3px solid var(--cla-red);
  margin: 0;
  padding: clamp(32px, 4.5vw, 52px) clamp(16px, 3vw, 32px);
}

.quickfinder.inline-row .quickfinder-item {
  border-right: 1px solid rgba(255, 255, 255, 0.14);
  padding: 8px 20px;
}
.quickfinder.inline-row .quickfinder-item:last-child { border-right: 0; }

@media (max-width: 991px) {
  .quickfinder.inline-row .quickfinder-item:nth-child(2n) { border-right: 0; }
}

/* retire the red circle icons: the numbers are the message */
.quickfinder.inline-row .quickfinder-item-image { display: none !important; }

.quickfinder.inline-row .quickfinder-item-title,
.quickfinder.inline-row .quickfinder-item-title a {
  font-family: var(--cla-serif) !important;
  font-size: clamp(22px, 2.8vw, 30px) !important;
  font-weight: 700 !important;
  line-height: 1.22 !important;
  letter-spacing: -0.015em;
  color: #ffffff !important;
  font-variant-numeric: tabular-nums;
  text-transform: none !important;
  border: 0 !important;
}
.quickfinder.inline-row .quickfinder-item-title a:hover { color: var(--cla-red-l) !important; }

/* --------------------------------------------------------------------------
   3. Section labels
   Brand carried by colour, not by a decorative rule.
   -------------------------------------------------------------------------- */
.sc-divider-title,
.vc_separator h4 {
  font-family: inherit !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cla-red) !important;
}

/* --------------------------------------------------------------------------
   4. Buttons and calls to action
   -------------------------------------------------------------------------- */
.sc-button,
input[type="submit"],
.wpcf7-submit,
.read-more-link a {
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: 0 !important;
  transition: background-color .15s ease, color .15s ease;
}

input[type="submit"],
.wpcf7-submit {
  background: var(--cla-red) !important;
  border: 2px solid var(--cla-red) !important;
  color: #fff !important;
  padding: 14px 28px !important;
}
input[type="submit"]:hover,
.wpcf7-submit:hover {
  background: var(--cla-red-d) !important;
  border-color: var(--cla-red-d) !important;
}

/* --------------------------------------------------------------------------
   5. News and blog listing
   Markup: article > .item-post-container > .item-post > .post-image + .post-text
   -------------------------------------------------------------------------- */
article.post {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-bottom: 1px solid var(--cla-rule);
  border-radius: 0 !important;
  margin-bottom: 0;
  padding-bottom: 32px;
  margin-top: 32px;
}
article.post.rounded-corners { border-radius: 0 !important; }
article.post:first-of-type { margin-top: 0; }

.item-post {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
@media (max-width: 767px) {
  .item-post { grid-template-columns: 1fr; }
}

/* .item-post also carries the theme's .clearfix class. Its ::before/::after
   become grid items and steal tracks, which reorders the real content. */
.item-post::before,
.item-post::after {
  content: none !important;
  display: none !important;
}

/* The parent theme floats these children and gives them fixed widths,
   which stops them filling their grid tracks. Release both. */
.item-post > .post-image,
.item-post > .post-text {
  float: none !important;
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.item-post .post-image { margin: 0 !important; overflow: hidden; }
.item-post .post-image img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform .4s ease;
}
.item-post:hover .post-image img { transform: scale(1.03); }

.item-post .entry-title {
  margin: 0 0 10px !important;
  font-size: clamp(19px, 2.2vw, 24px) !important;
  line-height: 1.26 !important;
}
.item-post .entry-title a { color: var(--cla-ink) !important; text-decoration: none; }
.item-post .entry-title a:hover { color: var(--cla-red) !important; }

/* category tag reads as a label, not a button */
.item-post .entry-meta { margin-bottom: 8px; }
.item-post .entry-meta .tag-links a {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cla-red) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
}

.item-post .entry-content p {
  color: var(--cla-ink-2);
  font-size: 16px;
  line-height: 1.62;
  margin-bottom: 14px;
  max-width: 62ch;
}

.item-post .entry-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  border-top: 1px solid var(--cla-rule);
  padding-top: 12px;
  margin-top: 4px;
}
.item-post .entry-date {
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cla-ink-3);
  font-variant-numeric: tabular-nums;
}
.item-post .read-more-link a {
  color: var(--cla-red) !important;
  background: none !important;
  border: 0 !important;
  padding: 0 !important;
  text-decoration: none;
}
.item-post .read-more-link a:hover {
  color: var(--cla-red-d) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* single post body */
.single .entry-content p,
.single .entry-content li {
  font-size: 17px;
  line-height: 1.72;
  color: var(--cla-ink);
}
.single .entry-content > p { max-width: 68ch; }
.single .entry-content a { color: var(--cla-red); text-underline-offset: 3px; }

/* --------------------------------------------------------------------------
   6. Focus states, for keyboard users
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--cla-red);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .item-post .post-image img { transition: none; }
  .item-post:hover .post-image img { transform: none; }
}

/* ==========================================================================
   7. Front page template (child theme front-page.php)
   Root font-size is 10px on this site, so everything below is in px.
   ========================================================================== */
.cla-wrap { max-width: 1180px; margin: 0 auto; padding-left: clamp(16px, 4vw, 40px); padding-right: clamp(16px, 4vw, 40px); }

/* hero */
.cla-hero {
  position: relative;
  background-size: cover;
  background-position: 30% center;
  background-repeat: no-repeat;
  color: #fff;
}
.cla-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(11,15,19,.94) 0%, rgba(11,15,19,.84) 38%, rgba(11,15,19,.38) 68%, rgba(11,15,19,.14) 100%);
}
.cla-hero-inner { position: relative; padding-top: clamp(56px, 9vw, 112px); padding-bottom: clamp(56px, 9vw, 112px); }
.cla-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cla-red-l); margin: 0 0 18px;
}
.cla-hero-title {
  font-family: var(--cla-serif) !important;
  font-size: clamp(34px, 5.2vw, 56px) !important;
  font-weight: 700 !important;
  line-height: 1.08 !important;
  letter-spacing: -0.015em;
  color: #fff !important;
  margin: 0 0 18px !important;
  max-width: 20ch;
  text-wrap: balance;
}
.cla-hero-sub {
  font-size: 17px; line-height: 1.6; color: #c8d3dd;
  margin: 0 0 30px; max-width: 46ch;
}
.cla-cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.cla-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; text-decoration: none;
  padding: 15px 26px; border: 2px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.cla-btn-primary { background: var(--cla-red); color: #fff !important; }
.cla-btn-primary:hover { background: var(--cla-red-d); }
.cla-btn-ghost { border-color: rgba(255,255,255,.45); color: #fff !important; }
.cla-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* record band */
.cla-record { background: var(--cla-record); border-top: 3px solid var(--cla-red); color: #fff; }
.cla-record .cla-wrap { padding-top: clamp(40px, 5vw, 60px); padding-bottom: clamp(40px, 5vw, 60px); }
.cla-record-head {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: #8fa0b0; margin: 0 0 30px;
}
.cla-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px; background: rgba(255,255,255,.14);
}
.cla-stat { background: var(--cla-record); padding: 22px 22px 20px; }
.cla-stat-prefix {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cla-red-l); margin-bottom: 6px;
}
.cla-stat-figure {
  display: block; font-family: var(--cla-serif);
  font-size: clamp(40px, 5.4vw, 62px); font-weight: 700; line-height: 1;
  letter-spacing: -0.02em; color: #fff; font-variant-numeric: tabular-nums;
}
.cla-stat-caption {
  display: block; margin-top: 12px; font-size: 13px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; color: #9fb0bf; line-height: 1.45;
}

/* page body */
.cla-body { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(24px, 4vw, 48px); }
.cla-prose p { font-size: 17px; line-height: 1.7; color: var(--cla-ink-2); max-width: 68ch; }
.cla-prose .vc_row { margin-left: 0; margin-right: 0; }

/* consultation */
.cla-consult { background: var(--cla-record); color: #fff; }
.cla-consult .cla-wrap { padding-top: clamp(44px, 6vw, 72px); padding-bottom: clamp(44px, 6vw, 72px); }
.cla-sec-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--cla-red-l); margin: 0 0 14px;
}
.cla-consult-title {
  font-family: var(--cla-serif) !important;
  font-size: clamp(28px, 3.6vw, 40px) !important;
  font-weight: 600 !important; line-height: 1.16 !important;
  color: #fff !important; margin: 0 0 14px !important; max-width: 20ch;
}
.cla-consult-sub { font-size: 17px; line-height: 1.65; color: #b9c6d2; max-width: 58ch; margin: 0 0 30px; }

.cla-consult-form input[type="text"],
.cla-consult-form input[type="email"],
.cla-consult-form input[type="tel"],
.cla-consult-form textarea,
.cla-consult-form select {
  width: 100%; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22) !important;
  color: #fff !important; padding: 13px 15px !important;
  font-size: 16px; border-radius: 0 !important; margin-bottom: 14px;
}
.cla-consult-form input::placeholder,
.cla-consult-form textarea::placeholder { color: #8fa0b0; }
.cla-consult-form input:focus,
.cla-consult-form textarea:focus { border-color: var(--cla-red-l) !important; outline: none; }
.cla-consult-form .wpcf7-list-item { margin-left: 0; }
.cla-consult-form p { color: #b9c6d2; font-size: 15px; }

@media (max-width: 600px) {
  .cla-hero-title { max-width: none; }
  .cla-btn { width: 100%; }
}

/* ==========================================================================
   8. News listing corrections
   ========================================================================== */

/* Posts with no real featured image fall back to the CLA house logo, so the
   listing becomes a column of identical red blocks. Drop those rows to a
   single text column instead. Posts that DO have a photograph keep the image. */
.item-post:has(> .post-image img.default-featured-img) {
  grid-template-columns: 1fr;
}
.item-post:has(> .post-image img.default-featured-img) > .post-image {
  display: none;
}

/* Page title banner: solid brand red across 256px competes with everything
   below it. Dark ground keeps the red as an accent rather than a wash. */
.page-title-block {
  background-color: var(--cla-record) !important;
  background-image: none !important;
  border-bottom: 3px solid var(--cla-red);
}
.page-title-block h1,
.page-title-block h2,
.page-title-block .page-title,
.page-title-block .entry-title {
  color: #ffffff !important;
}
.page-title-block p,
.page-title-block .subtitle,
.page-title-block .page-subtitle,
.page-title-block .breadcrumbs,
.page-title-block .breadcrumbs a {
  color: #b9c6d2 !important;
}
.page-title-block .breadcrumbs a:hover { color: #ffffff !important; }

/* the entry-info rule should not run under a hidden image column */
.item-post .entry-info { width: 100%; }

/* ==========================================================================
   9. Footer
   The theme renders two stacked footers (#footer-nav and #colophon) in two
   different greys, and the WPML flag image collides with the language name.
   ========================================================================== */

/* one coherent dark footer instead of two clashing greys */
#footer-nav.site-footer {
  background-color: var(--cla-record) !important;
  border-top: 3px solid var(--cla-red);
  padding-top: 26px;
  padding-bottom: 26px;
}
#colophon.site-footer {
  background-color: var(--cla-record) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}

/* footer text: my global paragraph colour must not darken light-on-dark text */
#footer-nav, #footer-nav p, #footer-nav a,
#colophon, #colophon p, #colophon li, #colophon span {
  color: #b9c6d2 !important;
}
#colophon .widget-title,
#colophon h1, #colophon h2, #colophon h3, #colophon h4 {
  color: #ffffff !important;
}
#colophon a:hover, #footer-nav a:hover { color: #ffffff !important; }

/* language switcher: lay it out explicitly, flag beside label */
#footer-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer-menu > li { margin: 0 !important; padding: 0 !important; float: none !important; }

/* kill the sc-list triangle bullets that float above each language */
#footer-menu > li::before,
#footer-menu > li::after,
#footer-menu > li > a::before,
#footer-menu > li > a::after {
  content: none !important;
  display: none !important;
}

#footer-menu > li > a {
  display: inline-flex !important;
  align-items: center;
  gap: 9px;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
  border: 0 !important;
  background: none !important;
}
#footer-menu .wpml-ls-flag {
  width: 18px;
  height: auto;
  display: block;
  flex: 0 0 auto;
  margin: 0 !important;
  position: static !important;
  vertical-align: middle;
}
#footer-menu .wpml-ls-native { display: block; }
#footer-menu .wpml-ls-current-language > a { color: #ffffff !important; font-weight: 600; }

/* social icons row */
#footer-nav .social-links,
#footer-nav .sc-socials { display: flex; gap: 18px; align-items: center; justify-content: flex-end; }
#footer-nav .social-links a, #footer-nav .sc-socials a { color: #9fb0bf !important; }
#footer-nav .social-links a:hover, #footer-nav .sc-socials a:hover { color: #ffffff !important; }

/* ==========================================================================
   10. Corrections
   ========================================================================== */

/* --- 10a. News previews: keep the images ---------------------------------
   Restores the image column that section 8 hid. 931 of 1963 published posts
   have a real featured image, so hiding the column penalised those too.
   Posts without one fall back to the CLA house logo: that is a brand mark,
   not a photograph, so contain it on a tint instead of cropping it. */
.item-post:has(> .post-image img.default-featured-img) {
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
}
.item-post:has(> .post-image img.default-featured-img) > .post-image {
  display: block;
}
.item-post .post-image img.default-featured-img {
  object-fit: contain;
  background: var(--cla-paper2);
  padding: 26px;
}
@media (max-width: 767px) {
  .item-post:has(> .post-image img.default-featured-img) { grid-template-columns: 1fr; }
}

/* --- 10b. Footer language flags ------------------------------------------
   The flags are loading="lazy" with no intrinsic size applied, so height:auto
   resolved to 0 and they would not sit on the text baseline. Give them explicit
   dimensions, and stop long labels such as "Norsk bokmal" wrapping to two lines
   which pushed that item out of alignment with its neighbours. */
#footer-menu > li > a {
  white-space: nowrap;
  line-height: 1;
}
#footer-menu .wpml-ls-flag {
  width: 18px !important;
  height: 12px !important;
  object-fit: cover;
  flex: 0 0 auto;
  display: block;
  border-radius: 1px;
}
#footer-menu .wpml-ls-native {
  display: block;
  line-height: 1;
}

/* --- 10c. Footer tone ----------------------------------------------------
   The consultation band on the home page is --cla-record, so a footer of the
   same value merged into one undifferentiated black mass. Step the footer up
   to a slate so it reads as a separate zone on every template. */
#footer-nav.site-footer {
  background-color: #1e2731 !important;
  border-top: 2px solid var(--cla-red);
}
#colophon.site-footer {
  background-color: #18202a !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

/* --- 10d. Generated featured images --------------------------------------
   Inline SVG title cards replacing the repeated logo fallback. */
.item-post .post-image .cla-genthumb,
.cla-genthumb {
  display: block;
  width: 100%;
  height: 210px;
  overflow: hidden;
  line-height: 0;
}
.cla-genthumb svg { display: block; width: 100%; height: 100%; }
.cla-genthumb-text {
  font-family: var(--cla-serif);
  letter-spacing: -0.012em;
}
.item-post .post-image > a { display: block; line-height: 0; }
.item-post:hover .cla-genthumb svg { transform: none; }