/* =================================================================
   Infigo Academy – HTMLContentBlock1 Custom Styling
   Target markup:
     <section id="blockID"> … </section>
   ================================================================= */

/* 0.  Brand colour & font variables
   -------------------------------------------------------------- */
:root{
  --primary-navy       : #002E47;   /* Deep corporate blue      */
  --primary-coral      : #FF6867;   /* Coral highlight colour   */
  --secondary-yellow   : #FFE000;   /* Yellow accent for links  */
  --font-primary       : 'PT Sans', Arial, sans-serif;
}

/* 1.  Frame the whole section & centralise its content
   -------------------------------------------------------------- */
#blockID{
  display:flex;                    /* turns section into flex-box */
  justify-content:center;          /* centre horizontal */
  align-items:center;              /* centre vertical   */
  padding-block:4rem;              /* top & bottom breathing room */
  background:var(--primary-navy);  /* brand navy backdrop */
  font-family:var(--font-primary); /* default font       */
}

/* 2.  Keep the inner Bulma container tidy (80 % width)
   -------------------------------------------------------------- */
#blockID .container{
  width:80%;
  max-width:72rem;                 /* don’t get crazy wide on 4k screens */
  text-align:center;
  padding:0;                       /* we’ll handle padding on the card */
}

/* 3.  Coral “card” that actually holds your copy
   -------------------------------------------------------------- */
#blockID .ict-wysiwyg{
  background:var(--primary-coral);
  padding:3.5rem 2.75rem;
  border-radius:2rem;              /* super-soft corners */
  box-shadow:0 2rem 3rem rgba(0,0,0,.25);
  color:#ffffff;                   /* high-contrast text */
  font-size:clamp(1rem,2.2vw,1.15rem);
  line-height:1.65;
  position:relative;               /* enables our decorative corners */

  /* Fun hover lift (desktop only) */
  transition:transform .45s cubic-bezier(.33,1,.68,1),
              box-shadow .45s cubic-bezier(.33,1,.68,1);
}
@media (hover:hover){
  #blockID .ict-wysiwyg:hover{
    transform:translateY(-6px) scale(1.015);
    box-shadow:0 2.5rem 3.75rem rgba(0,0,0,.35);
  }
}

/* 4.  Brand “crop-mark” corners – decorative L-shapes
   -------------------------------------------------------------- */
/* top-left corner */
#blockID .ict-wysiwyg::before,
#blockID .ict-wysiwyg::after{
  content:'';
  position:absolute;
  width:5rem;            /* size matches logo corner on guidelines */
  height:4.5rem;
  border:6px solid #ffffff;
  opacity:.9;
  transform-origin:top left;
  transition:transform .6s ease-out;
}

/* Only show left & top arms for TL */
#blockID .ict-wysiwyg::before{
  top:-1.1rem;
  left:-1.1rem;
  border-right:none;
  border-bottom:none;
}

/* bottom-right corner – show bottom & right arms */
#blockID .ict-wysiwyg::after{
  bottom:-1.1rem;
  right:-1.1rem;
  border-left:none;
  border-top:none;
}

/* Hover animation – tiny swivel so both corners feel alive */
@media (hover:hover){
  #blockID .ict-wysiwyg:hover::before{
    transform:rotate(-12deg) translate(-6px,4px);
  }
  #blockID .ict-wysiwyg:hover::after{
    transform:rotate(12deg) translate(6px,-4px);
  }
}

/* 5.  Link treatment – white text with yellow slide-in underline
   -------------------------------------------------------------- */
#blockID .ict-wysiwyg a{
  color:#ffffff;
  font-weight:bold;
  text-decoration:none;
  position:relative;
}
#blockID .ict-wysiwyg a::after{
  content:'';
  position:absolute;
  left:0; bottom:-4px;
  width:100%; height:2px;
  background:var(--secondary-yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .35s ease-out;
}
#blockID .ict-wysiwyg a:hover::after{
  transform:scaleX(1);
}

/* 6.  Mobile tweaks – tighten padding & shrink corners
   -------------------------------------------------------------- */
@media(max-width:35rem){
  #blockID .ict-wysiwyg{
    padding:2.25rem 1.5rem;
    border-radius:1.25rem;
  }
  #blockID .ict-wysiwyg::before,
  #blockID .ict-wysiwyg::after{
    width:3.25rem;
    height:3rem;
  }
}