/* ==========================================================================
   Dealsindiscount — brand overrides for the Couponly theme
   Loaded after style.min.css. The template's structure, spacing and components
   are left alone; only the colour ramps are re-pointed at the logo palette.

   The logo coral (#FF6855) carries white text at just 2.85:1, under the 4.5:1
   WCAG AA floor. It stays as --brand for large blocks and badges, while anything
   with white text on it uses the darkened coral below.
   ========================================================================== */

:root {
  /* Primary — interactive. Replaces the template's #1CA2FC blue. */
  --p1: 211, 62, 41;            --p1-hex: #D33E29;   /* 4.68:1 on white */
  --p2: 184, 51, 36;            --p2-hex: #B83324;   /* 5.94:1 on white */

  /* Secondary — teal, so "get code" and "get deal" stay tellable apart.
     Orange next to coral read as one muddy family. */
  --s1: 14, 140, 125;           --s1-hex: #0E8C7D;
  --s2: 64, 178, 91;            --s2-hex: #40B25B;
  --s3: 135, 91, 247;           --s3-hex: #875BF7;

  /* Coral tint ramp, replacing the template's blue family */
  --f1: 255, 237, 233;          --f1-hex: #FFEDE9;
  --f2: 255, 197, 186;          --f2-hex: #FFC5BA;
  --f3: 255, 167, 151;          --f3-hex: #FFA797;
  --f4: 255, 104, 85;           --f4-hex: #FF6855;
  --f5: 184, 51, 36;            --f5-hex: #B83324;
  --f6: 158, 43, 30;            --f6-hex: #9E2B1E;

  /* Teal tint ramp, replacing the template's orange family */
  --f7: 233, 248, 246;          --f7-hex: #E9F8F6;
  --f8: 173, 226, 219;          --f8-hex: #ADE2DB;
  --f9: 138, 213, 203;          --f9-hex: #8AD5CB;
  --f10: 66, 184, 169;          --f10-hex: #42B8A9;
  --f11: 12, 122, 109;          --f11-hex: #0C7A6D;
  --f12: 10, 104, 93;           --f12-hex: #0A685D;

  /* The logo colour itself — large blocks only, never behind small white text */
  --brand: 255, 104, 85;        --brand-hex: #FF6855;
}

/* The template paints its hero with a flat secondary wash. Coral at full strength
   over that much area fights the coupon cards, which are the thing people came for,
   so the hero gets the palest tint and the cards keep the saturation. */
.s1-2nd-bg-color { background: var(--f1-hex) !important; }

/* Header lockup — the supplied logo is a solid coral block, so it needs no tile */
.logo-area img { height: 44px; width: auto; display: block; border-radius: 6px; }
@media (max-width: 575px) { .logo-area img { height: 36px; } }

/* Brand marks. Real artwork sits on a neutral tile so 460 logos of different shapes
   and aspect ratios line up. Where none exists, a monogram in the brand's own colour
   stands in — an honest placeholder reads as a decision, a fake wordmark reads as filler. */
.logo-tile {
  display: grid; place-items: center; background: #fff;
  border: 1px solid var(--n4-hex); border-radius: 12px; overflow: hidden; flex: 0 0 auto;
}
.logo-tile img { max-width: 78%; max-height: 78%; width: auto; height: auto; object-fit: contain; }
.logo-tile.is-sm { width: 44px;  height: 44px;  border-radius: 9px; }
.logo-tile.is-md { width: 78px;  height: 78px; }
.logo-tile.is-lg { width: 116px; height: 116px; border-radius: 16px; }
.logo-tile.is-monogram {
  background: var(--tile, var(--p1-hex));
  border-color: transparent; color: #fff; font-weight: 700; letter-spacing: -.02em;
  /* Extracted brand colours include some very pale yellows and greys; this keeps
     white initials legible on them without flattening the hue. */
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .14);
}
.logo-tile.is-sm span { font-size: 1rem; }
.logo-tile.is-md span { font-size: 1.6rem; }
.logo-tile.is-lg span { font-size: 2.3rem; }

/* Coupon code reveal. The template ships a generic pill; the code itself is the
   payload of this whole site, so it gets the one loud treatment on the page. */
.code-reveal {
  position: relative; display: block; width: 100%; overflow: hidden;
  border: 0; cursor: pointer; text-align: center; text-decoration: none;
  background: var(--p1-hex); color: #fff; font-weight: 700;
  padding: 13px 16px; border-radius: 8px; font-family: inherit; font-size: .95rem;
  transition: background .2s ease;
}
.code-reveal:hover, .code-reveal:focus-visible { background: var(--p2-hex); color: #fff; }
.code-reveal.is-deal { background: var(--s1-hex); }
.code-reveal.is-deal:hover, .code-reveal.is-deal:focus-visible { background: var(--f12-hex); }
.code-reveal .peek {
  position: absolute; right: 0; top: 0; bottom: 0; display: grid; place-items: center;
  padding: 0 12px; background: rgba(255, 255, 255, .22);
  border-left: 2px dashed rgba(255, 255, 255, .5); font-size: .82rem; letter-spacing: .06em;
}

/* Verification date. This is the site's actual promise to the reader and the one
   thing competitors mostly fake, so it is never tucked away in small grey text. */
.verified-line { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; font-weight: 600; }
.verified-line i { color: var(--s2-hex); font-size: 1rem; }
.verified-line.is-stale i { color: var(--n9-hex); }

/* Keyboard focus is invisible in the stock template */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--p1-hex); outline-offset: 2px; border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* discount_label() emits e.g. 25%<span>OFF</span> — the suffix is a second line */
.coupon-item .f1-bg-color b span { display: block; font-size: .58rem; letter-spacing: .09em; font-weight: 600; margin-top: 3px; }

/* ---------- long-form body copy ----------
   Blog posts and static pages are generated HTML, so the elements inside get their
   rhythm here rather than from utility classes on each tag. */
.post-body { line-height: 1.75; }
.post-body > * + * { margin-top: 1.1em; }
.post-body h2 { font-size: 1.7rem; margin-top: 2em; color: var(--n17-hex); }
.post-body h3 { font-size: 1.25rem; margin-top: 1.6em; color: var(--n17-hex); }
.post-body ul, .post-body ol { padding-left: 1.3rem; }
.post-body li + li { margin-top: .45em; }
.post-body a { color: var(--p1-hex); text-decoration: underline; text-underline-offset: 2px; }
.post-body table { width: 100%; border-collapse: collapse; }
.post-body th, .post-body td { padding: 10px 12px; border: 1px solid var(--n4-hex); text-align: left; font-size: .92rem; }
.post-body th { background: var(--n3-hex); font-weight: 600; }
.post-body img { max-width: 100%; height: auto; border-radius: 10px; }
.post-body blockquote {
  margin-left: 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--p1-hex); color: var(--n13-hex);
}

/* Form controls inherit the template's neutrals but not its focus ring */
input, select, textarea { font-family: inherit; font-size: .95rem; color: var(--n17-hex); }
input:focus, select:focus, textarea:focus { border-color: var(--p1-hex) !important; }

/* FAQ accordion — the caret is the only state indicator, so it must actually turn */
.faq-item .faq-q { cursor: pointer; }
.faq-item .faq-q i { transition: transform .2s ease; }
.faq-item.open .faq-q i { transform: rotate(180deg); }

/* Vote row */
.vote-btn {
  background: transparent; border: 1px solid var(--n5-hex); border-radius: 999px;
  padding: 3px 12px; cursor: pointer; transition: border-color .15s ease, color .15s ease;
}
.vote-btn:hover { border-color: var(--p1-hex); color: var(--p1-hex); }
.vote-row.voted .vote-btn { pointer-events: none; opacity: .5; }

/* Store cards lift slightly; coupon cards stay put so the code button reads as the target */
.brand-card { transition: border-color .18s ease, box-shadow .18s ease; }
.brand-card:hover { border-color: var(--n6-hex); box-shadow: var(--box-shadow-p2); }