/*
 * Krannon UI Refinement — v1.3.5
 * --------------------------------------------------------------------
 * Wires the v1.3.5 Customizer variables into the existing markup and
 * adds restrained editorial polish on top of style.css. Loads after
 * appearance-presets.css and before sticky-header.css.
 *
 * Rules in this file:
 *   1. Read CSS variables exposed by inc/customizer-appearance.php.
 *   2. Never override Krannon Sections, gallery, lightbox or map markup.
 *   3. Provide safe fallbacks so an unset variable cannot break layout.
 */

/* ---------- Container & site width ---------- */

.krannon-container {
  width: min(var(--krannon-container, 1180px), calc(100% - 40px));
}

/* ---------- Base typography ---------- */

body {
  font-size: var(--krannon-base-font-size, 17px);
}

body h1, body h2, body h3, body h4 {
  letter-spacing: var(--krannon-heading-letter-spacing, normal);
}

body.krannon-ui-eyebrow-override .krannon-eyebrow,
body.krannon-ui-eyebrow-override .krannon-editorial-card-label,
body.krannon-ui-eyebrow-override .krannon-section-label {
  letter-spacing: var(--krannon-eyebrow-letter-spacing, .12em);
}

/* Heading scale — multiplies the existing fluid sizes, but only when
   the user has actually changed the heading scale away from standard. */
body.krannon-ui-heading-scale-override h1 { font-size: calc(clamp(2.2rem, 5vw, 3.4rem) * var(--krannon-heading-scale, 1)); }
body.krannon-ui-heading-scale-override h2 { font-size: calc(clamp(1.6rem, 3vw, 2.2rem) * var(--krannon-heading-scale, 1)); }
body.krannon-ui-heading-scale-override h3 { font-size: calc(clamp(1.25rem, 2.2vw, 1.6rem) * var(--krannon-heading-scale, 1)); }

/* ---------- Header height ---------- */

.krannon-header-inner {
  min-height: var(--krannon-header-height, 76px);
}

.krannon-brand .custom-logo {
  max-height: var(--krannon-logo-max-height, 56px);
}

@media (max-width: 900px) {
  .krannon-header-inner {
    min-height: var(--krannon-header-height-mobile, 64px);
  }
}

/* ---------- Header chrome via variables ---------- */

body.krannon-ui-sticky-header .krannon-site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}

body:not(.krannon-ui-transparent-header) .krannon-site-header {
  background: var(--krannon-header-bg, var(--krannon-surface));
  border-bottom: 1px solid var(--krannon-header-border, var(--krannon-border));
}

body:not(.krannon-ui-transparent-header) .krannon-brand-title,
body:not(.krannon-ui-transparent-header) .krannon-navigation a {
  color: var(--krannon-header-text, var(--krannon-text));
}

body:not(.krannon-ui-header-blur) .krannon-site-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ---------- Navigation hover & dropdown polish ---------- */

.krannon-navigation a {
  transition: color var(--krannon-transition, 180ms ease);
}

.krannon-navigation .sub-menu {
  border-radius: var(--krannon-radius-sm, 6px);
  padding: 12px;
  gap: 2px;
  min-width: 240px;
  border: 1px solid var(--krannon-border);
  box-shadow: 0 18px 48px rgba(0, 0, 0, .12);
}

.krannon-navigation .sub-menu a {
  border-radius: 4px;
  padding: 9px 12px;
  transition: background-color 160ms ease, color 160ms ease;
}

.krannon-navigation .sub-menu a:hover,
.krannon-navigation .sub-menu a:focus-visible {
  background: color-mix(in srgb, var(--krannon-primary) 8%, transparent);
  color: var(--krannon-primary);
}

/* ---------- Mobile nav refinement ---------- */

@media (max-width: 900px) {
  .krannon-navigation {
    border-radius: var(--krannon-radius-sm, 6px);
    padding: 14px;
  }
  .krannon-navigation ul {
    gap: 4px;
  }
  .krannon-navigation a {
    padding: 12px 10px;
    border-radius: 4px;
  }
  .krannon-navigation a:hover,
  .krannon-navigation a:focus-visible {
    background: color-mix(in srgb, var(--krannon-primary) 6%, transparent);
  }
}

/* ---------- Hero defaults driven by variables ---------- */

.krannon-section-hero-inner,
.krannon-editorial-home-hero-inner {
  max-width: var(--krannon-hero-content-width, 820px);
}

/* Hero title size is opt-in: only when the user has explicitly set the
   v1.3.5 hero title controls. By default the existing style.css clamp
   wins, so visual upgrades from 1.3.4 are pixel-identical. The opt-in
   class is added only when the value differs from the legacy baseline. */
body.krannon-ui-hero-title-override .krannon-section-hero-title,
body.krannon-ui-hero-title-override .krannon-editorial-home-title {
  font-size: clamp(
    var(--krannon-hero-title-size-mobile, 36px),
    5vw,
    var(--krannon-hero-title-size, 56px)
  );
  letter-spacing: var(--krannon-heading-letter-spacing, -0.005em);
}

body.krannon-ui-hero-lead-override .krannon-section-hero-lead,
body.krannon-ui-hero-lead-override .krannon-editorial-home-lead {
  font-size: var(--krannon-hero-lead-size, 19px);
}

body.krannon-ui-hero-center .krannon-section-hero-inner,
body.krannon-ui-hero-center .krannon-editorial-home-hero-inner,
body.krannon-ui-hero-center .krannon-page-hero .krannon-section-hero-inner {
  margin-inline: auto;
  text-align: center;
}

/* Hero overlay strength when the editorial overlay variable is set. */
.krannon-section-hero.has-overlay::before,
.krannon-page-hero.has-overlay::before {
  background: var(--krannon-hero-overlay-rgba, var(--krannon-hero-overlay, rgba(20,16,12,.48)));
}

/* Default hero height (only when the page hero block does not already
   carry a per-page modifier). */
body.krannon-ui-hero-compact .krannon-page-hero:not([class*="krannon-page-hero--"]) { padding-block: 56px; }
body.krannon-ui-hero-normal  .krannon-page-hero:not([class*="krannon-page-hero--"]) { padding-block: 96px; }
body.krannon-ui-hero-large   .krannon-page-hero:not([class*="krannon-page-hero--"]) { padding-block: 152px; }
body.krannon-ui-hero-full    .krannon-page-hero:not([class*="krannon-page-hero--"]) {
  min-height: calc(100vh - var(--krannon-header-height, 76px));
  display: flex;
  align-items: center;
}

/* Hide scroll indicator unless explicitly enabled. */
body:not(.krannon-ui-show-scroll-indicator) .krannon-hero-scroll {
  display: none;
}

/* ---------- Section spacing (opt-in) ---------- */

body.krannon-ui-section-spacing-override .krannon-section,
body.krannon-ui-section-spacing-override .krannon-editorial-home main > section,
body.krannon-ui-section-spacing-override main > .krannon-section {
  padding-block: var(--krannon-section-spacing, 80px);
}

/* ---------- Cards ---------- */

.krannon-editorial-card,
.krannon-card,
.krannon-child-card {
  border-radius: var(--krannon-radius, 12px);
  box-shadow: var(--krannon-card-shadow, 0 6px 18px rgba(0,0,0,.05));
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
}

.krannon-editorial-card:hover,
.krannon-card:hover,
.krannon-child-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .10);
  border-color: color-mix(in srgb, var(--krannon-primary) 22%, var(--krannon-border));
}

body.krannon-ui-grid-gap-override .krannon-editorial-cards-grid {
  gap: var(--krannon-grid-gap, 28px);
}

/* ---------- Images (additive radius for block figures) ---------- */

figure.wp-block-image img {
  border-radius: var(--krannon-image-radius, 8px);
}

.krannon-editorial-card-image {
  overflow: hidden;
  border-radius: 0;
}

.krannon-editorial-card-image img {
  border-radius: 0;
  transition: transform 480ms ease;
}

.krannon-editorial-card:hover .krannon-editorial-card-image img {
  transform: scale(1.025);
}

/* ---------- Buttons (opt-in) ----------
 * The existing style.css defines .krannon-button using --krannon-accent.
 * The v1.3.5 button controls override that only when the editor has
 * explicitly changed any of the button color/radius/padding fields.
 */

body.krannon-ui-button-override .krannon-button,
body.krannon-ui-button-override .button,
body.krannon-ui-button-override .wp-block-button__link,
body.krannon-ui-button-override .krannon-cta,
body.krannon-ui-button-override button.krannon-cta {
  background: var(--krannon-btn-bg, var(--krannon-primary));
  color: var(--krannon-btn-text, #fff);
  border: 1px solid var(--krannon-btn-bg, var(--krannon-primary));
  border-radius: var(--krannon-btn-radius, 6px);
  padding: var(--krannon-btn-padding, 12px 24px);
  text-transform: var(--krannon-button-text-transform, none);
  letter-spacing: .01em;
  font-weight: 600;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 160ms ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.krannon-ui-button-override .krannon-button:hover,
body.krannon-ui-button-override .button:hover,
body.krannon-ui-button-override .wp-block-button__link:hover,
body.krannon-ui-button-override .krannon-cta:hover {
  background: var(--krannon-btn-hover-bg, var(--krannon-primary-dark));
  border-color: var(--krannon-btn-hover-bg, var(--krannon-primary-dark));
  color: var(--krannon-btn-text, #fff);
  transform: translateY(-1px);
}

body.krannon-ui-button-override .krannon-button.is-secondary,
body.krannon-ui-button-override .button.is-secondary,
body.krannon-ui-button-override .krannon-button-secondary {
  background: transparent;
  color: var(--krannon-btn-secondary-text, var(--krannon-primary));
  border-color: var(--krannon-btn-secondary-border, var(--krannon-primary));
}

body.krannon-ui-button-override .krannon-button.is-secondary:hover,
body.krannon-ui-button-override .button.is-secondary:hover,
body.krannon-ui-button-override .krannon-button-secondary:hover {
  background: var(--krannon-btn-secondary-border, var(--krannon-primary));
  color: var(--krannon-btn-text, #fff);
}

/* Always apply the button text-transform variable (default 'none' is
   identical to the existing style, so safe to apply unconditionally). */
.krannon-button,
.button,
.wp-block-button__link,
.krannon-cta {
  text-transform: var(--krannon-button-text-transform, none);
}

/* ---------- Breadcrumbs & local navigation (additive polish) ----------
 * The existing color treatment in style.css is preserved (breadcrumbs
 * sit on hero backgrounds and use white-tinted colors). We only add a
 * subtle hover transition.
 */

.krannon-breadcrumbs a {
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

.krannon-breadcrumbs a:hover {
  border-bottom-color: currentColor;
}

.krannon-local-nav a {
  transition: color 160ms ease, border-color 160ms ease;
}

/* ---------- Gallery captions ---------- */

body.krannon-ui-grid-gap-override .krannon-gallery,
body.krannon-ui-grid-gap-override .wp-block-gallery {
  gap: var(--krannon-grid-gap, 28px);
}

.krannon-gallery-caption,
figure figcaption,
.wp-block-image figcaption {
  font-size: .82rem;
  color: var(--krannon-muted);
  margin-top: 10px;
  line-height: 1.55;
  letter-spacing: .005em;
}

.krannon-gallery a,
.krannon-gallery img,
.wp-block-gallery img {
  border-radius: var(--krannon-image-radius, 8px);
}

/* ---------- Footer (UI-driven, opt-in) ----------
 * Activated when the user has touched any of the footer UI controls.
 * By default the existing lensculture-footer.css layout is preserved.
 */

body.krannon-ui-footer-override .krannon-footer {
  background: var(--krannon-footer-bg, var(--krannon-dark-surface));
  color: var(--krannon-footer-text, var(--krannon-light-accent));
  padding-block: var(--krannon-footer-spacing, 64px);
  border-top: 1px solid var(--krannon-footer-border, transparent);
}

body.krannon-ui-footer-override .krannon-footer a {
  color: var(--krannon-footer-link, var(--krannon-secondary));
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease, border-color 160ms ease;
}

body.krannon-ui-footer-override .krannon-footer a:hover {
  color: var(--krannon-footer-link, var(--krannon-secondary));
  border-bottom-color: currentColor;
}

body.krannon-ui-footer-override .krannon-footer .custom-logo,
body.krannon-ui-footer-override .krannon-footer img.custom-logo {
  max-width: var(--krannon-footer-logo-max-width, 180px);
  height: auto;
}

body.krannon-ui-footer-override.krannon-ui-grid-gap-override .krannon-footer-grid {
  gap: var(--krannon-grid-gap, 28px);
}

/* ---------- No-hero safe top padding (works alongside sticky-header.css) */

body.krannon-ui-sticky-header.krannon-no-visual-hero .krannon-main {
  padding-top: var(--krannon-header-height, 76px);
}

@media (max-width: 900px) {
  body.krannon-ui-sticky-header.krannon-no-visual-hero .krannon-main {
    padding-top: var(--krannon-header-height-mobile, 64px);
  }
}