/**
 * iKonyk Solutions — Bundled Stylesheet
 * Combines: tokens, base, components, and all section CSS.
 * Page-specific CSS is loaded conditionally via enqueue.php.
 *
 * Generated: 2026-03-26
 */

/* ═══════════════════════════════════════
   FONTS — Self-hosted (Inter + Plus Jakarta Sans)
   ═══════════════════════════════════════ */

/* Inter — body font (400, 500, 600) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Plus Jakarta Sans — heading font (600, 700, 800) */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════
   TOKENS — Design system custom properties
   ═══════════════════════════════════════ */

:root {
  /* ─── Typography ─── */
  --font-heading: "Plus Jakarta Sans", system-ui, sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  /* ─── Shape ─── */
  --radius-card:   12px;
  --radius-button: 8px;
  --padding-min:   24px;

  /* ─── Brand ─── */
  --color-brand-100: #D6E8F5;
  --color-brand-300: #7BA7D1;
  --color-brand-500: #2E7FC1;
  --color-brand-700: #1A5A8A;

  /* ─── Primary Surface (dark navy) ─── */
  --color-primary-950: #070F1C;
  --color-primary-900: #0B1929;
  --color-primary-800: #0F2540;
  --color-primary-700: #133559;

  /* ─── Accent — Amber (CTAs) ─── */
  --color-accent-400: #FCD34D;
  --color-accent-500: #F59E0B;
  --color-accent-600: #D97706;
  --color-accent-700: #B45309;

  /* ─── Secondary Accent — Cyan ─── */
  --color-cyan-300: #67E8F9;
  --color-cyan-500: #06B6D4;
  --color-cyan-700: #0E7490;

  /* ─── Neutral ─── */
  --color-neutral-950: #0F172A;
  --color-neutral-700: #334155;
  --color-neutral-500: #64748B;
  --color-neutral-300: #CBD5E1;
  --color-neutral-100: #F1F5F9;
  --color-neutral-50:  #F8FAFC;
  --color-white:       #FFFFFF;

  /* ─── Semantic ─── */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error:   #DC2626;
}

/* ═══════════════════════════════════════
   BASE — Typography, links, utility classes
   ═══════════════════════════════════════ */

body {
  font-family: var(--font-body);
  color: var(--color-neutral-950);
  background-color: var(--color-neutral-100);
  font-size: 1rem;
  line-height: 1.7;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-neutral-950);
  line-height: 1.2;
  font-weight: 700;
}

h1 { font-size: clamp(2rem,    5vw,   3.25rem); }
h2 { font-size: clamp(1.5rem,  3.5vw, 2.25rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.625rem); }

p {
  margin-bottom: 1.25rem;
  max-width: 68ch;
}

a {
  color: var(--color-brand-500);
  text-decoration: none;
  transition: color 0.15s ease;
}

a:hover {
  color: var(--color-brand-700);
  text-decoration: underline;
}

.ik-dark {
  background-color: var(--color-primary-900);
  color: var(--color-white);
}
.ik-dark h1,
.ik-dark h2,
.ik-dark h3 { color: var(--color-white); }
.ik-dark p  { color: var(--color-neutral-300); }

.text-accent { color: var(--color-accent-400); }
.text-brand  { color: var(--color-brand-300); }
.text-muted  { color: var(--color-neutral-500); }
.text-center { text-align: center; }

/* ═══════════════════════════════════════
   COMPONENTS — Buttons, cards, sections
   ═══════════════════════════════════════ */

/* ─── Buttons ─── */
.wp-block-button__link,
.gb-button {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  border-radius: var(--radius-button) !important;
  padding: 14px 28px;
  transition: background-color 0.15s ease, color 0.15s ease;
  text-decoration: none !important;
}

.wp-block-button .wp-block-button__link,
.wp-block-button.is-style-fill .wp-block-button__link {
  background-color: var(--color-accent-600) !important;
  color: var(--color-white) !important;
  border: none !important;
}
.wp-block-button .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background-color: var(--color-accent-700) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background-color: transparent;
  color: var(--color-brand-500) !important;
  border: 2px solid var(--color-brand-500);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background-color: var(--color-brand-500);
  color: var(--color-white) !important;
}

.ik-btn-ghost .wp-block-button__link {
  background-color: transparent !important;
  color: var(--color-white) !important;
  border: 2px solid var(--color-white) !important;
}
.ik-btn-ghost .wp-block-button__link:hover {
  background-color: var(--color-white) !important;
  color: var(--color-primary-900) !important;
}

/* ─── Section Layout ─── */
.ik-section {
  background-color: var(--color-neutral-50);
  padding: 80px max(var(--padding-min), 5vw);
}

.ik-section--white { background-color: var(--color-white); }

.ik-section--dark { background-color: var(--color-primary-900); }
.ik-section--dark h2,
.ik-section--dark h3,
.ik-section--dark p { color: var(--color-white); }
.ik-section--dark p  { color: var(--color-neutral-300); }

.ik-section-inner {
  max-width: 800px;
  margin: 0 auto;
}

.ik-section-inner--wide { max-width: 1100px; }

@media (max-width: 600px) {
  .ik-section { padding: 48px var(--padding-min); }
}

.ik-section-heading {
  text-align: center;
  margin-bottom: 2.5rem;
  color: var(--color-neutral-950);
}

/* ─── Cards ─── */
.ik-card {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: var(--padding-min);
  border: 1px solid var(--color-neutral-300);
}

/* ═══════════════════════════════════════
   HERO SECTION
   ═══════════════════════════════════════ */

.ik-hero {
  background-color: var(--color-primary-900);
  padding: 80px max(var(--padding-min), 5vw);
}

.ik-hero-inner {
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

.ik-hero-h1 {
  color: var(--color-white);
  font-size: clamp(2rem, 5vw, 3.25rem);
  margin-bottom: 1.25rem;
}

.ik-hero-sub {
  color: var(--color-neutral-300);
  font-size: 1.125rem;
  max-width: 600px;
  margin: 0 auto 2rem;
}

.ik-hero-btns {
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .ik-hero { padding: 48px var(--padding-min); }
}

/* ═══════════════════════════════════════
   TRUST BAR
   ═══════════════════════════════════════ */

.ik-trust-bar {
  background-color: var(--color-white);
  border-top: 3px solid var(--color-accent-600);
  border-bottom: 1px solid var(--color-neutral-300);
  padding: 40px max(var(--padding-min), 5vw);
}

.ik-trust-grid { max-width: 1100px; margin: 0 auto; }

.ik-trust-item { text-align: center; padding: 0 16px; }

.ik-trust-item .wp-block-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-primary-900);
  margin-top: 0.5rem;
  margin-bottom: 0.25rem;
}

.ik-trust-item p {
  font-size: 0.875rem;
  color: var(--color-neutral-500);
  margin-bottom: 0;
  max-width: none;
}

.ik-trust-item .ik-trust-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 0.5rem;
  display: block;
}

@media (max-width: 768px) {
  .ik-trust-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ═══════════════════════════════════════
   INTRO / PROBLEM-SOLUTION
   ═══════════════════════════════════════ */

.ik-intro-link {
  display: inline-block;
  color: var(--color-brand-500);
  font-weight: 600;
  margin-top: 0.5rem;
}

.ik-intro-link:hover {
  color: var(--color-brand-700);
  text-decoration: underline;
}

/* ═══════════════════════════════════════
   SERVICES GRID (homepage 4 cards)
   ═══════════════════════════════════════ */

.ik-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1100px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 1024px) {
  .ik-services-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 600px) {
  .ik-services-grid { grid-template-columns: 1fr !important; }
}

.ik-service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  height: 100%;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ik-service-card:hover {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.ik-service-icon {
  font-size: 2rem;
  line-height: 1;
  margin-bottom: 1.25rem;
  display: block;
}

.ik-service-icon img,
.ik-service-icon svg { width: 48px; height: 48px; object-fit: contain; }

.ik-service-card h3 { color: var(--color-primary-900); margin-bottom: 0.75rem; }

.ik-service-card p {
  color: var(--color-neutral-700);
  flex-grow: 1;
  margin-bottom: 1.25rem;
}

.ik-service-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-brand-500);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  margin-top: auto;
}

.ik-service-link:hover {
  color: var(--color-brand-700);
  text-decoration: underline;
}

/* ═══════════════════════════════════════
   WHY IKONYK (3 differentiators)
   ═══════════════════════════════════════ */

.ik-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

@media (max-width: 768px) {
  .ik-why-grid { grid-template-columns: 1fr !important; }
}

.ik-why-point {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 2rem;
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  border: 1px solid var(--color-neutral-300);
  transition: box-shadow 0.2s ease;
}

.ik-why-point:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06); }

.ik-why-point h3 {
  color: var(--color-primary-900);
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.ik-why-point p { color: var(--color-neutral-700); margin: 0; line-height: 1.6; }

/* ═══════════════════════════════════════
   TESTIMONIALS (3 quotes + CTA)
   ═══════════════════════════════════════ */

/* Grid is on the inner WP Group block, not the section wrapper.
   Target both our class (if moved) and the WP grid inside it. */
.ik-testimonials-grid {
  display: block;
  margin-inline: auto;
}

.ik-testimonials-grid > .is-layout-grid,
.ik-testimonials-grid.is-layout-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
}

@media (max-width: 1024px) {
  .ik-testimonials-grid > .is-layout-grid,
  .ik-testimonials-grid.is-layout-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 600px) {
  .ik-testimonials-grid > .is-layout-grid,
  .ik-testimonials-grid.is-layout-grid {
    grid-template-columns: 1fr !important;
  }
}

.ik-testimonial {
  background-color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 2rem;
  border: 1px solid var(--color-neutral-300);
  position: relative;
  display: flex;
  flex-direction: column;
}

.ik-testimonial::before {
  content: '\201C';
  font-size: 4rem;
  color: var(--color-accent-400);
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  line-height: 1;
}

.ik-testimonial blockquote {
  margin: 1.5rem 0 1.5rem 0;
  padding-left: 2rem;
  font-style: italic;
  color: var(--color-neutral-700);
  line-height: 1.6;
  flex-grow: 1;
}

.ik-testimonial cite {
  display: block;
  font-weight: 600;
  color: var(--color-primary-900);
  font-size: 0.9375rem;
  font-style: normal;
  margin-bottom: 0.25rem;
}

.ik-testimonial .ik-company {
  color: var(--color-neutral-500);
  font-size: 0.875rem;
}

.ik-testimonials-cta { text-align: center; margin-top: 3rem; }

.ik-testimonials-cta p {
  max-width: none;
  color: var(--color-neutral-700);
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

/* ═══════════════════════════════════════
   SUPPORT HOURS
   ═══════════════════════════════════════ */

.ik-hours-content { text-align: center; max-width: 640px; margin: 0 auto; }

.ik-hours-content h2 { color: var(--color-neutral-950); margin-bottom: 1.5rem; }

.ik-hours-content p {
  color: var(--color-neutral-700);
  line-height: 1.6;
  margin-bottom: 2rem;
  max-width: none;
}

.ik-hours-cta { margin-top: 2rem; text-align: center; }

/* ═══════════════════════════════════════
   FINAL CTA
   ═══════════════════════════════════════ */

.ik-final-cta {
  background: linear-gradient(135deg, var(--color-primary-900) 0%, var(--color-primary-800) 100%);
  color: var(--color-white);
  text-align: center;
  padding: 4rem max(var(--padding-min), 5vw);
}

.ik-final-cta h2 { color: var(--color-white); margin-bottom: 1rem; font-size: 2rem; }

.ik-final-cta p {
  color: var(--color-neutral-100);
  font-size: 1.125rem;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.ik-final-cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  .ik-final-cta { padding: 3rem var(--padding-min); }
  .ik-final-cta h2 { font-size: 1.75rem; }
  .ik-final-cta-buttons { flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════
   SERVICES PAGE — /services/
   ═══════════════════════════════════════ */

.ik-page-hero {
  background-color: var(--color-primary-900);
  text-align: center;
  padding: 5rem max(var(--padding-min), 5vw);
}

.ik-page-hero h1 { color: var(--color-white); margin-bottom: 1rem; }

.ik-page-hero p {
  color: var(--color-neutral-100);
  font-size: 1.125rem;
  max-width: none;
  margin-bottom: 2rem;
}

@media (max-width: 600px) {
  .ik-page-hero { padding: 3rem var(--padding-min); }
}

.ik-service-icon-large { font-size: 3rem; line-height: 1; margin-bottom: 1rem; }

.ik-service-bullets { list-style: none; padding: 0; margin: 1.5rem 0 2rem 0; }

.ik-service-bullets li {
  padding: 0.375rem 0 0.375rem 1.75rem;
  position: relative;
  color: var(--color-neutral-700);
}

.ik-service-bullets li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  color: var(--color-brand-500);
  font-weight: 600;
}

.ik-faq-list h3 {
  color: var(--color-primary-900);
  font-size: 1.125rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.ik-faq-list h3:first-child { margin-top: 0; }

.ik-faq-list p { color: var(--color-neutral-700); margin-bottom: 0; }

/* ═══════════════════════════════════════
   HEADSHOT / PHOTO LAYOUTS
   ═══════════════════════════════════════ */

/* About Us — "Our Story" two-column: text + photo */
.ik-about-story {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 3rem;
  align-items: center;
  max-width: 1100px;
  margin-inline: auto;
  padding-top: 3rem;
}

/* GB containers must fill their grid cells */
.ik-about-story > * { width: 100% !important; max-width: 100% !important; }

@media (max-width: 768px) {
  .ik-about-story {
    grid-template-columns: 1fr !important;
  }
  .ik-about-story .ik-headshot-col { order: -1; justify-self: center; }
}

/* Homepage — "Why" section intro with centered photo */
.ik-why-intro,
.ik-why-intro > .wp-block-group__inner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ik-why-intro { margin-bottom: 2.5rem; }

.ik-why-intro .ik-headshot { margin-bottom: 1.5rem; }

.ik-why-intro p {
  max-width: 640px;
  color: var(--color-neutral-700);
  line-height: 1.6;
}

/* Shared headshot styles — class is on <figure>, styles target <img> */
.ik-headshot {
  overflow: hidden;
  border-radius: 50%;
  border: 3px solid var(--color-neutral-200);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin: 0;
  padding: 0;
  line-height: 0;
}

.ik-headshot img {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  width: 100%;
  height: 100%;
}

figure.ik-headshot--about {
  width: 280px !important;
  height: 280px !important;
}

.ik-headshot--about img {
  object-position: center 15%;
}

.ik-headshot--hero {
  width: 160px;
  height: 160px;
}

.ik-headshot--hero img {
  object-position: center 13%;
}