/* Magnolia365 Ecards - brand override
   Loaded after theme.css in header.tpl; do not merge into the vendor file
   so future Maian Greetings theme updates don't silently overwrite it. */

:root {
  --m365-green:       #4F6F52; /* primary: navbar, buttons, links */
  --m365-green-dark:  #3E5940; /* hover / focus / active states */
  --m365-gold:        #C6A15B; /* accent: badges, highlights */
  --m365-cream:       #FAF6EE; /* warm neutral background */
  --m365-text:        #4A4238; /* warm neutral heading/text tone */
  --m365-border:      #E4DCC8; /* warm neutral border tone */
}

body {
  background: var(--m365-cream) !important;
}

a {
  color: var(--m365-green);
}
a:hover,
a:focus {
  color: var(--m365-green-dark);
}

.navbar {
  background: var(--m365-green) !important;
}

.btn-primary {
  background: var(--m365-green) !important;
  border: 1px solid var(--m365-green) !important;
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--m365-green-dark) !important;
}

.pagination li.active a {
  background: var(--m365-green-dark) !important;
  border: 1px solid var(--m365-green-dark) !important;
}

.dropdown-menu > .active > a,
.dropdown-menu > .active > a:focus,
.dropdown-menu > .active > a:hover {
  background: var(--m365-green) !important;
}

.windowPanel .planinfo,
footer .socialbuttons a i,
.ecardviewarea .playing {
  color: var(--m365-green-dark) !important;
}

.loading-bottom {
  background: var(--m365-green-dark) !important;
}

h1 {
  color: var(--m365-text) !important;
  border-bottom: 1px solid var(--m365-border) !important;
}

.mswpages {
  border-top: 1px dashed var(--m365-border) !important;
}

.social_shares {
  border: 1px solid var(--m365-border) !important;
}

/* Physical-card upsell button (added in Section 6) uses the gold accent
   so it reads as a distinct call-to-action against the green brand chrome. */
.m365-upsell-btn {
  background: var(--m365-gold) !important;
  border: 1px solid var(--m365-gold) !important;
  color: #fff !important;
}
.m365-upsell-btn:hover,
.m365-upsell-btn:focus {
  background: #B08D45 !important;
  border-color: #B08D45 !important;
  color: #fff !important;
}

/* Category icons - Font Awesome 7 (loaded in header.tpl). Each category gets
   a distinct icon in the nav menu (matched by its unique ?c=N href) and on
   its own listing page header (matched by the cat-i-N class from category.tpl).
   1 Birthday=cake-candles  2 Thank You=hand-holding-heart  3 Everyday=sun
   4 Lunar New Year=dragon  5 Botanical and Floral=leaf  6 Anniversary=glass-cheers
   7 Wedding and Engagement=ring  8 Thinking of You=heart  9 Get Well Soon=heartbeat
   10 Christmas=gifts */
a[href$="?c=1"] i.fa-angle-right,  .cat-i-1  { --fa: "\f1fd"; }
a[href$="?c=2"] i.fa-angle-right,  .cat-i-2  { --fa: "\f4be"; }
a[href$="?c=3"] i.fa-angle-right,  .cat-i-3  { --fa: "\f185"; }
a[href$="?c=4"] i.fa-angle-right,  .cat-i-4  { --fa: "\f6d5"; }
a[href$="?c=5"] i.fa-angle-right,  .cat-i-5  { --fa: "\f06c"; }
a[href$="?c=6"] i.fa-angle-right,  .cat-i-6  { --fa: "\f79f"; }
a[href$="?c=7"] i.fa-angle-right,  .cat-i-7  { --fa: "\f70b"; }
a[href$="?c=8"] i.fa-angle-right,  .cat-i-8  { --fa: "\f004"; }
a[href$="?c=9"] i.fa-angle-right,  .cat-i-9  { --fa: "\f21e"; }
a[href$="?c=10"] i.fa-angle-right, .cat-i-10 { --fa: "\f79c"; }

a[href$="?c=1"] i.fa-angle-right,  .cat-i-1,
a[href$="?c=2"] i.fa-angle-right,  .cat-i-2,
a[href$="?c=3"] i.fa-angle-right,  .cat-i-3,
a[href$="?c=4"] i.fa-angle-right,  .cat-i-4,
a[href$="?c=5"] i.fa-angle-right,  .cat-i-5,
a[href$="?c=6"] i.fa-angle-right,  .cat-i-6,
a[href$="?c=7"] i.fa-angle-right,  .cat-i-7,
a[href$="?c=8"] i.fa-angle-right,  .cat-i-8,
a[href$="?c=9"] i.fa-angle-right,  .cat-i-9,
a[href$="?c=10"] i.fa-angle-right, .cat-i-10 {
  color: var(--m365-gold);
}

/* Free-tier expansion (11-15): Congratulations=trophy Sympathy=dove
   Valentine's Day=kiss Mother's Day=baby Just Because=star.
   Free tier hard-caps at 15 categories / 50 ecards (RESTR_CATS,
   RESTR_ECARDS in control/system/core/mm.php) - this is the ceiling
   until a Standard license is purchased. */
a[href$="?c=11"] i.fa-angle-right, .cat-i-11 { --fa: "\f091"; }
a[href$="?c=12"] i.fa-angle-right, .cat-i-12 { --fa: "\f4ba"; }
a[href$="?c=13"] i.fa-angle-right, .cat-i-13 { --fa: "\f596"; }
a[href$="?c=14"] i.fa-angle-right, .cat-i-14 { --fa: "\f77c"; }
a[href$="?c=15"] i.fa-angle-right, .cat-i-15 { --fa: "\f005"; }

a[href$="?c=11"] i.fa-angle-right, .cat-i-11,
a[href$="?c=12"] i.fa-angle-right, .cat-i-12,
a[href$="?c=13"] i.fa-angle-right, .cat-i-13,
a[href$="?c=14"] i.fa-angle-right, .cat-i-14,
a[href$="?c=15"] i.fa-angle-right, .cat-i-15 {
  color: var(--m365-gold);
}

/* ==========================================================================
   HOMEPAGE CATEGORY ICONS
   Same codepoints as the nav/category-header icons (see the category icon
   map above), applied to the new .home-cat-icon element added in
   html/home/wrapper.htm. Matched by the category's ?c=N URL, carried in
   data-cat-url since this element has no other per-category hook.
   ========================================================================== */
[data-cat-url$="?c=1"]  { --fa: "\f1fd"; }
[data-cat-url$="?c=2"]  { --fa: "\f4be"; }
[data-cat-url$="?c=3"]  { --fa: "\f185"; }
[data-cat-url$="?c=4"]  { --fa: "\f6d5"; }
[data-cat-url$="?c=5"]  { --fa: "\f06c"; }
[data-cat-url$="?c=6"]  { --fa: "\f79f"; }
[data-cat-url$="?c=7"]  { --fa: "\f70b"; }
[data-cat-url$="?c=8"]  { --fa: "\f004"; }
[data-cat-url$="?c=9"]  { --fa: "\f21e"; }
[data-cat-url$="?c=10"] { --fa: "\f79c"; }
[data-cat-url$="?c=11"] { --fa: "\f091"; }
[data-cat-url$="?c=12"] { --fa: "\f4ba"; }
[data-cat-url$="?c=13"] { --fa: "\f596"; }
[data-cat-url$="?c=14"] { --fa: "\f77c"; }
[data-cat-url$="?c=15"] { --fa: "\f005"; }

.home-cat-icon {
  color: var(--m365-gold);
  margin-right: 4px;
}

.homecards h2 {
  display: flex;
  align-items: center;
}

/* ==========================================================================
   NAV ICON HOVER (Ecard Pickup / Latest Ecards)
   Base color inherited from the navbar; hover/focus shifts to gold with a
   quick transition instead of an instant color snap.
   ========================================================================== */
.m365-nav-icon {
  transition: color 0.18s ease;
}
.m365-nav-icon:hover,
.m365-nav-icon:focus {
  color: var(--m365-gold);
}

/* ==========================================================================
   FUN / SEMANTIC ICON COLORS
   A few sidebar icons get a distinct, recognizable color instead of the
   uniform sage/gold treatment, so the sidebar reads as lively rather than
   monotone. Kept to a small, deliberate set - not every icon needs one.
   ========================================================================== */
.m365-search-box .panel-heading i,
.m365-search-box .input-group-addon i {
  color: #4F8FC4; /* calm blue - search/utility */
}

.menuboxarea .panel-heading .fa-binoculars {
  color: #4F8FC4; /* Recently Viewed - same utility blue as search */
}

.menuboxarea .panel-heading .fa-heart-o,
.menuboxarea .panel-heading .fa-heart {
  color: #E0575B; /* Popular Ecards - warm red heart */
}

.menuboxarea .panel-heading .fa-calendar {
  color: var(--m365-green-dark); /* Recently Sent */
}

.m365-category-cloud .panel-heading i {
  color: var(--m365-gold);
}

/* ==========================================================================
   CATEGORY CLOUD
   Restyles {$NAV_CATEGORIES} (vendor markup: <div><a><i></i> text</a></div>
   per category) as a flex-wrap pill cloud, matching the 360dna.com
   category-cloud pattern but in the Magnolia365 palette.
   ========================================================================== */
.m365-category-cloud .cloud-body {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.m365-category-cloud .cloud-body > div {
  display: contents;
}

.m365-category-cloud .cloud-body a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid var(--m365-border);
  background: var(--m365-cream);
  color: var(--m365-text);
  font-size: 12.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease, color 0.18s ease;
}

.m365-category-cloud .cloud-body a i {
  display: none; /* the angle-right chevron reads as clutter in pill form */
}

.m365-category-cloud .cloud-body a:hover,
.m365-category-cloud .cloud-body a:focus {
  background: var(--m365-green);
  border-color: var(--m365-green);
  color: #fff;
  transform: translateY(-2px);
}

/* ==========================================================================
   ECARD CARD HOVER
   Applies to every .ecard .panel wherever it appears - homepage category
   boxes and category grid pages share the same markup (home/ecard.htm and
   category/ecard.htm are identical), so one rule covers both.
   ========================================================================== */
.ecard .panel {
  border: 1px solid var(--m365-border);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ecard .panel:hover {
  border-color: var(--m365-gold);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(74, 66, 56, 0.12);
}

/* ==========================================================================
   SCROLL-REVEAL ANIMATION
   Progressive enhancement: m365-enhance.js adds html.reveal-ready only when
   IntersectionObserver exists and the visitor hasn't asked for reduced
   motion, then tags each target with .scroll-reveal / .is-visible. Content
   is fully visible without JS or under reduced motion - these rules only
   ever apply inside html.reveal-ready.
   ========================================================================== */
html.reveal-ready .scroll-reveal {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
  transition: opacity 0.6s cubic-bezier(0.2, 0.75, 0.2, 1),
              transform 0.6s cubic-bezier(0.2, 0.75, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.reveal-ready .scroll-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-ready .scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ==========================================================================
   BACK TO TOP
   m365-enhance.js toggles .is-visible once the visitor scrolls past the
   first screen; hidden and unfocusable (tabindex -1, aria-hidden) until
   then so it never intercepts keyboard focus while off-screen.
   ========================================================================== */
.m365-back-to-top {
  position: fixed;
  right: clamp(16px, 2.2vw, 28px);
  bottom: clamp(16px, 2.2vw, 28px);
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--m365-green-dark);
  background: var(--m365-green);
  color: #fff;
  box-shadow: 0 10px 24px rgba(62, 89, 64, 0.28);
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  visibility: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background 0.2s ease;
}

.m365-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
}

.m365-back-to-top:hover,
.m365-back-to-top:focus-visible {
  background: var(--m365-gold);
  border-color: var(--m365-gold);
}

/* ==========================================================================
   FOOTER DECORATIVE BACKGROUND
   Pure CSS, no image file - layered radial gradients in the brand palette
   behind the footer's social/attribution row, replacing the flat panel
   background. Same layering technique as a common portfolio "waves"
   treatment, re-colored botanical (soft overlapping blooms) instead of
   literal waves, and built from CSS only so it costs nothing to load.
   ========================================================================== */
footer {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--m365-green) !important;
}

footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 12% 20%, rgba(198, 161, 91, 0.22) 0%, transparent 34%),
    radial-gradient(circle at 85% 15%, rgba(198, 161, 91, 0.16) 0%, transparent 30%),
    radial-gradient(circle at 30% 85%, rgba(250, 246, 238, 0.12) 0%, transparent 32%),
    radial-gradient(circle at 92% 80%, rgba(250, 246, 238, 0.1) 0%, transparent 28%),
    linear-gradient(160deg, var(--m365-green) 0%, var(--m365-green-dark) 100%);
  pointer-events: none;
}

footer > * {
  position: relative;
  z-index: 1;
}
footer, footer a:not(:hover) {
  color: #fff;
}
footer a {
  color: #fff;
  text-decoration: underline;
}