/* =============================================================================
   MORRIS WEB SERVICES — Visual Polish Layer  (hugo-wp-child/custom.css)
   Preserves the wife's color scheme & artwork; improves cohesion + polish.
   All selectors mirror the parent theme's body.wp-theme-hugo-wp root scope
   so specificity matches cleanly.
   ============================================================================= */


/* ─────────────────────────────────────────────────────────────
   1. PALETTE — CSS CUSTOM PROPERTIES
   Defines the real brand palette as variables for reuse, and
   overrides the Colibri default color variables so every page
   builder component pulls from the correct palette.
   ───────────────────────────────────────────────────────────── */

:root {

  /* Brand palette */
  --mws-navy:        #1d2d50;
  --mws-navy-mid:    #2a3f6f;
  --mws-navy-light:  #3d5585;
  --mws-brown:       #5b3a29;
  --mws-brown-mid:   #7a5040;
  --mws-brown-light: #9a6b55;
  --mws-gold:        #ba9643;
  --mws-gold-light:  #d4b068;
  --mws-gold-pale:   #ede0b8;
  --mws-rust:        #be6134;
  --mws-rust-light:  #d4784d;
  --mws-cream:       #f8f4ee;
  --mws-cream-dark:  #ede5d8;
  --mws-text:        #2e1f14;
  --mws-text-muted:  #6b5040;
  --mws-white:       #ffffff;

  /* Colibri color variable overrides — maps builder UI colours to brand palette */
  --colibri-color-1:            rgb(29, 45, 80);
  --colibri-color-1--variant-1: #c5cedf;
  --colibri-color-1--variant-2: #7689ae;
  --colibri-color-1--variant-3: #1d2d50;
  --colibri-color-1--variant-4: #111b30;
  --colibri-color-1--variant-5: #070d18;

  --colibri-color-2:            rgb(186, 150, 67);
  --colibri-color-2--variant-1: #ece0b5;
  --colibri-color-2--variant-2: #d4b068;
  --colibri-color-2--variant-3: #ba9643;
  --colibri-color-2--variant-4: #8a6f32;
  --colibri-color-2--variant-5: #3d3117;

  --colibri-color-3:            rgb(91, 58, 41);
  --colibri-color-3--variant-1: #c4a896;
  --colibri-color-3--variant-2: #9a6b55;
  --colibri-color-3--variant-3: #5b3a29;
  --colibri-color-3--variant-4: #3a2519;
  --colibri-color-3--variant-5: #1a1009;

  --colibri-color-4:            rgb(248, 244, 238);
  --colibri-color-4--variant-1: #f8f4ee;
  --colibri-color-4--variant-2: #ede5d8;
  --colibri-color-4--variant-3: #d9caba;
  --colibri-color-4--variant-4: #a89888;
  --colibri-color-4--variant-5: #6e6058;

  --colibri-color-5:            #ffffff;
  --colibri-color-5--variant-1: #ffffff;
  --colibri-color-5--variant-2: #d9d9d9;
  --colibri-color-5--variant-3: #999999;
  --colibri-color-5--variant-4: #666666;
  --colibri-color-5--variant-5: #333333;

  --colibri-color-6:            rgb(29, 45, 80);
  --colibri-color-6--variant-1: #a3afc4;
  --colibri-color-6--variant-2: #4e6180;
  --colibri-color-6--variant-3: #1d2d50;
  --colibri-color-6--variant-4: #111b30;
  --colibri-color-6--variant-5: #060d18;

  --colibri-primary-color: #be6134;
}


/* ─────────────────────────────────────────────────────────────
   2. GLOBAL BASE — smooth rendering, link defaults
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--mws-text);
}

body.wp-theme-hugo-wp a {
  transition: color 0.2s ease, opacity 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────
   3. TYPOGRAPHY — hierarchy, rhythm, readability
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp h1,
body.wp-theme-hugo-wp h2,
body.wp-theme-hugo-wp h3,
body.wp-theme-hugo-wp h4,
body.wp-theme-hugo-wp h5,
body.wp-theme-hugo-wp h6 {
  line-height: 1.25;
  letter-spacing: 0.01em;
}

/* EB Garamond body text — better reading line-height */
body.wp-theme-hugo-wp p,
body.wp-theme-hugo-wp li,
body.wp-theme-hugo-wp td {
  line-height: 1.75;
}

/* Tangerine display headings — tighten overly-loose tracking */
body.wp-theme-hugo-wp .h-heading [class*="tangerine"],
body.wp-theme-hugo-wp [style*="Tangerine"] {
  letter-spacing: 0.02em;
}

/* Section sub-labels in Poppins / Open Sans — ensure they don't overpower body */
body.wp-theme-hugo-wp .h-heading p {
  line-height: 1.6;
}


/* ─────────────────────────────────────────────────────────────
   4. NAVIGATION — refinement
   Polish the top nav and the sticky state so it looks purposeful.
   ───────────────────────────────────────────────────────────── */

/* Sticky nav: softer shadow + a hint of translucency */
body.wp-theme-hugo-wp .h-navigation_sticky {
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter:  blur(6px);
  box-shadow: 0 2px 16px rgba(29, 45, 80, 0.18) !important;
  transition: box-shadow 0.35s ease, background-color 0.35s ease;
}

/* Nav links — add a smooth underline-grow hover instead of abrupt color pop */
body.wp-theme-hugo-wp ul.colibri-menu > li > a {
  position: relative;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82em;
  transition: color 0.2s ease;
}

body.wp-theme-hugo-wp ul.colibri-menu > li > a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background-color: var(--mws-gold);
  transition: width 0.25s ease;
  border-radius: 1px;
}

body.wp-theme-hugo-wp ul.colibri-menu > li:hover > a::after,
body.wp-theme-hugo-wp ul.colibri-menu > li.current-menu-item > a::after,
body.wp-theme-hugo-wp ul.colibri-menu > li.current_page_item > a::after {
  width: 100%;
}

/* Dropdown menus — slightly polished */
body.wp-theme-hugo-wp ul.colibri-menu .sub-menu {
  border-top: 2px solid var(--mws-gold);
  box-shadow: 0 8px 24px rgba(29, 45, 80, 0.14);
}


/* ─────────────────────────────────────────────────────────────
   5. BUTTONS — unified, purposeful CTA style
   Page builder buttons come with inline colour overrides, so we
   enhance shape, spacing, and transitions here without fighting
   the colours set in the builder.
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp .h-button {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.82em;
  transition: transform 0.18s ease,
              box-shadow 0.18s ease,
              opacity 0.18s ease !important;
  border-radius: 4px !important;
}

body.wp-theme-hugo-wp .h-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(29, 45, 80, 0.22) !important;
  opacity: 0.93;
}

body.wp-theme-hugo-wp .h-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(29, 45, 80, 0.15) !important;
}


/* ─────────────────────────────────────────────────────────────
   6. SECTION CONTAINERS — breathing room + softer shadows
   The original boxes used a hard 2px 1px 2px rgba(0,0,0,.5)
   shadow. Replacing with a modern diffuse lift shadow.
   ───────────────────────────────────────────────────────────── */

/* Soften every box-shadow that the page builder outputs inline */
body.wp-theme-hugo-wp [style*="box-shadow: 2px 1px 2px"] {
  box-shadow: 0 4px 24px rgba(29, 45, 80, 0.10) !important;
}

/* Colibri inner column containers */
body.wp-theme-hugo-wp .h-column__content {
  transition: box-shadow 0.25s ease;
}

/* Section boxed container — consistent max-width gutter */
body.wp-theme-hugo-wp .h-section-boxed-container {
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
}

/* Content cards / highlighted boxes — refined radius + shadow */
body.wp-theme-hugo-wp .h-column__content [style*="border-radius"],
body.wp-theme-hugo-wp .h-column__content [style*="border-radius: 25px"] {
  border-radius: 12px !important;
  box-shadow: 0 4px 24px rgba(29, 45, 80, 0.10) !important;
}

/* Divider lines — use gold instead of default grey when present */
body.wp-theme-hugo-wp hr,
body.wp-theme-hugo-wp .wp-block-separator {
  border-color: var(--mws-gold-pale);
  opacity: 1;
}

/* Image double-borders — softer treatment */
body.wp-theme-hugo-wp [style*="border: 5px double"],
body.wp-theme-hugo-wp [style*="border:5px double"] {
  border-color: var(--mws-gold) !important;
  border-width: 3px !important;
  box-shadow: 4px 4px 0 rgba(29, 45, 80, 0.18) !important;
}

/* Profile / feature circular images — gold ring */
body.wp-theme-hugo-wp img[style*="border-radius: 300px"],
body.wp-theme-hugo-wp img[style*="border-radius:300px"] {
  outline: 3px solid var(--mws-gold-pale);
  outline-offset: 4px;
}


/* ─────────────────────────────────────────────────────────────
   7. SECTION SPACING — vertical rhythm
   Adds breathing room between page sections so the page
   doesn't feel cramped. Uses clamp() for fluid scaling.
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp .h-section + .h-section {
  /* Small visual separator between adjacent sections without backgrounds */
  border-top: 1px solid transparent;
}

/* Headings inside sections — give them room above */
body.wp-theme-hugo-wp .h-column__content .h-heading:not(:first-child) {
  margin-top: 0.5em;
}


/* ─────────────────────────────────────────────────────────────
   8. FOOTER — structure + polish
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp .page-footer {
  border-top: 3px solid var(--mws-gold);
}

/* Footer links — inherit colour but add a clean hover */
body.wp-theme-hugo-wp .page-footer a {
  transition: color 0.2s ease;
}

body.wp-theme-hugo-wp .page-footer a:hover {
  color: var(--mws-gold-light) !important;
  text-decoration: none;
}

/* Footer headings / widget titles — gold accent bar */
body.wp-theme-hugo-wp .page-footer .widget-title,
body.wp-theme-hugo-wp .page-footer h4,
body.wp-theme-hugo-wp .page-footer h5 {
  border-bottom: 1px solid var(--mws-gold);
  padding-bottom: 0.4em;
  margin-bottom: 0.75em;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.8em;
}

/* Footer social icons — subtle gold on hover */
body.wp-theme-hugo-wp .page-footer .h-icon a:hover svg,
body.wp-theme-hugo-wp .page-footer .h-icon a:hover i {
  color: var(--mws-gold) !important;
  fill:  var(--mws-gold) !important;
  transition: color 0.2s ease, fill 0.2s ease;
}


/* ─────────────────────────────────────────────────────────────
   9. FORMS — consistency with brand palette
   Applies to Forminator and any contact forms on the site.
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp .forminator-input,
body.wp-theme-hugo-wp .forminator-textarea,
body.wp-theme-hugo-wp .forminator-select select,
body.wp-theme-hugo-wp .frm-fields input,
body.wp-theme-hugo-wp .frm-fields textarea {
  border-color: var(--mws-cream-dark) !important;
  border-radius: 6px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

body.wp-theme-hugo-wp .forminator-input:focus,
body.wp-theme-hugo-wp .forminator-textarea:focus {
  border-color: var(--mws-gold) !important;
  box-shadow: 0 0 0 3px rgba(186, 150, 67, 0.15) !important;
  outline: none;
}

body.wp-theme-hugo-wp .forminator-btn,
body.wp-theme-hugo-wp .forminator-button {
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: 4px !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
}

body.wp-theme-hugo-wp .forminator-btn:hover,
body.wp-theme-hugo-wp .forminator-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(29, 45, 80, 0.22) !important;
}


/* ─────────────────────────────────────────────────────────────
   10. PORTFOLIO — card hover polish
   The portfolio uses a 3-column grid with hover overlays.
   Refine the overlay and add a smooth lift on hover.
   ───────────────────────────────────────────────────────────── */

body.wp-theme-hugo-wp .h-column__content [style*="background-attachment: fixed"] {
  /* Prevent jarring parallax on sections that aren't intentionally parallax */
}

/* Portfolio item cards — add scale lift */
body.wp-theme-hugo-wp [data-content-swap] {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 8px;
  overflow: hidden;
}

body.wp-theme-hugo-wp [data-content-swap]:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(29, 45, 80, 0.18) !important;
}

/* Portfolio overlay colour — use brand navy instead of pure black */
body.wp-theme-hugo-wp [data-content-swap] [class*="overlay"],
body.wp-theme-hugo-wp [data-content-swap] [style*="rgba(0, 0, 0, .75)"],
body.wp-theme-hugo-wp [data-content-swap] [style*="rgba(0,0,0,.75)"] {
  background-color: rgba(29, 45, 80, 0.82) !important;
}


/* ─────────────────────────────────────────────────────────────
   11. UTILITY — minor global polish
   ───────────────────────────────────────────────────────────── */

/* Smoother scroll — helps the sticky nav feel intentional */
body.wp-theme-hugo-wp {
  scroll-behavior: smooth;
}

/* Selection highlight in brand gold */
body.wp-theme-hugo-wp ::selection {
  background-color: var(--mws-gold-pale);
  color: var(--mws-brown);
}

/* Focus rings — accessible, on-brand */
body.wp-theme-hugo-wp a:focus-visible,
body.wp-theme-hugo-wp button:focus-visible,
body.wp-theme-hugo-wp input:focus-visible,
body.wp-theme-hugo-wp select:focus-visible,
body.wp-theme-hugo-wp textarea:focus-visible {
  outline: 2px solid var(--mws-gold);
  outline-offset: 3px;
}

/* Colibri wave/shape dividers — preserve them but ensure they don't clip */
body.wp-theme-hugo-wp .h-down-arrow svg,
body.wp-theme-hugo-wp .h-down-arrow img {
  display: block;
  width: 100%;
}


/* ─────────────────────────────────────────────────────────────
   12. SERVICES PAGE — Accordion redesign
   Problem: the accordion wrapper AND every item title share the
   same flat gold (#ba9643) fill, creating a monotonous blob that
   also hides the background artwork behind the section.
   Fix: translucent white wrapper so the artwork shows through;
   clean card-style items with a gold left-border accent; the
   existing navy+gold hover/active state is kept (it looks great).
   ───────────────────────────────────────────────────────────── */

/* --- Accordion wrapper box: let the section background breathe --- */
/* style-457 & style-466 are the flat-gold rounded containers on    */
/* the Services page. Replaced with frosted white.                  */
body.wp-theme-hugo-wp .style-457,
body.wp-theme-hugo-wp .style-466 {
  background-color: rgba(255, 255, 255, 0.93) !important;
  background-image: none !important;
  box-shadow: 0 8px 40px rgba(29, 45, 80, 0.16) !important;
}

/* --- Accordion item title — default/closed state --- */
/* Was: flat #ba9643 fill. Now: white card with a gold left accent. */
body.wp-theme-hugo-wp .h-accordion > .h-accordion-item > .h-accordion-item-title {
  background-color: #ffffff !important;
  background-image: none !important;
  border-top:    1px solid var(--mws-cream-dark) !important;
  border-right:  1px solid var(--mws-cream-dark) !important;
  border-bottom: 1px solid var(--mws-cream-dark) !important;
  border-left:   4px solid var(--mws-gold)       !important;
  border-radius: 6px !important;
  color:         var(--mws-brown) !important;
  box-shadow:    0 2px 8px rgba(29, 45, 80, 0.07) !important;
  margin-top:    4px  !important;
  margin-bottom: 4px  !important;
  transition:    background-color 0.25s ease, color 0.25s ease,
                 box-shadow 0.25s ease !important;
}

/* --- Hover state --- */
body.wp-theme-hugo-wp .h-accordion > .h-accordion-item > .h-accordion-item-title:hover {
  background-color: var(--mws-navy)      !important;
  border-color:     var(--mws-navy)      !important;
  border-left:      4px solid var(--mws-gold) !important;
  color:            var(--mws-gold)      !important;
  box-shadow:       0 4px 18px rgba(29, 45, 80, 0.22) !important;
}

/* --- Active / open state --- */
body.wp-theme-hugo-wp .h-accordion > .h-accordion-item > .h-accordion-item-title.h-custom-active-state {
  background-color:          var(--mws-navy) !important;
  background-image:          none !important;
  border-color:              var(--mws-navy) !important;
  border-left:               4px solid var(--mws-gold) !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius:0 !important;
  color:                     var(--mws-gold) !important;
  box-shadow:                0 4px 18px rgba(29, 45, 80, 0.22) !important;
}

/* --- Expand/collapse icon --- */
body.wp-theme-hugo-wp .h-accordion > .h-accordion-item > .h-accordion-item-title
    .h-accordion-item-title-icon svg {
  fill: var(--mws-gold) !important;
  transition: fill 0.25s ease, transform 0.25s ease;
}

body.wp-theme-hugo-wp .h-accordion > .h-accordion-item > .h-accordion-item-title:hover
    .h-accordion-item-title-icon svg,
body.wp-theme-hugo-wp .h-accordion > .h-accordion-item > .h-accordion-item-title.h-custom-active-state
    .h-accordion-item-title-icon svg {
  fill: var(--mws-gold-light) !important;
}

/* --- Expanded content panel — cream tint, visually connected     */
/* to the open header above it                                      */
body.wp-theme-hugo-wp .h-accordion > .h-accordion-item
    > .h-accordion-item-content__container
    > .h-accordion-item-content {
  background-color:           var(--mws-cream) !important;
  border-left:                4px solid var(--mws-gold)       !important;
  border-right:               1px solid var(--mws-cream-dark) !important;
  border-bottom:              1px solid var(--mws-cream-dark) !important;
  border-bottom-left-radius:  6px !important;
  border-bottom-right-radius: 6px !important;
  color:                      var(--mws-text) !important;
}


/* ─────────────────────────────────────────────────────────────
   13. PORTFOLIO — card redesign
   (a) Cards had no visible label until hover — added .mws-card-label
   (b) Inconsistent heights — locked to 16/10 aspect ratio
   (c) Hover overlay was plain black — replaced with brand navy
   ───────────────────────────────────────────────────────────── */

/* Card container: establishes positioning context + consistent ratio */
body.wp-theme-hugo-wp .h-content-swap__overflow {
  position: relative !important;
  aspect-ratio: 16 / 10;
  min-height: 200px;
  overflow: hidden;
}

/* Screenshot fills the card as a cover image */
body.wp-theme-hugo-wp .h-content-swap__normal {
  position: absolute !important;
  inset: 0;
  background-size: cover !important;
  background-position: center top !important;
}

/* Hover state overlays the screenshot */
body.wp-theme-hugo-wp .h-content-swap__hover {
  position: absolute !important;
  inset: 0;
}

/* Brand navy hover overlay (replaces the Colibri-set black) */
body.wp-theme-hugo-wp .style-564,
body.wp-theme-hugo-wp .style-552,
body.wp-theme-hugo-wp .style-570,
body.wp-theme-hugo-wp .style-573,
body.wp-theme-hugo-wp .style-576,
body.wp-theme-hugo-wp .style-579 {
  background-color: rgba(29, 45, 80, 0.88) !important;
}

/* Always-visible title bar at the bottom of every card */
body.wp-theme-hugo-wp .mws-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 14px 12px;
  background: linear-gradient(to top, rgba(29, 45, 80, 0.92) 0%, rgba(29, 45, 80, 0.55) 65%, transparent 100%);
  color: var(--mws-gold-light);
  font-family: 'Open Sans', sans-serif;
  font-size: 0.75em;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  text-align: center;
  pointer-events: none;
  z-index: 1;
}

/* Card hover: lift shadow on the column wrapper */
body.wp-theme-hugo-wp .content-swap:hover {
  box-shadow: 0 12px 40px rgba(29, 45, 80, 0.28) !important;
}

/* Violins card: navy fallback while image loads */
body.wp-theme-hugo-wp .mws-violins-card .h-content-swap__normal {
  background-color: var(--mws-navy) !important;
}

/* Portfolio grid: small gap between cards */
body.wp-theme-hugo-wp .style-320 > .h-row {
  gap: 3px !important;
}