/*
Theme Name: Clocen
Author: Clocen Technologies
Description: Elegant block theme for Clocen Technologies, a one stop IT solution for small enterprises.
Version: 1.1.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: clocen
*/

:root {
  --ink: #14213D; --ink-deep: #0F1A31; --slate: #253045; --steel: #48546A;
  --mist: #C3CAD6; --porcelain: #F4F6F9; --line: #DCE1E8;
  --brass: #B08D57; --brass-light: #C9A86E; --white: #FFFFFF;
  --pad: clamp(1.25rem, 5vw, 3rem);
  --sec: clamp(4rem, 9vw, 7.5rem);
}

body { margin: 0; background: var(--white); color: var(--slate);
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.125rem; line-height: 1.7; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { font-family: "Source Serif 4", Georgia, "Times New Roman", serif; color: var(--ink);
  font-weight: 500; line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 0.6em; }
h1 { font-size: clamp(2.6rem, 6vw, 4.5rem); }
h2 { font-size: clamp(2rem, 4vw, 3rem); }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.1em; }
a { color: var(--ink); text-decoration-color: var(--brass); text-underline-offset: 0.2em; }
a:hover { color: var(--brass); }
:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* Layout rhythm */
.wp-site-blocks > * { margin-block: 0 !important; }
.site-main > * { margin-block: 0 !important; }
.site-main > .wp-block-group { padding: var(--sec) var(--pad); }

/* Header */
.site-header { background: var(--ink); padding: 1.25rem var(--pad); border-bottom: 1px solid rgba(255,255,255,0.08); }
.brand { margin: 0 !important; font-family: "Source Serif 4", Georgia, serif; font-size: 1.55rem; line-height: 1; }
.brand a { color: var(--white); text-decoration: none; }
.brand span { font-family: "Manrope", sans-serif; font-size: 0.78rem; font-weight: 500; color: var(--brass-light); letter-spacing: 0.08em; margin-left: 0.4em; }
.main-nav .wp-block-navigation__container { gap: 2rem; }
.main-nav a { color: #E3E7EE; text-decoration: none; font-size: 0.95rem; font-weight: 500; }
.main-nav a:hover, .main-nav .current-menu-item a { color: var(--brass-light); }
.main-nav .wp-block-navigation__responsive-container-open,
.main-nav .wp-block-navigation__responsive-container-close { color: var(--white); }
.main-nav .wp-block-navigation__responsive-container.is-menu-open { background: var(--ink) !important; color: var(--white) !important; padding: 2rem var(--pad); }
.main-nav .is-menu-open .wp-block-navigation__container { gap: 1.5rem; }
.main-nav .is-menu-open a { font-size: 1.4rem; font-family: "Source Serif 4", Georgia, serif; }

/* Buttons */
.wp-block-button .wp-block-button__link { background: var(--brass); color: var(--ink); border: 1px solid var(--brass);
  border-radius: 2px; padding: 0.9em 1.6em; font-family: "Manrope", sans-serif; font-weight: 600; font-size: 0.98rem; text-decoration: none; }
.wp-block-button .wp-block-button__link:hover { background: var(--brass-light); border-color: var(--brass-light); color: var(--ink); }
.wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--ink); color: var(--white); }
.hero .wp-block-button.is-style-outline .wp-block-button__link,
.cta .wp-block-button.is-style-outline .wp-block-button__link { color: var(--white); border-color: rgba(255,255,255,0.45); }
.hero .wp-block-button.is-style-outline .wp-block-button__link:hover,
.cta .wp-block-button.is-style-outline .wp-block-button__link:hover { background: var(--white); color: var(--ink); }
.wp-block-buttons { gap: 0.85rem; margin-top: 2rem; }

/* Hero and page heroes */
.hero, .page-hero { background: var(--ink); color: #DDE3EC; }
.hero h1, .page-hero h1 { color: var(--white); }
.site-main > .page-hero { padding-block: clamp(3.5rem, 7vw, 5.5rem); }
.page-hero h1 { max-width: 14em; }
.hero__grid { align-items: center; gap: clamp(2rem, 5vw, 4.5rem) !important; margin: 0; }
.hero__grid > .hero__copy { flex: 1.15 1 0; }
.hero__grid > .hero__art { flex: 1 1 0; }
.hero h1 { max-width: 11em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.25rem); line-height: 1.6; max-width: 34em; }
.hero .lead, .page-hero .lead { color: #DDE3EC; }

/* Network topology illustration */
.topology { width: 100%; height: auto; display: block; max-width: 520px; margin-inline: auto; }
.topology .link { stroke: var(--brass); stroke-width: 1.2; opacity: 0.7; fill: none; }
.topology .link--faint { stroke: #3D5075; stroke-width: 1; stroke-dasharray: 3 6; opacity: 1; }
.topology .node { fill: var(--ink); stroke: var(--brass-light); stroke-width: 1.5; }
.topology .halo { fill: none; stroke: rgba(201,168,110,0.22); stroke-width: 1; }
.topology .label { fill: var(--mist); font-family: "Manrope", sans-serif; font-size: 12px; font-weight: 500; }
.topology .shield { fill: #1D2D4E; stroke: var(--brass-light); stroke-width: 1.6; }
.topology .lock { fill: none; stroke: var(--brass-light); stroke-width: 1.6; stroke-linecap: round; }
.topology .pulse { fill: none; stroke: #E4CC9A; stroke-width: 2.2; stroke-linecap: round;
  stroke-dasharray: 12 400; stroke-dashoffset: 412; animation: clocen-pulse 4.5s linear infinite; }
.topology .pulse:nth-of-type(2) { animation-delay: 1.5s; }
.topology .pulse:nth-of-type(3) { animation-delay: 3s; }
@keyframes clocen-pulse { from { stroke-dashoffset: 412; } to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .topology .pulse { animation: none; opacity: 0; } }

/* Proof strip */
.site-main > .proof { padding-block: clamp(2.5rem, 5vw, 3.5rem); border-bottom: 1px solid var(--line); }
.proof .wp-block-columns { margin: 0; gap: 2rem; }
.proof .wp-block-column { border-left: 2px solid var(--brass); padding-left: 1.25rem; }
.proof h3 { font-size: 1.2rem; margin-bottom: 0.35em; }
.proof p { font-size: 0.97rem; color: var(--steel); margin: 0; }

/* Section intro */
.section-lead { color: var(--steel); max-width: 36em; font-size: 1.1rem; }
.intro h2 { max-width: 15em; }

/* Service grid (home) */
.service-grid { gap: 2.5rem !important; margin: 3rem 0 0; }
.service-grid + .service-grid { margin-top: 2.75rem; }
.service-grid .wp-block-column { border-top: 1px solid var(--line); padding-top: 1.5rem; }
.service-grid h3 { font-size: 1.35rem; }
.service-grid p { color: var(--steel); font-size: 0.98rem; margin: 0; }
.intro .wp-block-buttons { margin-top: 3rem; }

/* Steps (a real sequence, so numbered) */
.site-main > .steps { background: var(--porcelain); }
.steps .wp-block-columns { counter-reset: step; gap: 2rem !important; margin: 3rem 0 0; }
.steps h3 { counter-increment: step; font-size: 1.35rem; }
.steps h3::before { content: counter(step); display: block; font-size: 2.6rem; color: var(--brass); margin-bottom: 0.4rem; line-height: 1; }
.steps p { color: var(--steel); font-size: 0.98rem; margin: 0; }

/* Founder */
.founder .wp-block-columns { gap: clamp(2rem, 6vw, 5rem) !important; margin: 0; }
.founder .wp-block-column:first-child { flex: 1 1 0; }
.founder .wp-block-column:last-child { flex: 1.2 1 0; }
.founder p { max-width: 34em; }
.signature { font-family: "Source Serif 4", Georgia, serif; font-style: italic; font-size: 1.2rem; color: var(--ink); margin-top: 1.75rem; }

/* CTA band */
.site-main > .cta { background: var(--ink); color: #DDE3EC; }
.cta h2 { color: var(--white); max-width: 13em; }
.cta .wp-block-columns { align-items: center; gap: 2rem; margin: 0; }
.cta p { max-width: 32em; margin: 0; }
.cta .wp-block-buttons { margin-top: 0; justify-content: flex-end; }
@media (max-width: 781px) { .cta .wp-block-buttons { justify-content: flex-start; } }

/* Services page */
.service-row { border-top: 1px solid var(--line); padding-top: 2.5rem; margin: 0 0 3.5rem !important; gap: clamp(1.5rem, 5vw, 4rem) !important; }
.service-row:last-child { margin-bottom: 0 !important; }
.service-row .wp-block-column:first-child { flex: 0.8 1 0; }
.service-row .wp-block-column:last-child { flex: 1.2 1 0; }
.service-row h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.service-row p { color: var(--steel); max-width: 34em; }
.service-list { list-style: none; padding: 0; margin: 1.25rem 0 0; }
.service-list li { position: relative; padding-left: 1.4rem; margin-bottom: 0.55rem; }
.service-list li::before { content: ""; position: absolute; left: 0; top: 0.8em; width: 0.6rem; height: 1px; background: var(--brass); }

/* About page */
.story p { max-width: 36em; }
.values .wp-block-columns { gap: 2.5rem !important; margin: 3rem 0 0; }
.values .wp-block-column { border-top: 2px solid var(--brass); padding-top: 1.5rem; }
.values p { color: var(--steel); font-size: 0.98rem; margin: 0; }
.site-main > .founder--tinted { background: var(--porcelain); }

/* Contact page */
.contact-grid { gap: clamp(2rem, 6vw, 5rem) !important; margin: 0; }
.detail h3 { font-family: "Manrope", sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--steel); letter-spacing: 0.02em; margin-bottom: 0.3em; }
.detail p { font-family: "Source Serif 4", Georgia, serif; font-size: 1.35rem; color: var(--ink); margin-bottom: 1.75rem; }
.contact-card { background: var(--porcelain); border-top: 3px solid var(--brass); padding: clamp(1.75rem, 4vw, 2.75rem); }
.contact-card h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
.contact-card p { color: var(--steel); }

/* Generic page content */
.page-content { padding: var(--sec) var(--pad); }

/* Footer */
.site-footer { background: var(--ink-deep); color: var(--mist); padding: clamp(3.5rem, 7vw, 5rem) var(--pad) 2rem; font-size: 0.95rem; }
.site-footer .brand { margin-bottom: 0.9rem !important; }
.site-footer h3 { font-family: "Manrope", sans-serif; font-size: 0.85rem; font-weight: 600; color: var(--white); letter-spacing: 0.02em; margin-bottom: 0.9em; }
.site-footer p { margin: 0 0 0.45em; }
.site-footer a { color: var(--mist); text-decoration: none; }
.site-footer a:hover { color: var(--brass-light); }
.footer-cols { gap: 2.5rem !important; margin: 0; }
.footer-cols > .wp-block-column:first-child { flex: 1.6 1 0; }
.footer-cols > .wp-block-column { flex: 1 1 0; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 3rem !important; padding-top: 1.5rem; font-size: 0.85rem; }

/* Keep narrow headings and leads left-aligned to the 1180px container */
.site-main > .wp-block-group > :is(h1, h2, .lead, .section-lead) {
  margin-left: max(0px, calc((100% - 1180px) / 2)) !important;
  margin-right: auto !important;
}

/* ===== v1.1 readability ===== */
h1, h2 { font-weight: 600; letter-spacing: -0.015em; }
h3 { font-family: "Manrope", system-ui, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: -0.005em; line-height: 1.3; }
.service-grid h3, .steps h3, .service-row h3 { font-size: 1.2rem; }
.proof h3 { font-size: 1.1rem; }
.proof p, .service-grid p, .steps p, .values p { font-size: 1.02rem; line-height: 1.65; }
.topology .label { font-size: 13px; fill: #D3D9E3; }
.detail p { font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 600; }
.brand { font-weight: 600; }
.main-nav a { font-size: 1rem; }
.site-footer { font-size: 1rem; }
.steps h3::before { font-family: "Source Serif 4", Georgia, serif; font-weight: 600; }

/* ===== v1.1 motion and interaction ===== */
html { scroll-behavior: smooth; }

/* Sticky header that tightens on scroll */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar .wp-site-blocks > header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar .wp-site-blocks > header.wp-block-template-part { top: 46px; } }
.site-header { transition: padding 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.is-scrolled .site-header { padding-block: 0.75rem; box-shadow: 0 10px 30px rgba(8, 16, 34, 0.28); background: rgba(20, 33, 61, 0.97); }
.main-nav a { position: relative; }
.main-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--brass-light); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.main-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

/* Living network grid behind dark heroes */
.hero, .page-hero { position: relative; overflow: hidden; isolation: isolate; }
.hero::before, .page-hero::before { content: ""; position: absolute; inset: -60px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgba(201,168,110,0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,110,0.07) 1px, transparent 1px);
  background-size: 60px 60px; animation: clocen-grid 24s linear infinite;
  -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%); }
@keyframes clocen-grid { to { transform: translate(60px, 60px); } }

/* Topology: traffic pulses and node pings */
.topology .pulse:nth-of-type(1) { animation-delay: 0s; }
.topology .pulse:nth-of-type(2) { animation-delay: 0.9s; }
.topology .pulse:nth-of-type(3) { animation-delay: 1.8s; }
.topology .pulse:nth-of-type(4) { animation-delay: 2.7s; }
.topology .pulse:nth-of-type(5) { animation-delay: 3.6s; }
.topology .ping { transform-box: fill-box; transform-origin: center; animation: clocen-ping 3.6s ease-out infinite; }
.topology .ping:nth-of-type(odd) { animation-delay: 1.2s; }
@keyframes clocen-ping { 0% { transform: scale(0.7); opacity: 0.9; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
.topology .shield { animation: clocen-glow 4.5s ease-in-out infinite; }
@keyframes clocen-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(228,204,154,0)); } 50% { filter: drop-shadow(0 0 14px rgba(228,204,154,0.45)); } }

/* Hover: service blocks, values, service rows */
.service-grid .wp-block-column, .values .wp-block-column { position: relative; transition: transform 0.35s ease; }
.service-grid .wp-block-column::before { content: ""; position: absolute; top: -1px; left: 0; width: 100%; height: 2px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform 0.45s ease; }
.service-grid .wp-block-column:hover::before { transform: scaleX(1); }
.service-grid .wp-block-column:hover, .values .wp-block-column:hover { transform: translateY(-4px); }
.service-row h2 { transition: color 0.3s ease; }
.service-row:hover h2 { color: var(--brass); }
.contact-card { transition: box-shadow 0.35s ease; }
.contact-card:hover { box-shadow: 0 18px 40px rgba(20, 33, 61, 0.12); }
.wp-block-button .wp-block-button__link { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.wp-block-button .wp-block-button__link:hover { transform: translateY(-2px); }

/* Steps: connecting line drawn as the section comes into view (desktop) */
@media (min-width: 782px) {
  .steps .wp-block-columns { position: relative; }
  .steps .wp-block-columns::before { content: ""; position: absolute; top: 1.3rem; left: 0; right: 0; height: 1px; background: var(--brass); opacity: 0.5; transform-origin: left; transition: transform 1.6s cubic-bezier(.2,.7,.2,1); }
  .js .steps .wp-block-columns::before { transform: scaleX(0); }
  .js .steps .wp-block-columns.is-drawn::before { transform: scaleX(1); }
  .steps h3::before { display: block; width: fit-content; background: var(--porcelain); padding-right: 0.75rem; position: relative; }
}

/* Scroll reveals and hero entrance (only when motion is welcome and JS is running) */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s cubic-bezier(.2,.7,.2,1), transform 0.8s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
  .js .reveal.is-visible { opacity: 1; transform: none; }
  .js .hero__copy > *, .js .page-hero > * { animation: clocen-rise 0.9s cubic-bezier(.2,.7,.2,1) both; }
  .js .hero__copy > *:nth-child(2), .js .page-hero > *:nth-child(2) { animation-delay: 0.12s; }
  .js .hero__copy > *:nth-child(3), .js .page-hero > *:nth-child(3) { animation-delay: 0.24s; }
  .js .hero__art { animation: clocen-fade 1.4s 0.3s ease both; }
}
@keyframes clocen-rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes clocen-fade { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::before, .page-hero::before, .topology .ping, .topology .shield { animation: none; }
  .topology .ping { opacity: 0; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}

/* ===== v1.1.1 header menu visibility fix =====
   WordPress's navigation block makes links inherit the dark body text colour,
   which overrode the light colour on the navy header. These rules win reliably. */
.site-header .wp-block-navigation.main-nav,
.site-header .wp-block-navigation.main-nav .wp-block-navigation-item,
.site-header .wp-block-navigation.main-nav .wp-block-navigation-item__content,
.site-header .wp-block-navigation.main-nav a { color: #E9EDF3 !important; }
.site-header .wp-block-navigation.main-nav .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation.main-nav .wp-block-navigation-item__content:focus-visible,
.site-header .wp-block-navigation.main-nav .current-menu-item > .wp-block-navigation-item__content,
.site-header .wp-block-navigation.main-nav [aria-current="page"] { color: var(--brass-light) !important; }
/* Mobile menu button, close button and open overlay */
.site-header .main-nav .wp-block-navigation__responsive-container-open,
.site-header .main-nav .wp-block-navigation__responsive-container-close { color: #FFFFFF !important; }
.site-header .main-nav .wp-block-navigation__responsive-container-open svg,
.site-header .main-nav .wp-block-navigation__responsive-container-close svg { fill: currentColor; }
.site-header .main-nav .wp-block-navigation__responsive-container.is-menu-open { background-color: var(--ink) !important; color: #FFFFFF !important; }
/* Dropdown submenus, if you add any later */
.site-header .main-nav .wp-block-navigation__submenu-container { background-color: var(--ink) !important; border: 1px solid rgba(255,255,255,0.12) !important; }