/* ==========================================================================
   FUN COUPONS: HOMEPAGE CLEAN-UP OVERRIDES  (fc-home-cleanup.css, v1.0, Oct 29 2026)

   DO NOT EDIT, MERGE OR REGENERATE THIS FILE WITH AN AI/CODE TOOL.
   It is a self-contained override layer. Change homepage.css instead, and only
   change this file by hand after reading notes.md.

   - Loaded LAST, on the front page only (see notes.md, "Install").
   - Every selector starts with  body.home #fc-home  (the homepage <main>), so it
     beats the generic .fch rules in homepage.css and affects no other page.
     The one exception is the homepage <body> background in section 6.
   - Pure CSS: no markup, URL, JS or functionality changes.
   ========================================================================== */

/* ---------- 1. Phone mockup: the real header logo in the app bar ----------
   Same file the site header uses (assets/brand/logo.svg). Shown at its native
   aspect ratio 1095.4 : 137.2, with no recolour or filter. */
body.home #fc-home .fch-mini__bar{display:flex!important;align-items:center!important;justify-content:center!important;
  height:34px!important;padding:0 10px!important;background:#fff!important}
body.home #fc-home .fch-mini__bar > span{display:block!important;flex:none!important;width:120px!important;height:auto!important;
  aspect-ratio:1095.4 / 137.2!important;font-size:0!important;line-height:0!important;color:transparent!important;overflow:hidden!important;
  background:url("/wp-content/themes/funcoupons-child/assets/brand/logo.svg?v=0.10.101") center / 100% 100% no-repeat!important;
  filter:none!important;opacity:1!important}
@media (min-width:960px){
  body.home #fc-home .fch-mini__bar{height:42px!important}
  body.home #fc-home .fch-mini__bar > span{width:150px!important}
}
/* keep the rotating mini pages (homepage.js .is-on) under the taller bar */
body.home #fc-home .fch-phone__scr{position:relative!important}

/* ---------- 2. Hero phone + floating badges ----------
   Badges hug the bezel from the outside and never cover text inside the phone.
   Two of them are drawn with CSS (::before/::after on .fch-phone), using the
   site's own wording, so they keep working whatever store the phone is showing.
   If the staging markup ever brings back .fch-chip elements, those are hidden
   so the badges can't double up. */
body.home #fc-home .fch-chip{display:none!important}
body.home #fc-home .fch-phone::before,
body.home #fc-home .fch-phone::after{position:absolute;z-index:4;display:block;box-sizing:border-box;white-space:pre;pointer-events:none;
  background-color:#fff;background-repeat:no-repeat;border:1px solid rgba(255,255,255,.9);border-radius:14px;
  box-shadow:0 10px 28px rgba(17,64,128,.18),0 2px 6px rgba(17,64,128,.08);font:600 13px/1.3 Inter,system-ui,sans-serif;color:#0F1B2D}
/* badge 1: verified + dated */
body.home #fc-home .fch-phone::before{content:"Verified codes\A Every code dated";color:#137A43;
  padding:10px 14px 10px 40px;background-position:12px 50%;background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23137A43' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m8 12.2 2.8 2.8L16.2 9.5'/%3E%3C/svg%3E")}
/* badge 2: SHOW CODE = one-tap copy */
body.home #fc-home .fch-phone::after{content:"SHOW CODE\A Copy in one tap";color:#0B3D7A;font-weight:700;letter-spacing:.02em;
  padding:10px 14px 10px 40px;background-color:#EEF5FD;border:1.5px dashed #B9D7F7;background-position:12px 50%;background-size:20px 20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F6FD1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='13' height='13' rx='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/svg%3E")}

/* phones (<600px): phone sits left of centre, two compact badges stacked on its right */
@media (max-width:599px){
  body.home #fc-home .fch-phone{--pw:228px;--pl:max(14px,calc(50% - 181px));height:524px!important;margin-top:20px!important;overflow:visible!important}
  body.home #fc-home .fch-phone__dev{left:var(--pl)!important;margin-left:0!important;width:var(--pw)!important;height:476px!important;top:16px!important}
  body.home #fc-home .fch-phone::before,
  body.home #fc-home .fch-phone::after{left:calc(var(--pl) + var(--pw) - 14px);right:auto;font-size:11.5px;border-radius:12px;
    padding:8px 10px 8px 32px;background-position:9px 50%;background-size:17px 17px}
  body.home #fc-home .fch-phone::before{top:120px}
  body.home #fc-home .fch-phone::after{top:300px}
}
/* tablets (600-959px): centred phone, one badge on each side */
@media (min-width:600px) and (max-width:959px){
  body.home #fc-home .fch-phone{height:560px!important;margin-top:24px!important;overflow:visible!important}
  body.home #fc-home .fch-phone__dev{width:250px!important;height:510px!important;margin-left:-125px!important;left:50%!important}
  body.home #fc-home .fch-phone::before{right:calc(50% + 125px - 14px);top:120px}
  body.home #fc-home .fch-phone::after{left:calc(50% + 125px - 14px);top:320px}
}
/* desktop: badges anchored to the bezel, left high and right low */
@media (min-width:960px){
  body.home #fc-home .fch-phone{height:580px!important;overflow:visible!important}
  body.home #fc-home .fch-phone__dev{top:20px!important;height:540px!important}
  body.home #fc-home .fch-phone::before{right:calc(50% + 145px - 16px);top:150px;font-size:14px}
  body.home #fc-home .fch-phone::after{left:calc(50% + 145px - 16px);top:372px;font-size:14px}
}

/* ---------- 3. One section rhythm ----------
   40px top/bottom on phones, 64px on desktop. Backgrounds alternate so two white
   sections never stack their padding into one big gap:
   Fun Deals (white) · How it works (tint) · Stores + categories (white) · Latest coupons (tint) · Why (white) */
body.home #fc-home > .fch-sec{padding-top:40px!important;padding-bottom:40px!important}
body.home #fc-home > .fch-sec[aria-labelledby="fch-latest-h"]{background:#F5F8FC!important}
body.home #fc-home > .fch-sec[aria-labelledby="fch-latest-h"] .fc-ticket{--tear-bg:#F5F8FC}
body.home #fc-home .fch-head--sub{margin-top:40px!important}
body.home #fc-home .fch-head{align-items:flex-end!important}
body.home #fc-home .fch-trend__head{align-items:center!important;margin-bottom:14px!important}
@media (min-width:960px){
  body.home #fc-home > .fch-sec{padding-top:64px!important;padding-bottom:64px!important}
  body.home #fc-home > .fch-sec--trend{padding-top:56px!important;padding-bottom:48px!important}
  body.home #fc-home .fch-head--sub{margin-top:56px!important}
}

/* ---------- 4. Aligned grids ---------- */
/* store wall: equal rows; logo, name, badge and count line up across a row */
body.home #fc-home .fch-wall{align-items:stretch!important}
body.home #fc-home .fch-wall .fc-rel-card__body{flex:1 1 auto!important;justify-content:flex-start!important}
body.home #fc-home .fch-wall .fc-rel-card__name{min-height:2.6em!important;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important}
body.home #fc-home .fch-wall .fc-rel-card__best{white-space:nowrap!important}
@media (max-width:599px){
  body.home #fc-home .fch-wall{gap:10px!important}
  body.home #fc-home .fch-wall .fc-rel-card__logo{height:40px!important;margin-bottom:10px!important}
  /* 15 category tiles in 2 columns leave one orphan, so the last tile spans both */
  body.home #fc-home .fch-cats .fch-cat:last-child:nth-child(odd){grid-column:1 / -1!important}
}

/* ---------- 5. Tap targets: ticket title links are at least 44px tall (titles are not clamped) ---------- */
body.home #fc-home .fc-ticket__title a{display:block!important;min-height:44px!important}
body.home #fc-home .fch-hero__logo{min-height:44px!important}

/* ---------- 6. Grey band above the footer ----------
   fc-main.css paints body.fc-ui grey, and also body:has(.fc-store), which the
   homepage matches through its .fch-trend.fc-store rows. Under 480px that rule is
   a high-specificity !important. The homepage page background is set to white. */
html:root body.home.fc-ui.fc-ui.fc-ui.fc-ui.fc-ui.fc-ui{background-color:#fff!important}