/*
   Homepage redesign bundle
   Path suggestion: wwwroot/site/css/pages/homepage-redesign.css

   Assumptions:
   - Redesigned header/footer CSS is loaded globally through /site/css/layout-redesign.css.
   - Legacy/homepage old content can still be styled by the old legacy main.css.
   - This file only supports the redesigned homepage hero/static CKEditor block.
*/

/* Redesigned homepage hero + three CTA cards */
@import '../components/hero-homapge.css';

/*
   Scoped homepage CTA button styles.

   We do NOT import ../components/buttons.css here because that file styles
   the generic .btn class globally and may affect older/non-redesigned content.
   The CKEditor hero link currently uses:
   <a class="home-hero__lnk btn btn-red" ...>
*/
.pera {
    border:12px solid crimson;
}
.home-hero__lnk.btn {
   z-index: 1;
   border: 1px solid rgba(255, 255, 255, 0.16);
   border-radius: 40px;
   outline: 0 solid var(--blue);
   background-color: var(--blue);
   padding: 7px 7px 7px clamp(16px, 1.6vw, 22px);
   color: var(--wh);
   font-family: var(--font-gilroy);
   font-weight: var(--fw-400);
   font-size: var(--fs-16);
   display: flex;
   justify-content: space-between;
   align-items: center;
   transition: outline .38s, letter-spacing .4s;
}

@media screen and (min-width: 532px) {
   .home-hero__lnk.btn {
      width: fit-content;
   }
}

.home-hero__lnk.btn:hover {
   outline: 8px solid transparent;
   letter-spacing: 0.02em;
}

.home-hero__lnk.btn-red {
   background-color: var(--wh);
   border: 1px solid var(--wh);
   color: #191919;
}

.home-hero__lnk.btn > span {
   position: relative;
   border-radius: 20px;
   background-color: var(--wh);
   display: block;
   min-width: 32px;
   width: 2.5vw;
   max-width: 40px;
   min-height: 32px;
   height: 2.5vw;
   max-height: 40px;
   margin-left: 12px;
   overflow: hidden;
}

.home-hero__lnk.btn-red > span {
   background-color: var(--red);
}

.home-hero__lnk.btn > span > svg {
   position: absolute;
   top: 50%;
   left: 50%;
}

.home-hero__lnk.btn > span > svg:first-of-type {
   transform: translate(-50%, -50%);
   transition: transform .22s ease-out .1s;
}

.home-hero__lnk.btn > span > svg:last-of-type {
   transform: translate(-350%, -50%) rotate(45deg);
   transition: transform .2s ease-out;
}

.home-hero__lnk.btn:hover > span > svg:first-of-type {
   transform: translate(150%, -250%);
   transition: transform .2s ease-out;
}

.home-hero__lnk.btn:hover > span > svg:last-of-type {
   transform: translate(-50%, -50%) rotate(45deg);
   transition: transform .22s ease-out .1s;
}

.home-hero__lnk.btn > span > svg > path {
   stroke: var(--blue-dark);
}

.home-hero__lnk.btn-red > span > svg > path {
   stroke: var(--wh);
}

/*
   CKEditor / legacy coexistence helpers.

   These are intentionally light-touch. The two old sections should continue
   to rely on the legacy main.css until their classes are renamed or redesigned.
*/

.hero-slider__layout {
   isolation: isolate;
}

.hero-slider__layout a {
   text-decoration: none;
}

.hero-slider__layout .video__hero {
   pointer-events: none;
}

.hero-slider__footer-col {
   color: inherit;
}

.hero-slider__footer-col:focus-visible,
.home-hero__lnk:focus-visible {
   outline: 3px solid var(--red);
   outline-offset: 4px;
}

/*
   Small safety adjustment for mobile when CKEditor/legacy styles add margins
   around the inserted content.
*/

.hero-slider__layout:first-child {
   margin-top: 0;
}