/*
Theme Name: Calyx Solutions
Theme URI: https://calyx-grc.techtech-7207.chatgpt.site/
Author: Calyx Solutions
Description: A fully editable block theme for Calyx Solutions, focused on IT governance, risk, compliance, cyber security, AI governance and ISO 27001:2022.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: calyx-solutions
*/

:root {
  --calyx-emerald: #0b6b43;
  --calyx-mint: #d7f3e3;
  --calyx-navy: #172a3a;
  --calyx-navy-2: #203a4e;
  --calyx-lime: #a3e635;
  --calyx-white: #ffffff;
  --calyx-ivory: #f5fbf7;
  --calyx-muted: #637587;
  --calyx-line: #d9e4de;
}

html { scroll-behavior: smooth; }
body { margin: 0; color: var(--calyx-navy); -webkit-font-smoothing: antialiased; }
a { transition: color .2s ease, background-color .2s ease, transform .2s ease; }
.wp-site-blocks { overflow: hidden; }

.calyx-header {
  background: var(--calyx-white);
  border-bottom: 1px solid rgba(23, 42, 58, .08);
  position: relative;
  z-index: 20;
}
.calyx-header-inner { min-height: 92px; }
.calyx-header .wp-block-site-logo img { width: 176px; height: auto; }
.calyx-header .wp-block-navigation { font-size: 13px; font-weight: 600; }
.calyx-header .wp-block-navigation-item__content:hover { color: var(--calyx-emerald); }
.calyx-header .wp-block-button__link,
.calyx-button .wp-block-button__link {
  border-radius: 7px;
  font-family: Inter, Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  padding: 16px 20px;
}
.calyx-header .wp-block-button__link:hover,
.calyx-button .wp-block-button__link:hover { transform: translateY(-2px); }

.calyx-hero {
  background-color: var(--calyx-navy);
  background-image:
    linear-gradient(125deg, rgba(23, 42, 58, .96), rgba(16, 43, 59, .96) 65%, rgba(18, 60, 54, .95)),
    linear-gradient(rgba(215, 243, 227, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 243, 227, .08) 1px, transparent 1px);
  background-size: auto, 72px 72px, 72px 72px;
  color: white;
  padding: 78px 24px;
}
.calyx-hero-inner { min-height: 510px; }
.calyx-eyebrow {
  color: #b7c8c4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 24px;
  text-transform: uppercase;
}
.calyx-eyebrow::before { background: var(--calyx-lime); border-radius: 50%; content: ""; display: inline-block; height: 7px; margin-right: 10px; width: 7px; }
.calyx-hero h1 { font-size: clamp(46px, 5.3vw, 72px); letter-spacing: -2.5px; line-height: 1.08; max-width: 720px; }
.calyx-hero h1 strong { color: var(--calyx-lime); font-weight: 600; }
.calyx-hero-copy { color: #c7d5d2; font-size: 17px; line-height: 1.75; max-width: 610px; }
.calyx-outline-button .wp-block-button__link { background: transparent; border: 1px solid #b7c8c4; color: white; }
.calyx-outline-button .wp-block-button__link:hover { border-color: var(--calyx-lime); }
.calyx-signal-card {
  align-items: center;
  background-color: rgba(10, 31, 43, .82);
  background-image:
    radial-gradient(circle at center, rgba(11, 107, 67, .44), transparent 35%),
    linear-gradient(rgba(215, 243, 227, .08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(215, 243, 227, .08) 1px, transparent 1px);
  background-size: auto, 31px 31px, 31px 31px;
  border: 1px solid rgba(163, 230, 53, .35);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 470px;
  overflow: hidden;
  padding: 48px 28px;
  position: relative;
}
.calyx-signal-card::before,
.calyx-signal-card::after { border: 1px solid rgba(163, 230, 53, .28); border-radius: 50%; content: ""; left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%); }
.calyx-signal-card::before { height: 330px; width: 330px; }
.calyx-signal-card::after { border-style: dashed; height: 225px; width: 225px; }
.calyx-logo-plate { background: white; border-radius: 14px; box-shadow: 0 18px 60px rgba(0,0,0,.28); padding: 16px 20px; position: relative; z-index: 2; }
.calyx-logo-plate .wp-block-site-logo img { width: 235px; height: auto; }
.calyx-signal-labels { gap: 8px; margin-top: 50px; position: relative; z-index: 3; }
.calyx-signal-labels p { background: var(--calyx-navy); border: 1px solid #54706a; color: white; font-size: 9px; letter-spacing: 1px; margin: 0; padding: 9px 11px; }

.calyx-trust-strip { background: var(--calyx-mint); border-bottom: 1px solid #bfe7d1; color: var(--calyx-emerald); padding: 29px 24px; }
.calyx-trust-items { font-size: 12px; font-weight: 700; }
.calyx-trust-items p { margin: 0; }
.calyx-trust-items p::before { color: var(--calyx-lime); content: "●"; font-size: 9px; margin-right: 9px; }

.calyx-section { padding: 112px 24px; }
.calyx-section-heading { margin-bottom: 62px; }
.calyx-section .calyx-eyebrow { color: #60786d; }
.calyx-section .calyx-eyebrow::before { background: var(--calyx-emerald); }
.calyx-section h2,
.calyx-contact h2 { font-size: clamp(42px, 4.6vw, 64px); letter-spacing: -2.2px; line-height: 1.1; }
.calyx-section h2 strong { color: var(--calyx-emerald); font-weight: 600; }
.calyx-section-intro { color: var(--calyx-muted); font-size: 15px; line-height: 1.75; }
.calyx-services { border-left: 1px solid var(--calyx-line); border-top: 1px solid var(--calyx-line); gap: 0 !important; }
.calyx-services > .wp-block-column { border-bottom: 1px solid var(--calyx-line); border-right: 1px solid var(--calyx-line); }
.calyx-service-card { min-height: 340px; padding: 34px 36px; transition: background-color .2s ease; }
.calyx-service-card:hover { background: var(--calyx-ivory); }
.calyx-service-number { color: var(--calyx-emerald); font-size: 12px; letter-spacing: 1px; margin-bottom: 62px; }
.calyx-service-card h3 { font-size: 26px; line-height: 1.2; }
.calyx-service-card > p:not(.calyx-service-number) { color: var(--calyx-muted); font-size: 13px; line-height: 1.65; }
.calyx-tags { gap: 7px; }
.calyx-tags p { border: 1px solid #c9ddd2; border-radius: 99px; color: var(--calyx-emerald); font-size: 9px; letter-spacing: .7px; margin: 0; padding: 7px 10px; text-transform: uppercase; }

.calyx-iso { background: var(--calyx-navy); color: white; padding: 112px 24px; }
.calyx-iso h2 { color: white; font-size: clamp(42px, 4.6vw, 64px); letter-spacing: -2.2px; }
.calyx-iso h2 strong { color: var(--calyx-lime); font-weight: 600; }
.calyx-iso-copy { color: #afc1c5; font-size: 15px; line-height: 1.75; }
.calyx-iso-panel { background: linear-gradient(145deg, #1a3548, #102432); border: 1px solid #385566; padding: 35px; }
.calyx-iso-seal { align-items:center; border:1px solid var(--calyx-lime); border-radius:50%; display:flex; flex-direction:column; height:165px; justify-content:center; margin:0 auto; width:165px; }
.calyx-iso-seal strong { color:var(--calyx-lime); font-size:34px; }
.calyx-iso-seal p { font-size:11px; letter-spacing:3px; margin:0; }
.calyx-iso-item { border-bottom: 1px solid #304b5a; padding: 20px 0; }
.calyx-iso-item:last-child { border: 0; }
.calyx-iso-item h4 { font-size: 14px; margin: 0 0 6px; }
.calyx-iso-item p { color: #8fa5ac; font-size: 11px; line-height: 1.5; margin: 0; }

.calyx-values { background: var(--calyx-ivory); border-block: 1px solid var(--calyx-line); padding: 34px 24px; }
.calyx-value { border-right: 1px solid var(--calyx-line); min-height: 88px; padding: 8px 18px; }
.calyx-value:last-child { border: 0; }
.calyx-value h4 { color: var(--calyx-emerald); font-size: 12px; letter-spacing: .4px; margin: 0; text-transform: uppercase; }
.calyx-value p { color: var(--calyx-muted); font-size: 10px; line-height: 1.55; }

.calyx-steps { border-top: 1px solid var(--calyx-line); gap: 0 !important; }
.calyx-step { border-right: 1px solid var(--calyx-line); min-height: 255px; padding: 28px 25px; }
.calyx-step-number { color: var(--calyx-emerald); font-size: 10px; }
.calyx-step h3 { font-size: 24px; margin-top: 58px; }
.calyx-step p:last-child { color: var(--calyx-muted); font-size: 12px; line-height: 1.7; }

.calyx-contact { background: var(--calyx-emerald); color: white; padding: 96px 24px; }
.calyx-contact h2 { color: white; }
.calyx-contact h2 strong { color: var(--calyx-lime); font-weight: 600; }
.calyx-contact-copy { color: #d2e6da; font-size: 14px; line-height: 1.8; }

.calyx-footer { background: white; color: #71807c; font-size: 10px; letter-spacing: 1px; padding: 34px 24px; text-transform: uppercase; }
.calyx-footer .wp-block-site-logo img { width: 165px; height: auto; }

@media (max-width: 900px) {
  .calyx-header-inner { min-height: 78px; }
  .calyx-hero { padding-block: 65px; }
  .calyx-hero-inner { flex-wrap: wrap !important; }
  .calyx-hero-inner > .wp-block-column { flex-basis: 100% !important; }
  .calyx-services,
  .calyx-steps,
  .calyx-values-inner { flex-wrap: wrap !important; }
  .calyx-services > .wp-block-column,
  .calyx-steps > .wp-block-column { flex-basis: 50% !important; }
  .calyx-values-inner > .wp-block-column { flex-basis: 33.333% !important; }
}

@media (max-width: 620px) {
  .calyx-header .wp-block-site-logo img { width: 145px; }
  .calyx-header-cta { display: none; }
  .calyx-hero { padding: 54px 16px; }
  .calyx-hero h1 { font-size: 44px; }
  .calyx-signal-card { min-height: 350px; }
  .calyx-logo-plate .wp-block-site-logo img { width: 195px; }
  .calyx-trust-items { align-items: flex-start !important; flex-direction: column; }
  .calyx-section,.calyx-iso,.calyx-contact { padding: 78px 16px; }
  .calyx-services > .wp-block-column,
  .calyx-steps > .wp-block-column,
  .calyx-values-inner > .wp-block-column { flex-basis: 100% !important; }
  .calyx-value { border-bottom: 1px solid var(--calyx-line); border-right: 0; }
  .calyx-footer-inner { align-items: flex-start !important; flex-direction: column; gap: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  a { transition: none; }
}