/*
Theme Name:   Hello Elementor Child (Moment Catcher)
Theme URI:    https://momentcatcher.icu/
Description:  Child theme of Hello Elementor for momentcatcher.icu. Reads the Elementor Kit's Global colours and fonts as readable CSS variables, carries the brand signature utilities (rule lines, strips, eyebrow, signature font) and a few brand-wide rules. A safe place for custom CSS and PHP that survives parent-theme updates.
Author:       Moment Catcher
Author URI:   https://momentcatcher.icu/
Template:     hello-elementor
Version:      1.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License:      GNU General Public License v3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain:  hello-elementor-child-mc
*/

/* ==========================================================================
   1. TOKENS: readable names for the Elementor Kit's Global colours and fonts
   Elementor prints its globals on <body> as --e-global-color-<id>. The
   custom ones have hashed ids (36ffa3f = Accent 2), so this block gives
   them names. Change a colour in Site Settings and everything below
   follows. The hex after the comma is only the fallback if Elementor's
   CSS ever fails to load.
   ========================================================================== */
body {
  /* System colours (Site Settings > Global Colors) */
  --mc-navy:        var(--e-global-color-primary,   #141C44); /* Primary */
  --mc-pink:        var(--e-global-color-secondary, #D1267B); /* Secondary */
  --mc-charcoal:    var(--e-global-color-text,      #333333); /* Text */
  --mc-orange:      var(--e-global-color-accent,    #F29829); /* Accent */
  /* Custom colours */
  --mc-blue:        var(--e-global-color-36ffa3f,   #8CCAD4); /* Accent 2 */
  --mc-grey:        var(--e-global-color-19a1d1f,   #F5F5F5); /* Background */
  --mc-white:       var(--e-global-color-8964b8a,   #FFFFFF); /* Primary Background */
  --mc-pink-dark:   var(--e-global-color-b5691c8,   #B01F69); /* Hover */
  --mc-grey-mid:    var(--e-global-color-2c1443e,   #9E9E9E); /* Dividers */
  --mc-cream:       var(--e-global-color-a11c0e1,   #F6F1E6); /* Cream */
  --mc-paper:       var(--e-global-color-a11c0e2,   #FBF8F1); /* Paper */
  --mc-yellow:      var(--e-global-color-a11c0e3,   #F7D24A); /* Yellow */
  --mc-pale-pink:   var(--e-global-color-a11c0e4,   #F6B9CF); /* Pale Pink */
  --mc-lavender:    var(--e-global-color-a11c0e5,   #C9B4E6); /* Lavender */
  --mc-kraft:       var(--e-global-color-a11c0e6,   #E5D3B3); /* Kraft */
  --mc-tan:         var(--e-global-color-a11c0e7,   #E6C3A2); /* Tan */
  --mc-ink:         var(--e-global-color-a11c0e8,   #111111); /* Ink */
  --mc-navy-dark:   #0F2040; /* Dark Navy: in the guide, not (yet) a Global */

  /* Fonts (Site Settings > Global Fonts and Custom Fonts) */
  --mc-font-marker: var(--e-global-typography-primary-font-family,   "Permanent Marker"), cursive;
  --mc-font-hand:   var(--e-global-typography-secondary-font-family, "Caveat"), cursive;
  --mc-font-body:   var(--e-global-typography-text-font-family,      "Noto Sans"), system-ui, sans-serif;

  --mc-radius:      0px;  /* brand default: sharp corners */
  --mc-nav-height:  70px; /* hero top padding should match */
}

/* ==========================================================================
   2. BRAND-WIDE RULES (small on purpose; Elementor Site Settings own the rest)
   ========================================================================== */
::selection { background: var(--mc-pink); color: #fff; }
:focus-visible { outline: 3px solid var(--mc-orange); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   3. SIGNATURE UTILITIES
   Ported from Site Settings > Custom CSS ("MCS V2"), same class names so
   existing pages keep working. Colours now come from the Kit (section 1)
   instead of hard-coded hexes. Delete the Custom CSS block in Site
   Settings once this theme is active, or the two will fight.
   ========================================================================== */

/* Rainbow gradient strip (top of trust strip, ticker, page top) */
.mcs-rainbow-strip {
  height: 3px; width: 100%; display: block;
  background: linear-gradient(90deg, var(--mc-pink) 0%, var(--mc-blue) 50%, var(--mc-orange) 100%);
}

/* Hot Pink H2 underline: 60 x 3px, bottom-left of heading */
.mcs-h2-underline { display: inline-block; position: relative; padding-bottom: 14px; }
.mcs-h2-underline::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 60px; height: 3px; background: var(--mc-pink);
}

/* Sun Orange section-header underline: 40 x 3px */
.mcs-h-underline-orange { display: inline-block; position: relative; padding-bottom: 14px; }
.mcs-h-underline-orange::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 40px; height: 3px; background: var(--mc-orange);
}

/* Service card left strip 4px, rotates per card */
.mcs-service-card { position: relative; }
.mcs-service-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; background: var(--mc-pink);
}
.mcs-service-card:nth-child(3n+2)::before { background: var(--mc-orange); }
.mcs-service-card:nth-child(3n+3)::before { background: var(--mc-blue); }

/* Work / portfolio card top border 3px, rotates */
.mcs-work-card { border-top: 3px solid var(--mc-orange); }
.mcs-work-card:nth-child(3n+2) { border-top-color: var(--mc-blue); }
.mcs-work-card:nth-child(3n+3) { border-top-color: var(--mc-pink); }

/* Footer top border, Hot Pink 4px */
footer.site-footer, .mcs-footer { border-top: 4px solid var(--mc-pink); }

/* Accent eyebrow label (Meekz ruling 2026-09-28: pink, 11px) */
.mcs-accent-label {
  font-family: var(--mc-font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; line-height: 1.4em;
  color: var(--mc-pink);
}

/* Year stamp (top-right of service card) */
.mcs-year-stamp {
  font-family: var(--mc-font-body); font-weight: 700; font-size: 11px;
  letter-spacing: 1.5px; text-transform: uppercase; color: var(--mc-grey-mid);
  position: absolute; top: 18px; right: 22px;
}

/* Sharp corners everywhere (V2 mandate).
   FIXED: no longer squares images inside the Moment Catcher widgets
   (round photos in the Circle Infographic need their radius). */
button, .elementor-button, .elementor-widget-button .elementor-button,
input, textarea, select { border-radius: var(--mc-radius) !important; }
img:not(.mcw-ci img):not(.mcw-jc img), .elementor-image img, .elementor-image-box-img img {
  border-radius: var(--mc-radius) !important;
}

/* ==========================================================================
   4. THEME STYLE FIXES (Meekz rulings 2026-09-28)
   These override the Kit's Theme Style so nothing has to be re-entered in
   Site Settings. Specificity matches Elementor's own kit rules.
   ========================================================================== */

/* 1. Links: colour only. No more uppercase 15px labels mid-sentence.
   Nav and eyebrow widgets carry the Accent typography themselves. */
body.elementor-kit-31 a,
[class*="elementor-kit-"] a {
  font-family: inherit; font-size: inherit; font-weight: inherit;
  text-transform: inherit; line-height: inherit; letter-spacing: inherit;
}
/* 2. Link hover: Hover colour (#B01F69), not Light Blue on white. */
[class*="elementor-kit-"] a:hover,
[class*="elementor-kit-"] a:focus { color: var(--mc-pink-dark); }

/* 3. Standard button hover (forms, submit, Elementor button widget):
   background Hover, text white. The Liquid Button (Unlimited Elements)
   paints its own canvas and is not affected. */
[class*="elementor-kit-"] button:hover,
[class*="elementor-kit-"] button:focus,
[class*="elementor-kit-"] input[type="button"]:hover,
[class*="elementor-kit-"] input[type="button"]:focus,
[class*="elementor-kit-"] input[type="submit"]:hover,
[class*="elementor-kit-"] input[type="submit"]:focus,
[class*="elementor-kit-"] .elementor-button:hover,
[class*="elementor-kit-"] .elementor-button:focus {
  color: var(--mc-white); background-color: var(--mc-pink-dark); border-color: var(--mc-pink-dark);
}
/* b. Button typography follows the Liquid Button: Caveat 30px. */
[class*="elementor-kit-"] button,
[class*="elementor-kit-"] input[type="button"],
[class*="elementor-kit-"] input[type="submit"],
[class*="elementor-kit-"] .elementor-button {
  font-family: var(--mc-font-hand); font-size: 30px; font-weight: 700;
  text-transform: none; letter-spacing: 0; line-height: 1.1em;
}

/* a. Headings linked to the Global fonts, so changing Primary or Secondary
   in Site Settings changes every heading. 6. H1 line-height 1.05em.
   7. Tablet and mobile sizes. */
[class*="elementor-kit-"] h1, [class*="elementor-kit-"] h2 {
  font-family: var(--mc-font-marker); font-weight: 400;
}
[class*="elementor-kit-"] h3, [class*="elementor-kit-"] h4, [class*="elementor-kit-"] h5 {
  font-family: var(--mc-font-hand); font-weight: 700;
}
[class*="elementor-kit-"] h1 { font-size: 60px; line-height: 1.05em; }
[class*="elementor-kit-"] h2 { font-size: 40px; line-height: 1.1em; }
[class*="elementor-kit-"] h3 { font-size: 30px; line-height: 1.2em; }
[class*="elementor-kit-"] h4 { font-size: 26px; line-height: 1.2em; }
@media (max-width: 1024px) {
  [class*="elementor-kit-"] h1 { font-size: 44px; }
  [class*="elementor-kit-"] h2 { font-size: 32px; }
  [class*="elementor-kit-"] h3 { font-size: 26px; }
  [class*="elementor-kit-"] h4 { font-size: 22px; }
}
@media (max-width: 767px) {
  [class*="elementor-kit-"] h1 { font-size: 34px; }
  [class*="elementor-kit-"] h2 { font-size: 26px; }
  [class*="elementor-kit-"] h3 { font-size: 22px; }
  [class*="elementor-kit-"] h4 { font-size: 20px; }
}

/* c. Accent global is 11px, not 15px. Elementor prints the size as a
   variable on the kit; overriding the variable overrides every use. */
[class*="elementor-kit-"] { --e-global-typography-accent-font-size: 11px; }

/* e. Page transition colour: Lavender. */
[class*="elementor-kit-"] e-page-transition { background-color: var(--mc-lavender); }

/* ==========================================================================
   5. YOUR CSS GOES BELOW THIS LINE
   ========================================================================== */