/*
Theme Name: TechNomos AI
Theme URI: https://technomos.ai
Author: TechNomos AI
Author URI: https://technomos.ai
Description: A faithful recreation of the TechNomos AI patent strategy site — engineered technical aesthetic with electric cyan accent, ice-white typography, and Figtree sans-serif. Block theme for WordPress 6+.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.9
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: technomos-ai
*/

:root{
  --color-base:#0d0f13;
  --color-secondary:#1d1f24;
  --color-inverse:#f0f7ff;
  --color-accent:#74d5ff;
  --color-accent-hover:#4bc9ff;
  --tint-inverse-20:rgba(240,247,255,0.2);
  --tint-inverse-10:rgba(240,247,255,0.1);
  --tint-inverse-60:rgba(240,247,255,0.6);
  --tint-base-20:rgba(13,15,19,0.2);
  --tint-base-10:rgba(13,15,19,0.1);
  --tint-base-60:rgba(13,15,19,0.6);
  --container:1280px;
  --radius-button:0.25rem;
  --radius-card:0.5rem;
  --easing:cubic-bezier(0.22,1,0.36,1);
}

/* Base resets */
body{
  font-family:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;
  line-height:1.6;
  background:var(--color-base);
  color:var(--color-inverse);
  -webkit-font-smoothing:antialiased;
}
html{scroll-behavior:smooth;}
*,*::before,*::after{box-sizing:border-box;}
img{max-width:100%;height:auto;display:block;}

/* Reset default block margins for sections that stack edge-to-edge */
.wp-site-blocks > * + *{margin-block-start:0;}
.wp-site-blocks > footer{margin-block-start:0;}

/* Section themes — applied to Group blocks via className */
.section{
  padding:8rem 1rem;
  background:var(--color-base);
  color:var(--color-inverse);
}
.section.is-default{background:var(--color-base);color:var(--color-inverse);}
.section.is-secondary{background:var(--color-secondary);color:var(--color-inverse);}
.section.is-inverse{background:var(--color-inverse);color:var(--color-base);}
.section.is-accent-primary{background:var(--color-accent);color:var(--color-base);}

/* Section inner constraint */
.section > .wp-block-group,
.section > *:not(.alignfull):not(.alignwide){
  max-width:var(--container);
  margin-left:auto;
  margin-right:auto;
}
.section-inner{
  max-width:var(--container);
  margin-left:auto;margin-right:auto;
}

/* Typography scale */
.eyebrow{
  font-size:0.9rem;line-height:1.3em;font-weight:400;
  letter-spacing:0.06em;text-transform:uppercase;opacity:0.8;
  margin:0 0 1rem;
}
.heading_hero{
  font-size:5.65rem;line-height:1.04em;font-weight:300;letter-spacing:-0.01em;
  text-wrap:balance;margin:0 auto 1.5rem;max-width:14ch;
  font-family:"Figtree",sans-serif;
}
.heading_primary{
  font-size:2.83rem;line-height:1.04em;font-weight:300;letter-spacing:-0.01em;
  text-wrap:balance;margin:0 0 1rem;
  font-family:"Figtree",sans-serif;
}
.heading_tertiary{
  font-size:2rem;line-height:1.1em;font-weight:400;letter-spacing:-0.01em;
  font-family:"Figtree",sans-serif;
  margin:0 0 0.5rem;
}
.heading_small{
  font-size:1.41rem;line-height:1.3em;font-weight:500;letter-spacing:-0.01em;
  font-family:"Figtree",sans-serif;
  margin:0;
}
.heading_xsmall{
  font-size:1rem;line-height:1.3em;font-weight:700;letter-spacing:0em;
  margin:0;
}
.subheading{
  font-size:1.13rem;line-height:1.6em;font-weight:400;
  max-width:58ch;margin:0 auto 2rem;opacity:0.85;text-wrap:pretty;
}
.paragraph_large{
  font-size:1.13rem;line-height:1.6em;font-weight:400;
}

/* Section header block */
.section-header{text-align:center;margin-bottom:4rem;}
.section-header .subheading{margin-left:auto;margin-right:auto;}

/* Container */
.container{
  width:100%;
  max-width:var(--container);
  margin-left:auto;margin-right:auto;
  padding:0 1rem;
}

/* Grid helpers */
.grid-3-col{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2rem;
}
.grid-2-col{
  display:grid;grid-template-columns:repeat(2,1fr);gap:3rem;
}
.grid-4-col{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
.gap-medium{gap:3rem;}

/* Buttons */
.button,
.wp-block-button.is-style-technomos .wp-block-button__link,
.wp-block-button__link.wp-element-button{
  display:inline-flex;justify-content:center;align-items:center;
  padding:1em 1.5em;
  background:var(--color-accent);color:var(--color-base);
  border-radius:var(--radius-button);border:0;font-weight:500;font-size:1rem;
  transition:background 200ms var(--easing), box-shadow 200ms var(--easing);
  text-decoration:none;line-height:1.2;
  cursor:pointer;
  font-family:inherit;
  box-shadow:0 1px 1px rgba(0,0,0,0.2), 0 4px 4px rgba(0,0,0,0.2), inset 0 3px 2px -2px rgba(255,255,255,0.5);
}
.button:hover,
.wp-block-button__link.wp-element-button:hover{
  background:var(--color-accent-hover);color:var(--color-base);
  box-shadow:0 1px 1px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.2), inset 0 3px 2px -2px rgba(255,255,255,0.5);
}
.button.on-accent-primary,
.wp-block-button.on-accent-primary .wp-block-button__link{
  background:var(--color-base);color:var(--color-inverse);
}
.button.on-accent-primary:hover,
.wp-block-button.on-accent-primary .wp-block-button__link:hover{
  background:var(--color-secondary);color:var(--color-inverse);
}
.button.is-block{display:block;width:100%;text-align:center;}

.text-link{
  display:inline-flex;align-items:center;gap:0.25rem;
  color:inherit;font-weight:500;
  border-bottom:1px solid currentColor;padding-bottom:2px;
  transition:opacity 200ms var(--easing);
  text-decoration:none;
}
.text-link:hover{opacity:0.7;}

/* Nav / header */
.nav{
  position:sticky;top:0;z-index:50;
  background:var(--color-accent);color:var(--color-base);
}
.nav .wp-block-group,
.nav-inner{
  display:flex;align-items:center;justify-content:space-between;
  max-width:var(--container);margin:0 auto;padding:1rem;gap:1rem;
}
.nav-logo,
.nav .wp-block-image{
  margin:0;
}
.nav-logo img,
.nav .wp-block-image img{
  height:auto;width:auto;
  max-height:38px;max-width:100%;
  display:block;object-fit:contain;
}

/* Hero */
.hero-inner{
  padding:6rem 1rem 0;
}
.hero-content{
  max-width:1000px;margin:0 auto 4rem;text-align:center;
}
.hero-content .subheading{color:var(--color-base);opacity:0.85;}
figure.wp-block-image.hero-image{width:90%;max-width:1400px;display:block;margin:3rem auto 0;border-radius:0.5rem;overflow:hidden;}
.hero-image img{width:100%;height:auto;display:block;border-radius:0.5rem;}
.section.is-hero{padding:0 0 24px;}

/* Services grid */
.services-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem 2rem;
}
.service-card{
  display:flex;flex-direction:column;gap:1.25rem;
  background:transparent;
}
.service-card-image{
  width:100%;aspect-ratio:2/3;overflow:hidden;border-radius:var(--radius-card);
  background:var(--color-secondary);
  margin:0;
}
.service-card-image img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 600ms var(--easing);
}
.service-card:hover .service-card-image img{transform:scale(1.03);}
.service-card h3{margin-bottom:0.5rem;}
.service-card .wp-block-image{margin:0;}
.service-card .wp-block-image img{
  width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:var(--radius-card);
  transition:transform 600ms var(--easing);
}
.service-card:hover .wp-block-image img{transform:scale(1.03);}

/* Team */
.team-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:3rem;
  max-width:1100px;margin:0 auto;
}
.team-member{
  text-align:center;
  padding:1rem 0.75rem;
  border-radius:0.75rem;
  align-self:start;
}
.team-avatar{
  width:200px;height:200px;max-width:100%;
  border-radius:50%;overflow:hidden;margin:0 auto 1.5rem;
  aspect-ratio:1/1;background:var(--color-secondary);
}
.team-avatar img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;transition:transform 900ms cubic-bezier(0.45,0,0.55,1);}
.team-member .wp-block-image{margin:0 auto 1.5rem;}
.team-member .wp-block-image img{
  width:200px;height:200px;border-radius:50%;object-fit:cover;
  aspect-ratio:1/1;margin:0 auto;
  transition:transform 900ms cubic-bezier(0.45,0,0.55,1);
}
.team-name{
  font-size:1rem;font-weight:700;letter-spacing:0;margin:0 0 0.25rem;
  transition:color 500ms cubic-bezier(0.45,0,0.55,1);
}
.team-role{font-size:1rem;opacity:0.6;font-weight:400;margin:0;}

/* Card is interactive (set up by JS) */
.team-member.is-interactive{
  cursor:pointer;
  border-radius:8px;
  outline:none;
  transition:background-color 200ms ease;
}
.team-member.is-interactive:focus-visible{
  outline:2px solid var(--color-accent);
  outline-offset:6px;
}
/* Avatar + name micro-reaction on hover/active/focus (kept subtle) */
.team-member:hover .team-avatar img,
.team-member:focus-visible .team-avatar img,
.team-member[aria-expanded="true"] .team-avatar img,
.team-member:hover .wp-block-image img,
.team-member:focus-visible .wp-block-image img,
.team-member[aria-expanded="true"] .wp-block-image img{
  transform:scale(1.03);
}
.team-member:hover .team-name,
.team-member:focus-visible .team-name,
.team-member[aria-expanded="true"] .team-name{
  color:var(--color-accent);
}

/* Shared bio strip — sits under the grid, full-width, animates smoothly */
.team-bios{
  max-width:1100px;
  margin:0 auto;
  display:grid;
  grid-template-rows:0fr;
  transition:
    grid-template-rows 900ms cubic-bezier(0.4,0,0.2,1),
    margin-top 900ms cubic-bezier(0.4,0,0.2,1);
  margin-top:0;
  will-change:grid-template-rows;
}
.team-bios-inner{
  overflow:hidden;
  min-height:0;
  display:grid;
  grid-template-columns:1fr;
  position:relative;
}
.team-bios-inner > .team-bio,
.team-bio{
  grid-column:1;
  grid-row:1;
  margin:0;
  padding:2rem 1rem 0;
  max-width:760px;
  justify-self:center;
  font-size:1rem;line-height:1.75;
  color:var(--color-inverse);
  text-align:center;
  opacity:0;
  transform:translateY(8px);
  transition:
    opacity 900ms cubic-bezier(0.4,0,0.2,1),
    transform 900ms cubic-bezier(0.4,0,0.2,1);
  pointer-events:none;
}

/* Expand the strip when JS marks it open */
.team-bios.is-open{
  grid-template-rows:1fr;
  margin-top:1rem;
}
/* Fade in the active bio */
.team-bios[data-active="1"] .team-bio-1,
.team-bios[data-active="2"] .team-bio-2,
.team-bios[data-active="3"] .team-bio-3{
  opacity:0.88;
  transform:translateY(0);
}

/* No-JS fallback: see <noscript> in functions.php which mirrors these rules */

/* FAQ */
.faq-list{max-width:1100px;margin:0 auto;}
.faq-item{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  padding:2rem 0;border-top:1px solid var(--tint-base-20);
  margin:0;
}
.faq-item:last-of-type,
.faq-item.is-last{border-bottom:1px solid var(--tint-base-20);}
.faq-question{font-size:1.41rem;line-height:1.3em;font-weight:500;letter-spacing:-0.01em;margin:0;}
.faq-answer{font-size:1rem;line-height:1.6em;opacity:0.8;margin:0;}

.faq-footer{
  display:flex;align-items:center;justify-content:space-between;
  margin:3rem auto 0;max-width:1100px;
  gap:1rem;flex-wrap:wrap;
}

/* Contact form */
.contact-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:start;
}
.contact-form{display:flex;flex-direction:column;gap:1.5rem;}
.field{display:block;}
.field-label{
  display:block;font-size:0.9rem;font-weight:500;
  margin-bottom:0.5rem;letter-spacing:0;
}
.field-input,.field-textarea{
  width:100%;background:transparent;
  border:1px solid var(--tint-inverse-20);border-radius:0.25rem;
  color:var(--color-inverse);font-family:inherit;font-size:1rem;line-height:1.4;
  padding:0.85em 1em;
  transition:border-color 200ms var(--easing);
}
.field-input:focus,.field-textarea:focus{
  outline:none;border-color:var(--color-accent);
}
.field-input::placeholder,.field-textarea::placeholder{color:var(--tint-inverse-60);}
.field-textarea{min-height:72px;resize:vertical;}

.contact-content .heading_primary{margin-bottom:1.5rem;}
.contact-content .subheading{margin-left:0;}

/* Contact Form 7 integration */
.wpcf7{width:100%;}
.wpcf7 form.wpcf7-form{display:flex;flex-direction:column;gap:1.25rem;}
.wpcf7 form br{display:none;}
/* Submit button — CF7 renders <input type="submit">, not <button>.
   Explicitly replicate all button styles so browser UA can't win. */
.wpcf7 input[type="submit"]{
  display:flex;justify-content:center;align-items:center;
  width:100%;text-align:center;
  -webkit-appearance:none;appearance:none;
  padding:1em 1.5em;
  background:var(--color-accent);color:var(--color-base);
  border-radius:var(--radius-button);border:0;
  font-weight:500;font-size:1rem;font-family:inherit;line-height:1.2;
  cursor:pointer;
  box-shadow:0 1px 1px rgba(0,0,0,0.2), 0 4px 4px rgba(0,0,0,0.2), inset 0 3px 2px -2px rgba(255,255,255,0.5);
  transition:background 200ms var(--easing), box-shadow 200ms var(--easing);
}
.wpcf7 input[type="submit"]:hover{
  background:var(--color-accent-hover);
  box-shadow:0 1px 1px rgba(0,0,0,0.2), 0 8px 8px rgba(0,0,0,0.2), inset 0 3px 2px -2px rgba(255,255,255,0.5);
}
.wpcf7 .wpcf7-form-control-wrap{display:block;width:100%;}
/* Validation errors */
.wpcf7 .wpcf7-not-valid-tip{
  display:block;margin-top:0.35rem;
  font-size:0.8rem;color:#f87171;
}
.wpcf7 .field-input.wpcf7-not-valid,
.wpcf7 .field-textarea.wpcf7-not-valid{
  border-color:#f87171;
}
/* Response output (success / error banner) */
.wpcf7 .wpcf7-response-output{
  margin:0;padding:0.85em 1em;border-radius:0.25rem;
  font-size:0.9rem;border:none;
}
.wpcf7 form.sent .wpcf7-response-output{
  background:rgba(116,213,255,0.12);
  color:var(--color-accent);
}
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output{
  background:rgba(248,113,113,0.12);
  color:#f87171;
}
/* Spinner inside submit button */
.wpcf7 .wpcf7-spinner{
  margin-left:0.5em;vertical-align:middle;
  filter:invert(1);opacity:0.7;
}

/* Footer */
.site-footer,
.footer{
  background:var(--color-inverse);color:var(--color-base);
  padding:6rem 1rem 3rem;
}
.footer-inner{
  max-width:var(--container);margin:0 auto;
}
.footer-tagline{
  font-size:4.52rem;line-height:1.04em;font-weight:300;letter-spacing:-0.01em;
  margin:0;max-width:none;width:100%;
  padding:0 1rem;box-sizing:border-box;
  font-family:"Figtree",sans-serif;
  text-align:center;
}
.footer-bottom{display:none;}
/* Fixed back-to-top pill — visible after hero scrolls away */
.back-to-top-wrap{
  position:fixed;bottom:1.5rem;right:1.5rem;z-index:200;
  margin:0;
  background:var(--color-inverse);
  color:var(--color-base);
  padding:0.5rem 1rem;
  border-radius:6px;
  box-shadow:0 2px 12px rgba(0,0,0,0.18);
  font-size:0.85rem;
  opacity:0;pointer-events:none;
  transition:opacity 300ms ease;
}
.back-to-top-wrap.is-visible{opacity:1;pointer-events:auto;}
.back-to-top{color:var(--color-base);font-weight:500;}

.nav-cta{margin:0;}
.nav-cta .wp-block-button__link{
  padding:0.75em 1.25em;
  background:var(--color-base);color:var(--color-inverse);
  border-radius:var(--radius-button);font-weight:500;
}
.nav-cta .wp-block-button__link:hover{background:var(--color-secondary);}

.faq-cta-link{margin:0;}
.faq-cta-link a{font-weight:500;}

.contact-submit{width:100%;margin-top:0.5rem;}
.contact-submit .wp-block-button,
.contact-submit > *{width:100%;}
.contact-submit .wp-block-button__link{
  display:block;width:100%;text-align:center;
  background:var(--color-accent);color:var(--color-base);
}
.contact-submit .wp-block-button__link:hover{background:var(--color-accent-hover);}

/* Scroll reveal */
.animate-on-scroll{
  opacity:0;transform:translateY(24px);
  transition:opacity 400ms var(--easing),transform 400ms var(--easing);
}
.animate-on-scroll.is-visible{opacity:1;transform:translateY(0);}

/* Keep animated content visible in the editor */
.editor-styles-wrapper .animate-on-scroll{
  opacity:1 !important;
  transform:none !important;
  animation:none !important;
  transition:none !important;
}

/* Responsive */
@media (max-width:991px){
  .heading_hero,.footer-tagline{font-size:3.2rem;}
  .heading_primary{font-size:2.25rem;}
  .services-grid,.grid-3-col{grid-template-columns:repeat(2,1fr);}
  .team-grid{grid-template-columns:repeat(3,1fr);gap:2rem;}
  .contact-grid,.grid-2-col{gap:3rem;}
}
@media (max-width:767px){
  .section{padding:5rem 1rem;}
  .hero-inner{padding:4rem 1rem 0;}
  .heading_hero,.footer-tagline{font-size:2.4rem;}
  .heading_primary{font-size:2rem;}
  .services-grid,.grid-3-col{grid-template-columns:1fr;gap:2.5rem;}
  .team-grid{grid-template-columns:1fr;}
  .team-avatar,
  .team-member .wp-block-image img{width:180px;height:180px;}
  .faq-item{grid-template-columns:1fr;gap:0.75rem;padding:1.5rem 0;}
  .contact-grid,.grid-2-col{grid-template-columns:1fr;gap:2.5rem;}
  .contact-grid > .wp-block-column:last-child{order:-1;}
  .site-footer,.footer{padding:4rem 1rem 2rem;}
  .nav .wp-block-group,
  .nav-inner{padding:0.75rem 1rem;}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
  .animate-on-scroll{opacity:1 !important;transform:none !important;}
}