/* ==========================================================================
   claude.css — Claude Practice page
   Figma: IiXADCvnTkuTba3XXaw2PW node 2602:49269.
   Extends yardos.css + osrs.css + ifs.css. Reuses .ox-ifs-hero, .ox-osrs-section,
   .ox-osrs-cards, .ox-osrs-card, .ox-osrs-problem, .ox-yardos-form primitives.
   Light header handled below via .page-template-page-claude-php (mirrors osrs/ifs).
   ========================================================================== */


/* ──────────────────────────────────────────────────────────────────────────
   claude.css — Page-specific overrides on top of the shared brand stack.

   Inherits from (in order): main.css → yardos.css → osrs.css → ifs.css
   See BRANDING.md sections 4 (shared components) and 5 (template stacks).

   Only declare new rules here that genuinely differ from the brand defaults.
   ────────────────────────────────────────────────────────────────────────── */


/* ──────────────────────────────────────────────────────────────────────────
   Hero — inherits .ox-ifs-hero (cream bg, two-col with logo card right).
   Claude logo is larger and doesn't need the 60px breathing room IFS gives
   its smaller lockup, so zero the media padding on this template only.
   ────────────────────────────────────────────────────────────────────────── */
.ox-claude-page .ox-ifs-hero__media {
  padding: 0;
}
@media (max-width: 1100px) {
  .ox-claude-page .ox-ifs-hero__media { padding: 0; }
}

/* Dark-section eyebrow label override per BRANDING.md §4.1 — .ox-yardos-eyebrow__label
   defaults to #13252A which is invisible on the dark form section. */
.ox-claude-page .ox-yardos-form .ox-yardos-eyebrow__label {
  color: #F3F4F4;
}


/* ──────────────────────────────────────────────────────────────────────────
   Capabilities — 2×2 grid (4 boxes). Uses .ox-osrs-cards--2 from osrs.css
   but with -1px row overlap so borders collapse between rows.
   ────────────────────────────────────────────────────────────────────────── */
.ox-claude-page .ox-osrs-cards--2 + .ox-osrs-cards--2 {
  margin-top: -1px;
}


/* ──────────────────────────────────────────────────────────────────────────
   LIGHT HEADER OVERRIDE — mirrors page-ifs / page-osrs pattern
   ────────────────────────────────────────────────────────────────────────── */
.page-template-page-claude-php { background: #FAF4E5; }
.page-template-page-claude-php .ox-header {
  background: #FAF4E5;
  border-top-color: #FAF4E5;
}
.page-template-page-claude-php .ox-nav__link {
  background: #FAEDDA;
  color: #13252A;
}
.page-template-page-claude-php .ox-nav__link:hover { background: #F5E0C0; }
.page-template-page-claude-php .ox-header__divider { background: #D4C9B8; }
.page-template-page-claude-php .ox-header__logo    { background: #FAF4E5; }
.page-template-page-claude-php .ox-logo__text      { color: #13252A; }
.page-template-page-claude-php .ox-nav__list       { background: #FAF4E5; }
.page-template-page-claude-php .ox-nav__dropdown   { background: #FAF4E5; }
.page-template-page-claude-php .ox-nav__dropdown a { color: #13252A; }
.page-template-page-claude-php .ox-nav__dropdown a:hover { background: #F0E8D5; }
.page-template-page-claude-php .ox-logo .ox-logo__svg path,
.page-template-page-claude-php .ox-logo .ox-logo__svg circle { fill: #13252A; }
.page-template-page-claude-php .ox-nav__chevron path { stroke: #FF6600; }
.page-template-page-claude-php .ox-header__inner { background: transparent; }