/*
 * HR-Automation 2026 design layer
 * Foundation: The7 v15 FSE Business + native WordPress blocks.
 * This file deliberately inherits The7 typography/global styles and only adds
 * HR-Automation branding, layout refinements and lightweight component styles.
 */


:root{
  --hra-red-950:#4a050d;
  --hra-red-900:#680713;
  --hra-red-800:#8f091a;
  --hra-red-700:#b10b20;
  --hra-red-600:#c90d25;
  --hra-red-500:#d80e28;
  --hra-red-400:#e44156;
  --hra-red-300:#ee7484;
  --hra-red-200:#f6a8b2;
  --hra-red-100:#fbd4d9;
  --hra-red-050:#fef1f3;
  --hra-ink:#0d1426;
  --hra-charcoal:#15171a;
  --hra-text:#314158;
  --hra-muted:#62748e;
  --hra-border:#e2e8f0;
  --hra-surface:#f8fafc;
  --hra-white:#fff;
}

body.hra-design-active{
  /* The7 FSE Business/BBE uses these preset names. Re-mapping them only on
     HR-Automation pages makes native The7 buttons, links and design elements
     follow the corporate red without editing theme files. */
  --wp--preset--color--bbe-primary-950:var(--hra-red-950);
  --wp--preset--color--bbe-primary-900:var(--hra-red-900);
  --wp--preset--color--bbe-primary-800:var(--hra-red-800);
  --wp--preset--color--bbe-primary-700:var(--hra-red-700);
  --wp--preset--color--bbe-primary-600:var(--hra-red-600);
  --wp--preset--color--bbe-primary-500:var(--hra-red-500);
  --wp--preset--color--bbe-primary-400:var(--hra-red-400);
  --wp--preset--color--bbe-primary-300:var(--hra-red-300);
  --wp--preset--color--bbe-primary-200:var(--hra-red-200);
  --wp--preset--color--bbe-primary-100:var(--hra-red-100);
  --wp--preset--color--bbe-primary-050:var(--hra-red-050);
}

.hra-relaunch-page{color:var(--wp--preset--color--bbe-neutral-700,var(--hra-text));}
.hra-relaunch-page .wp-site-blocks{overflow:clip;}
.hra-relaunch-page .hra-main{margin-block-start:0;}

/* The7 header remains the structural foundation. These are only CI touches. */
.hra-relaunch-page header .wp-block-site-logo img,
.hra-relaunch-page header .custom-logo{width:auto;max-height:56px;object-fit:contain;}
.hra-relaunch-page header a{text-underline-offset:.18em;}
.hra-relaunch-page header .wp-block-button__link{border-radius:0;}

/* Hero: inspired by The7 Business overlay composition, but without heavyweight
   sliders, video or JavaScript. */
.hra-relaunch-page .hra-hero{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    linear-gradient(112deg,rgba(13,20,38,.98) 0%,rgba(21,23,26,.96) 58%,rgba(74,5,13,.92) 100%);
  color:var(--hra-white);
  padding-block:var(--wp--preset--spacing--bbe-150,clamp(80px,9vw,112px));
  padding-inline:max(24px,calc((100vw - var(--wp--style--global--wide-size,1300px))/2));
  margin-block-start:0;
}
.hra-relaunch-page .hra-hero:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:44px 44px;
  mask-image:linear-gradient(90deg,#000,transparent 88%);
}
.hra-relaunch-page .hra-hero:after{
  content:"";
  position:absolute;
  width:min(42vw,620px);
  aspect-ratio:1;
  right:-14vw;
  bottom:-55%;
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  box-shadow:0 0 0 58px rgba(255,255,255,.025),0 0 0 116px rgba(255,255,255,.018);
  z-index:-1;
}
.hra-relaunch-page .hra-hero > *{max-width:var(--wp--style--global--wide-size,1300px);margin-inline:auto;}
.hra-relaunch-page .hra-eyebrow{
  margin:0 0 var(--wp--preset--spacing--bbe-50,20px);
  color:#fff;
  font-size:var(--wp--preset--font-size--bbe-small,.875rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.hra-relaunch-page .hra-eyebrow:before{content:"";display:inline-block;width:46px;height:3px;background:var(--hra-red-500);vertical-align:middle;margin-right:14px;}
.hra-relaunch-page .hra-h1{
  max-width:1050px;
  margin:0;
  color:#fff;
  font-size:var(--wp--preset--font-size--bbe-display-3,clamp(44px,6vw,72px));
  line-height:1.02;
  letter-spacing:-.035em;
  text-wrap:balance;
}
.hra-relaunch-page .hra-lead{
  max-width:850px;
  margin-top:var(--wp--preset--spacing--bbe-70,28px);
  margin-bottom:0;
  color:rgba(255,255,255,.82);
  font-size:var(--wp--preset--font-size--bbe-x-large,clamp(18px,2vw,20px));
  line-height:1.65;
}
.hra-relaunch-page .hra-hero-actions{margin-top:var(--wp--preset--spacing--bbe-80,32px);gap:12px;}
.hra-relaunch-page .wp-block-button__link{border-radius:0;font-weight:650;}
.hra-relaunch-page .hra-hero .wp-block-button__link{padding:15px 24px;}
.hra-relaunch-page .hra-hero .is-style-outline .wp-block-button__link{border-color:rgba(255,255,255,.7);color:#fff;background:transparent;}
.hra-relaunch-page .hra-hero .is-style-outline .wp-block-button__link:hover{border-color:#fff;background:#fff;color:var(--hra-ink);}

/* Lightweight capability rail: creates continuity with the old site's
   technology-first message while looking native to The7 Business. */
.hra-relaunch-page .hra-capability-rail{
  background:var(--hra-white);
  border-bottom:1px solid var(--hra-border);
  padding:18px max(24px,calc((100vw - var(--wp--style--global--wide-size,1300px))/2));
}
.hra-relaunch-page .hra-capability-rail-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;max-width:var(--wp--style--global--wide-size,1300px);margin-inline:auto;}
.hra-relaunch-page .hra-capability-label{margin:0;color:var(--hra-ink);font-size:.82rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.hra-relaunch-page .hra-capability-item{margin:0;color:var(--hra-muted);font-size:.93rem;white-space:nowrap;}

.hra-relaunch-page .hra-section{
  padding-block:var(--wp--preset--spacing--bbe-140,clamp(72px,8vw,96px));
  padding-inline:max(24px,calc((100vw - var(--wp--style--global--wide-size,1300px))/2));
  margin-block-start:0;
}
.hra-relaunch-page .hra-section > *{max-width:var(--wp--style--global--wide-size,1300px);margin-inline:auto;}
.hra-relaunch-page .hra-section:nth-of-type(odd){background:var(--wp--preset--color--bbe-neutral-050,var(--hra-surface));}
.hra-relaunch-page .hra-section h2{
  max-width:940px;
  margin-top:0;
  color:var(--wp--preset--color--bbe-neutral-950,var(--hra-ink));
  font-size:var(--wp--preset--font-size--bbe-title-2,clamp(36px,4.5vw,48px));
  line-height:1.12;
  letter-spacing:-.025em;
  text-wrap:balance;
}
.hra-relaunch-page .hra-section-intro{
  max-width:850px;
  margin-bottom:var(--wp--preset--spacing--bbe-90,40px);
  color:var(--wp--preset--color--bbe-neutral-500,var(--hra-muted));
  font-size:var(--wp--preset--font-size--bbe-x-large,19px);
  line-height:1.7;
}
.hra-relaunch-page .hra-grid{gap:18px;}
.hra-relaunch-page .hra-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:var(--wp--preset--spacing--bbe-80,32px);
  background:#fff;
  border:1px solid var(--wp--preset--color--bbe-neutral-200,var(--hra-border));
  border-radius:0;
  box-shadow:var(--wp--preset--shadow--natural,0 1px 15px 1px rgba(25,30,41,.05));
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.hra-relaunch-page .hra-card:before{content:"";position:absolute;left:-1px;top:-1px;width:54px;height:3px;background:var(--hra-red-500);}
.hra-relaunch-page .hra-card:hover{transform:translateY(-3px);border-color:var(--hra-red-200);box-shadow:var(--wp--preset--shadow--deep,0 4px 20px 1px rgba(25,30,41,.12));}
.hra-relaunch-page .hra-card-index{margin:0 0 22px;color:var(--hra-red-600);font-weight:700;font-size:.78rem;letter-spacing:.12em;}
.hra-relaunch-page .hra-card h3{margin-top:0;color:var(--wp--preset--color--bbe-neutral-950,var(--hra-ink));font-size:var(--wp--preset--font-size--bbe-title-5,24px);line-height:1.2;}
.hra-relaunch-page .hra-card p{color:var(--wp--preset--color--bbe-neutral-600,#45556c);line-height:1.68;}
.hra-relaunch-page .hra-card-link{margin-top:auto!important;padding-top:18px;}
.hra-relaunch-page .hra-card-link a{color:var(--hra-red-600);font-weight:650;text-decoration:none;}
.hra-relaunch-page .hra-card-link a:hover{text-decoration:underline;}

.hra-relaunch-page .hra-checklist{max-width:900px;padding-left:0;list-style:none;}
.hra-relaunch-page .hra-checklist li{position:relative;margin:14px 0;padding-left:32px;line-height:1.65;}
.hra-relaunch-page .hra-checklist li:before{content:"";position:absolute;left:0;top:.72em;width:14px;height:2px;background:var(--hra-red-500);}

.hra-relaunch-page .hra-steps{border-top:1px solid var(--hra-border);}
.hra-relaunch-page .hra-step{display:grid;grid-template-columns:72px minmax(190px,300px) 1fr;gap:24px;padding:30px 0;border-bottom:1px solid var(--hra-border);}
.hra-relaunch-page .hra-step-num{margin:0;color:var(--hra-red-600);font-weight:750;letter-spacing:.08em;}
.hra-relaunch-page .hra-step h3,.hra-relaunch-page .hra-step p{margin:0;}
.hra-relaunch-page .hra-step h3{color:var(--hra-ink);}
.hra-relaunch-page .hra-step p:last-child{color:var(--hra-muted);line-height:1.65;}

.hra-relaunch-page .hra-faq{max-width:960px;border-top:1px solid var(--hra-border);padding:20px 0;}
.hra-relaunch-page .hra-faq:last-of-type{border-bottom:1px solid var(--hra-border);}
.hra-relaunch-page .hra-faq summary{cursor:pointer;color:var(--hra-ink);font-size:1.08rem;font-weight:650;}
.hra-relaunch-page .hra-faq p{color:var(--hra-muted);line-height:1.7;}

.hra-relaunch-page .hra-cta{background:var(--hra-ink)!important;color:#fff;}
.hra-relaunch-page .hra-cta h2{color:#fff;}
.hra-relaunch-page .hra-cta .hra-section-intro{color:rgba(255,255,255,.78);}

.hra-contact-form{max-width:820px;}
.hra-contact-form input:not([type=checkbox]),.hra-contact-form textarea{width:100%;box-sizing:border-box;padding:14px 15px;border:1px solid var(--hra-border);border-radius:0;background:#fff;font:inherit;}
.hra-contact-form input:focus,.hra-contact-form textarea:focus{outline:2px solid var(--hra-red-200);outline-offset:1px;border-color:var(--hra-red-500);}
.hra-contact-form label{font-weight:600;color:var(--hra-ink);}
.hra-hp{position:absolute!important;left:-9999px!important;}

.hra-relaunch-page footer{border-top:1px solid var(--hra-border);}
.hra-relaunch-page footer a:hover{color:var(--hra-red-600);}

@media(max-width:920px){
  .hra-relaunch-page .hra-step{grid-template-columns:52px 1fr;}
  .hra-relaunch-page .hra-step p:last-child{grid-column:2;}
}
@media(max-width:720px){
  .hra-relaunch-page .hra-hero{padding-inline:20px;}
  .hra-relaunch-page .hra-section{padding-inline:20px;}
  .hra-relaunch-page .hra-capability-rail{padding-inline:20px;}
  .hra-relaunch-page .hra-h1{font-size:clamp(40px,11vw,58px);}
  .hra-relaunch-page .hra-card{padding:26px;}
  .hra-relaunch-page header .wp-block-site-logo img,.hra-relaunch-page header .custom-logo{max-height:46px;}
}
@media(prefers-reduced-motion:reduce){
  .hra-relaunch-page *{scroll-behavior:auto!important;animation:none!important;transition:none!important;}
}

/* Editable FSE header/footer overrides installed by the toolkit. */
.hra-topbar{margin-block-start:0!important;background:var(--wp--preset--color--bbe-neutral-950,var(--hra-ink));color:#fff;padding:8px max(20px,calc((100vw - var(--wp--style--global--wide-size,1300px))/2));}
.hra-topbar .hra-topbar-inner{max-width:var(--wp--style--global--wide-size,1300px);margin-inline:auto;gap:12px 24px;}
.hra-topbar p{margin:0;color:rgba(255,255,255,.78);line-height:1.4;}
.hra-topbar a{color:#fff;text-decoration:none;}
.hra-site-header{margin-block-start:0!important;background:#fff;border-bottom:1px solid var(--hra-border);padding:14px max(20px,calc((100vw - var(--wp--style--global--wide-size,1300px))/2));}
.hra-site-header-inner{max-width:var(--wp--style--global--wide-size,1300px);margin-inline:auto;gap:28px;}
.hra-site-header .hra-site-logo{flex:0 0 auto;}
.hra-site-header .wp-block-site-logo img{width:auto!important;height:auto!important;max-width:205px;max-height:58px;}
.hra-site-header .hra-primary-nav{flex:1 1 auto;}
.hra-site-header .hra-header-actions{flex:0 0 auto;}
.hra-site-header .wp-block-navigation-item__content{font-weight:550;}
.hra-site-header .wp-block-navigation-item__content:hover{color:var(--hra-red-600);}
.hra-site-footer{margin-block-start:0!important;background:var(--wp--preset--color--bbe-neutral-950,var(--hra-ink));color:rgba(255,255,255,.74);padding:var(--wp--preset--spacing--bbe-120,64px) max(20px,calc((100vw - var(--wp--style--global--wide-size,1300px))/2)) 24px;}
.hra-site-footer .hra-footer-columns,.hra-site-footer .hra-footer-bottom{max-width:var(--wp--style--global--wide-size,1300px);margin-inline:auto;}
.hra-site-footer h3,.hra-site-footer h4{color:#fff;}
.hra-site-footer a{color:rgba(255,255,255,.82);text-decoration:none;}
.hra-site-footer a:hover{color:#fff;text-decoration:underline;}
.hra-site-footer ul{list-style:none;padding-left:0;}
.hra-site-footer li{margin:.65em 0;}
.hra-site-footer .hra-footer-bottom{border-top:1px solid rgba(255,255,255,.14);padding-top:20px;margin-top:38px;gap:12px 28px;}
.hra-site-footer .hra-footer-bottom p{margin:0;color:rgba(255,255,255,.58);}
.hra-lang-de .hra-en-only{display:none!important;}
.hra-lang-en .hra-de-only{display:none!important;}

@media(max-width:980px){
  .hra-site-header .hra-header-actions{display:none;}
  .hra-site-header-inner{gap:16px;}
}
@media(max-width:720px){
  .hra-topbar .hra-topbar-inner{display:block;}
  .hra-topbar p+ p{margin-top:4px;}
  .hra-site-header .wp-block-site-logo img{max-width:175px;max-height:48px;}
}