/*
Theme Name: Feker Branding
Theme URI: https://www.fekerbranding.com
Author: Feker Branding
Description: Custom theme built from the Feker Branding website design handoff.
             Violet-to-cyan gradient system, Poppins/Manrope/JetBrains Mono.
Version: 0.2.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: feker-branding
*/

/* ---------------------------------------------------------------
   Design tokens — from wordpress-handoff.md
   --------------------------------------------------------------- */
:root {
  --fk-ink:        #131220;
  --fk-body:       #464453;
  --fk-muted:      #5A5866;
  --fk-bg:         #F5F4F1;
  --fk-surface:    #FFFFFF;
  --fk-surface-2:  #FAFAFC;
  --fk-line:       rgba(19,18,32,.07);
  --fk-dark:       #0A0916;
  --fk-dark-mid:   #1C1543;
  --fk-dark-blue:  #0E3468;

  --fk-violet: #7A2BF5;
  --fk-indigo: #4A63F0;
  --fk-blue:   #2C6CF2;
  --fk-sky:    #23B8F5;
  --fk-cyan:   #22D3EE;
  --fk-grad:      linear-gradient(92deg,#7A2BF5,#4A63F0,#23B8F5);
  --fk-grad-dark: linear-gradient(140deg,#0A0916,#1C1543 55%,#0E3468);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Body colour is the ink tone, matching the design. Paragraphs carry their
   own lighter grey inline; dark panels set white on a wrapper and headings
   inherit down from whichever section they sit in. */
body {
  background: var(--fk-bg);
  color: var(--fk-ink);
  font-family: 'Manrope', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Headings inherit their colour from the section they sit in — the dark
   panels set white on a wrapper and rely on that cascading down. Setting a
   colour here would override it and make dark-panel headlines invisible. */
h1, h2, h3, h4 { font-family: 'Poppins', sans-serif; color: inherit; }

img { max-width: 100%; }

/* WordPress admin bar must not sit on top of the sticky header */
body.admin-bar header[data-header] { top: 32px !important; }
@media screen and (max-width: 782px) {
  body.admin-bar header[data-header] { top: 46px !important; }
}

/* ---------------------------------------------------------------
   Motion — reveal, marquee, float, count-up
   --------------------------------------------------------------- */
@keyframes fk-marquee { 
  0% { transform: translateX(0px); }
  100% { transform: translateX(-50%); }
}
@keyframes fk-pulse-ring {
  0% { box-shadow: 0 0 0 0 rgba(14, 52, 104, 0.35); }
  70% { box-shadow: 0 0 0 8px rgba(14, 52, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(14, 52, 104, 0); }
}
@keyframes fk-float { 
  0%, 100% { transform: translate3d(0px, 0px, 0px) scale(1); }
  50% { transform: translate3d(-2%, 3%, 0px) scale(1.05); }
}
@keyframes fk-spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* component hover/focus states lifted from the design */
.scp0:hover { box-shadow: rgba(74, 99, 240, 0.45) 0px 12px 30px !important; transform: translateY(-1px) !important; }
.scp1:hover { transform: translateY(-2px) !important; box-shadow: rgba(74, 99, 240, 0.42) 0px 20px 44px !important; }
.scp2:hover { background: rgb(255, 255, 255) !important; border-color: rgba(19, 18, 32, 0.3) !important; }
.scp3:hover { transform: translateY(-6px) !important; box-shadow: rgba(19, 18, 32, 0.1) 0px 22px 44px !important; }
.scp4:hover { transform: translateY(-6px) !important; box-shadow: rgba(19, 18, 32, 0.28) 0px 22px 44px !important; }
.scp5:hover { border-color: rgb(122, 43, 245) !important; color: rgb(122, 43, 245) !important; }
.scp6:hover { transform: translateY(-6px) !important; }
.scp7:hover { transform: translateY(-2px) !important; }
.scp8:focus { outline: none !important; border-color: rgb(122, 43, 245) !important; box-shadow: rgba(122, 43, 245, 0.12) 0px 0px 0px 3px !important; }
/* ---------------------------------------------------------------
   Display headings — one shared system across every page.
   Poppins ExtraBold needs line-height 1.1 to keep descenders
   (g, y, p, j) clear of the line below at display sizes. Anything
   tighter and "your brand" collides with the line under it.
   The !important guards against inline styles reintroducing the bug.
   --------------------------------------------------------------- */
h1 { line-height: 1.1 !important; }

h1, h2 { text-wrap: balance; overflow-wrap: normal; word-break: normal; }

.scp9:hover { color: rgb(34, 211, 238) !important; }

.fk-pill {
  padding: 9px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  background: rgb(251, 250, 252);
  border: 1px solid rgba(19, 18, 32, 0.12);
  color: rgb(90, 88, 102);
  transition: background .2s, border-color .2s, color .2s;
}
.fk-pill:hover { border-color: rgba(122, 43, 245, 0.35); }
.fk-pill[aria-pressed="true"] {
  background: rgb(244, 242, 252);
  border-color: rgba(122, 43, 245, 0.4);
  color: rgb(74, 43, 192);
}
.fk-pill:focus {
  outline: none;
  border-color: rgb(122, 43, 245);
  box-shadow: 0 0 0 3px rgba(122, 43, 245, 0.12);
}

.fk-work-filter {
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-family: 'Manrope', sans-serif;
  cursor: pointer;
  background: rgb(255, 255, 255);
  border: 1px solid rgba(19, 18, 32, 0.1);
  color: rgb(90, 88, 102);
  transition: background .2s, border-color .2s, color .2s;
}
.fk-work-filter:hover { border-color: rgba(122, 43, 245, 0.4); }
.fk-work-filter[aria-selected="true"] {
  background: linear-gradient(92deg, rgb(122, 43, 245), rgb(74, 99, 240));
  border-color: transparent;
  color: rgb(255, 255, 255);
}
.fk-work-filter:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(122, 43, 245, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  [data-orb], [data-marquee], .fk-pulse-dot { animation: none !important; }
  * { transition-duration: .01ms !important; }
}

/* ---------------------------------------------------------------
   Layout safety — applies at every width.

   Grid and flex items default to min-width:auto, which stops them
   shrinking below their content. A wide image or long word then forces
   the whole track past the container. This is the single biggest cause
   of horizontal overflow in this design, so it is fixed everywhere
   rather than only inside a media query.
   --------------------------------------------------------------- */
.fk-grid > *,
.fk-flex > * { min-width: 0; }

img { max-width: 100%; height: auto; }

/* The logo marquee is a deliberately over-wide animated row, clipped and
   masked by its parent. None of the responsive rules below may touch it —
   wrapping it or resizing its logos destroys the loop. */
.fk-marquee-row { flex-wrap: nowrap !important; width: max-content !important; }
.fk-marquee-row > * { flex: 0 0 auto !important; }
.fk-marquee-row img { max-width: none !important; height: 62px !important; width: auto !important; }

html, body { overflow-x: hidden; max-width: 100%; }

/* ---------------------------------------------------------------
   Mobile navigation
   The mock had none. Hamburger below 900px, full nav above it.
   --------------------------------------------------------------- */
.fk-burger {
  display: none;
  margin-left: auto;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.fk-burger span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  border-radius: 2px;
  background: var(--fk-ink);
  transition: transform .3s, opacity .2s;
}
.fk-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fk-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fk-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  header[data-header] { position: sticky; }
  .fk-burger { display: flex; }
  .fk-header-inner { padding: 12px 20px !important; gap: 12px !important; }

  .fk-nav {
    position: absolute !important;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0 !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 4px 20px 18px !important;
    background: var(--fk-bg);
    border-top: 1px solid var(--fk-line);
    box-shadow: 0 18px 40px rgba(19, 18, 32, .1);
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height .35s ease, visibility .35s;
  }
  .fk-nav.is-open { max-height: 78vh; visibility: visible; overflow-y: auto; }

  .fk-nav > a {
    display: block !important;
    width: 100%;
    padding: 15px 0 !important;
    font-size: 15px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--fk-line) !important;
  }
  .fk-nav > a:last-child {
    margin-top: 14px;
    text-align: center !important;
    border-bottom: 0 !important;
    padding: 16px 0 !important;
  }
}

/* ---------------------------------------------------------------
   Responsive layout
   Inline styles are unreachable from a media query, so containers were
   tagged during the build and are overridden by class here.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  .fk-g2  { grid-template-columns: 1fr !important; }
  .fk-g5  { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fk-gap { gap: 26px !important; }
  .fk-trustdivider { display: none !important; }
  .fk-trustcard { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; }
  .fk-trustcard > div { width: 100% !important; max-width: none !important; flex: 0 0 auto !important; }
  .fk-explore-links { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; column-gap: 20px !important; }
  /* forced desktop line breaks read badly once the column is narrow */
  br.fk-brdesk { display: none; }
  .fk-stats-grid { grid-template-columns: 1fr !important; }
  .fk-span2 { grid-column: auto !important; }
  .fk-grid > * { min-width: 0 !important; }
  .fk-cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fk-stat-cell { border-right: none !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; }
  .fk-stat-cell:last-child { border-bottom: none !important; }
  /* row-direction only — wrapping a column container pushes it sideways */
  .fk-flex, .fk-flexwrap { flex-wrap: wrap !important; }
  .fk-flexcol { flex-wrap: nowrap !important; }
}

@media (max-width: 760px) {
  /* single column is the right default for a marketing page on a phone */
  .fk-grid:not(.fk-keep2) { grid-template-columns: 1fr !important; }
  .fk-span2 { grid-column: auto !important; }
  .fk-grid > * { min-width: 0 !important; }
  .fk-keep2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .fk-gnum  { grid-template-columns: 1fr !important; gap: 10px !important; }
  .fk-gap   { gap: 20px !important; }

  /* Cap flex children to the container instead of forcing each onto its own
     row — small items (filter pills, tags) then still sit side by side, while
     wide ones shrink or wrap. Never applied to column containers: there a
     percentage basis refers to height, not width. */
  .fk-flex:not([data-marquee]):not(.fk-flexcol) > * { max-width: 100% !important; }
  .fk-flexcol > * { flex-basis: auto !important; max-width: 100%; }

  /* The orb is sized for a 1440px canvas. At phone width it swamps the
     hero, and its companion fade overlay leaves a hard vertical seam, so
     the orb shrinks and the overlay is dropped. */
  [data-orb] {
    width: 420px !important;
    height: 420px !important;
    top: -130px !important;
    right: -150px !important;
    opacity: .42 !important;
  }
  .fk-fade, [data-fade] { display: none !important; }

  a[href^="mailto:"], a[href^="tel:"] { word-break: break-word; }
}

@media (max-width: 480px) {
  .fk-g5, .fk-keep2 { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------
   Touch targets — footer and inline links need a bigger hit area
   than their text box gives them.
   --------------------------------------------------------------- */
@media (max-width: 900px) {
  footer a { display: inline-block; padding: 6px 0; }
  .fk-nav > a, .fk-burger { min-height: 44px; }
}

/* ---------------------------------------------------------------
   Work cards and case-study galleries
   --------------------------------------------------------------- */
.fk-workcard { transition: transform .4s cubic-bezier(.16,.84,.24,1), box-shadow .4s; }
.fk-workcard:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(19,18,32,.10); }
.fk-workcard img { transition: transform .6s cubic-bezier(.16,.84,.24,1); }
.fk-workcard:hover img { transform: scale(1.04); }

@media (max-width: 760px) {
  /* three-up case-study galleries get cramped below this width */
  .fk-casegrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---------------------------------------------------------------
   Floating WhatsApp button
   --------------------------------------------------------------- */
.fk-whatsapp {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 70;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 20px rgba(19,18,32,.22);
  transition: transform .3s cubic-bezier(.2,1.3,.3,1), box-shadow .3s;
  text-decoration: none;
}
.fk-whatsapp:hover {
  transform: scale(1.07);
  box-shadow: 0 10px 28px rgba(37,211,102,.42);
}
.fk-whatsapp:focus-visible {
  outline: 3px solid #7A2BF5;
  outline-offset: 3px;
}
@media (max-width: 760px) {
  /* sit clear of iOS home indicator and browser chrome */
  .fk-whatsapp {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    width: 52px;
    height: 52px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .fk-whatsapp { transition: none; }
  .fk-whatsapp:hover { transform: none; }
}