/* Federico & Company — site chrome
 *
 * Everything here is carried over from the Claude Design source for these
 * components. Per-element styling lives inline in the HTML (mirroring the
 * `.dc.html` sources one-to-one so the two stay easy to diff); this file holds
 * only what an inline `style` attribute cannot express: the reset, the
 * `[data-reveal]` start state, media queries, and hover/focus states.
 *
 * Sources:
 *   About.dc.html      -> <helmet><style> reset + [data-reveal]
 *   SiteNav.dc.html    -> <helmet><style> .fc-nav-links / .fc-nav-toggle
 *   _ds_bundle.js      -> components/core/Button.jsx (hover -> navy-700)
 */

/* --- reset (About.dc.html helmet) --- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; }
a { text-decoration: none; }

/* The `hidden` attribute is only a UA-stylesheet `display: none`, so ANY
   inline `display` on the element beats it and the element stays visible while
   `el.hidden` reports true. Several elements here are toggled by `hidden` and
   carry an inline display (the contact form, the mobile nav drawer), so make
   the attribute actually mean hidden. */
[hidden] { display: none !important; }

/* --- scroll reveal (About.dc.html helmet); driven by js/interactions.js --- */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

/* --- nav (SiteNav.dc.html helmet) --- */
.fc-nav-toggle { display: none; }

/* Raised from 1040px when the Client Portal button was added to the row.
   The row is a flex container inside a fixed 1120px max-width, so the extra
   button does not overflow — it makes the text links shrink instead, and
   "AI Solutions" wrapped to two lines. The links now carry `white-space:
   nowrap` (see generate-pages.py), which converts that silent squeeze into
   real overflow, so the collapse point has to move out to match. */
@media (max-width: 1120px) {
  .fc-nav-links { display: none !important; }
  .fc-nav-toggle { display: flex !important; }
}

/* Mobile drawer — replaces the <sc-if value="{{ menuOpen }}"> in SiteNav.dc.html.
   Toggled by js/nav.js via the `hidden` attribute. */
.fc-nav-menu { display: flex; }
.fc-nav-menu[hidden] { display: none; }

/* --- Button (Button.jsx VARIANTS.primary + its '--hover-bg') ---
   `background` has to live here rather than in the element's inline style:
   an inline declaration outranks any author-stylesheet rule, so an inline
   background would make the :hover below inert. --- */
.fc-btn-primary { background: var(--color-navy-600); }
.fc-btn-primary:hover,
.fc-btn-primary:active { background: var(--color-navy-700); }

/* --- Outline buttons on the dark page.
   Button.jsx VARIANTS.outline is designed for a light surface: navy-600 text
   on a transparent background, hovering to navy-50 (#eef2f7). On this site it
   is used on dark navy, and the design's own dark-page usage (Home's "View Our
   Services") overrides the text and border to white but NOT the hover.
   Reproduced literally that gives white-on-#eef2f7 at hover — an invisible
   label — and, on Contact's un-overridden submit, navy-600 text on navy-900 at
   rest. DELIBERATE DEVIATION: both use the design's own outline-on-dark
   treatment (white text/border) with a translucent white hover. Revert to
   `background: var(--color-navy-50)` on hover for literal fidelity. --- */
.fc-btn-outline { background: transparent; }
.fc-btn-outline:hover,
.fc-btn-outline:active { background: rgba(255,255,255,0.12); }

.fc-btn-outline-navy {
  background: transparent;
  color: #ffffff;
  border: 1.5px solid rgba(255,255,255,0.35);
}
.fc-btn-outline-navy:hover,
.fc-btn-outline-navy:active { background: rgba(255,255,255,0.12); }

/* --- Card + pill hover (the DC `style-hover` attribute, which has no static
   equivalent). `transform` needs !important here and nowhere else:
   interactions.js writes `el.style.transform = 'translateY(0)'` inline when a
   [data-reveal] element reveals, and an inline declaration would outrank this
   rule — the lift would silently never happen. Un-hover still falls back to
   that inline translateY(0) correctly. --- */
.fc-card {
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(192,192,192,0.14);
}
.fc-card:hover {
  background: rgba(255,255,255,0.06);
  transform: translateY(-4px) !important;
}
.fc-card--home:hover { border-color: rgba(122,155,186,0.55); }
.fc-card--svc:hover  { border-color: rgba(122,155,186,0.5); }
.fc-card--ai         { border-color: rgba(122,155,186,0.22); }
.fc-card--ai:hover   { border-color: rgba(122,155,186,0.55); }

.fc-pill {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(192,192,192,0.2);
}
.fc-pill:hover {
  background: rgba(122,155,186,0.14);
  border-color: rgba(122,155,186,0.45);
}

/* --- Honeypot.
   Positioned off-screen rather than `display: none` or `visibility: hidden`,
   because some bots deliberately skip fields hidden those two ways — which
   would defeat the trap. Kept out of the accessibility tree and the tab order
   by aria-hidden + tabindex="-1" on the markup itself. --- */
.fc-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Contact form fields (Input.jsx / Textarea.jsx, translated literally —
   including the white field on a dark page, which is what those components
   do). The design's helmet carried a `#fc-contact-form input::placeholder`
   rule setting placeholders to rgba(255,255,255,0.35); it was dead (no element
   had that id) and would have been white-on-white if it had matched, so it is
   dropped in favour of the browser default. --- */
.fc-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  background: #fff;
  border: 1.5px solid var(--color-silver-300);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  box-sizing: border-box;
}
.fc-input:focus {
  border-color: var(--color-navy-500);
  box-shadow: var(--focus-ring);
}
.fc-textarea {
  height: auto;
  padding: 10px 12px;
  resize: vertical;
  line-height: var(--leading-relaxed);
}

/* --- Stacking.
   Added during the import: these grids are fixed two-track layouts with no
   breakpoint in the source, so they overflow below roughly 620–660px. --- */
@media (max-width: 720px) {
  .fc-about-hero {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    justify-items: center;
    text-align: center;
  }
  .fc-about-hero .fc-about-hero-badges { justify-content: center; }
}

@media (max-width: 860px) {
  .fc-split { grid-template-columns: 1fr !important; gap: 32px !important; }
  .fc-split--media { justify-items: center; }
}

@media (max-width: 720px) {
  .fc-book-banner { grid-template-columns: 1fr !important; padding: 32px 24px !important; }
  .fc-form-row { grid-template-columns: 1fr !important; }
}

/* --- Focus visibility.
   Added during the import: the source has no focus styling, and the site is
   dark-on-dark, so keyboard focus was invisible. --- */
:focus-visible {
  outline: 2px solid var(--color-navy-300);
  outline-offset: 3px;
}