/* ABCwebsites brand logo bundle — self-hosted (no external requests).
   Bricolage Grotesque is a VARIABLE font; one woff2 covers weights 200..800. */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
  src:url('/wp-content/uploads/2026/06/bricolage-grotesque.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* =============================================================
   ABCwebsites — logo lockup, standalone stylesheet
   All visual rules are namespaced under .abc-logo so it can be
   dropped into any existing site without bleeding into other
   styles. Drives layout from two custom properties:
     --cell      size of one quad cell
     --wm-size   wordmark font-size
   ============================================================= */

.abc-logo{
  /* tokens — override these via :root or a parent class if needed */
  --abc-red:       #D4501C;
  --abc-red-deep:  #A93A12;
  --abc-ink:       #0F1115;
  --abc-ink-warm:  #1A1614;
  --abc-muted:     #6B7280;
  --abc-muted-d:   #9aa0a6;

  --cell: 60px;
  --wm-size: 36px;

  display: inline-flex;
  align-items: center;
  gap: 24px;
  color: var(--abc-ink); /* used as fg for wordmark "websites" in light mode */
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.abc-logo.abc-dark{
  color: #fff;
}

/* ----- Quad mark ----- */
/* NB: every visual rule below is scoped under .abc-logo so the bundle can be
   dropped onto any page WITHOUT its generic class names (.abc-quad/.abc-cell/
   .abc-a …) bleeding onto a host's own elements that happen to reuse them.
   Several RdR tools carry a bespoke inline corner logo with the same class
   names; leaving these unscoped collapsed those logos (var(--cell) is undefined
   outside an .abc-logo, so the grid tracks became invalid). Keep them scoped. */
.abc-logo .abc-quad{
  display: grid;
  grid-template-columns: repeat(2, var(--cell));
  grid-template-rows:    repeat(2, var(--cell));
  gap: 0;
  border-radius: calc(var(--cell) * .11);
  overflow: hidden;
  flex: 0 0 auto;
}
.abc-logo .abc-cell{
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: calc(var(--cell) * .58);
  line-height: 1;
}
.abc-logo .abc-a    { background: var(--abc-red); color: #fff; }
.abc-logo .abc-b    { background: #fff; color: var(--abc-ink); }
.abc-logo .abc-c    { background: #fff; color: var(--abc-ink); }
.abc-logo .abc-lap  { background: var(--abc-red); color: #fff; }

/* light-mode emboss */
.abc-light .abc-quad{
  box-shadow:
    inset 0 0 0 1.5px var(--abc-ink),
    0 2px 0 rgba(15,17,21,.04),
    0 10px 20px -6px rgba(15,17,21,.18),
    0 24px 48px -16px rgba(15,17,21,.16);
}
/* dark — same cream-embossed cells + lift as light */
.abc-dark .abc-quad{
  box-shadow:
    inset 0 0 0 1.5px var(--abc-ink),
    0 2px 0 rgba(0,0,0,.20),
    0 10px 20px -6px rgba(0,0,0,.45),
    0 24px 48px -16px rgba(0,0,0,.55);
}
.abc-light .abc-b,
.abc-light .abc-c,
.abc-dark .abc-b,
.abc-dark .abc-c{
  background: linear-gradient(180deg, #ffffff 0%, #ECE8DE 100%);
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(15,17,21,.10),
    inset 0 -6px 12px -8px rgba(15,17,21,.18);
}
.abc-light .abc-a,
.abc-light .abc-lap,
.abc-dark .abc-a,
.abc-dark .abc-lap{
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,.18),
    inset 0 -2px 4px -2px rgba(0,0,0,.20);
}

/* RdR toolbox variant: keep the standard light B/C cells, force BLACK letters.
   High specificity + !important to beat the hub's stray white-letter override
   (body.page-id-758 .abc-cell.abc-b{color:#fff}) and the cream-gradient !important. */
.abc-logo.abc-rdr .abc-cell.abc-b,
.abc-logo.abc-rdr .abc-cell.abc-c{
  background: linear-gradient(180deg, #ffffff 0%, #ECE8DE 100%) !important;
  color: #0f1115 !important;
  box-shadow:
    inset 0  1px 0 rgba(255,255,255,1),
    inset 0 -1px 1px rgba(15,17,21,.10),
    inset 0 -6px 12px -8px rgba(15,17,21,.18) !important;
}

/* ----- Laptop SVG ----- */
.abc-logo .abc-laptop{
  display: block;
  width:  calc(var(--cell) * .72);
  height: calc(var(--cell) * .54);
  color: #fff;
}
@keyframes abc-blink { 50% { opacity: 0; } }
.abc-logo .abc-cursor{ animation: abc-blink 1.05s steps(1, end) infinite; }

/* ----- Wordmark + taglines ----- */
.abc-logo .abc-wm-block{
  display: flex;
  flex-direction: column;
}
.abc-logo .abc-wm{
  font-weight: 800;
  font-size: var(--wm-size);
  letter-spacing: -0.03em;
  line-height: 0.95;
}
.abc-logo .abc-wm-abc{ color: var(--abc-red); }
.abc-light .abc-wm-web{ color: var(--abc-ink); }
.abc-dark  .abc-wm-web{ color: #fff; }
/* Safety net: on a light-themed page the wordmark is always ink, even if a logo
   instance is mistakenly still tagged .abc-dark (e.g. a stuck theme-sync). */
html[data-theme="light"] .abc-wm-web{ color: var(--abc-ink); }
html[data-theme="dark"]  .abc-wm-web{ color: #fff; }

.abc-logo .abc-tag-row{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 12px;
}
.abc-logo .abc-tags{
  display: flex;
  flex-direction: column;
  gap: 3px;
  transform: translateY(-5px);
}
.abc-logo .abc-tags > div{
  font-weight: 600;
  font-size: calc(var(--wm-size) * .37);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3;
}
.abc-light .abc-tags > div{ color: var(--abc-muted); }
.abc-dark  .abc-tags > div{ color: var(--abc-muted-d); }

/* ----- Octopus mascot ----- */
.abc-logo .abc-octo{
  width:  calc(var(--wm-size) * 2.3);
  height: calc(var(--wm-size) * 1.28);
  background-color: var(--abc-red);
  -webkit-mask: url('/wp-content/uploads/2026/06/octopus.png?v=5') center / contain no-repeat;
          mask: url('/wp-content/uploads/2026/06/octopus.png?v=5') center / contain no-repeat;
  flex: 0 0 auto;
}

/* ----- Variants ----- */
.abc-logo.abc-compact .abc-octo{ display: none; }  /* taglines only, no octopus */
.abc-logo.abc-mark-only{ gap: 0; }
.abc-logo.abc-mark-only .abc-wm-block,
.abc-logo.abc-mark-only .abc-octo{ display: none; }

/* ----- Responsive guidance (drop in if responsive lockup is desired) -----
@media (max-width: 480px){
  .abc-logo .abc-octo { display: none; }   // keep both tagline lines, drop octopus
}
@media (max-width: 360px){
  .abc-logo .abc-wm-block { display: none; }  // quad mark only
}
*/


/* ---- standard SITE HEADER scale (retune here once → propagates everywhere) ---- */
.abc-logo.abc-h{ --cell:30px; --wm-size:22px; gap:14px; text-decoration:none; }
.abc-logo.abc-h .abc-tag-row{ margin-top:7px; }
/* hero scale for the homepage */
.abc-logo.abc-hero{ --cell:60px; --wm-size:46px; gap:24px; }

/* responsive: drop octopus on narrow, quad-only on very narrow */
@media (max-width:560px){ .abc-logo .abc-octo{ display:none; } }
@media (max-width:380px){ .abc-logo.abc-h .abc-wm-block{ display:none; } .abc-logo.abc-h{ gap:0; } }