@charset "UTF-8";

:root {
  /* CONTAINER */
  --container-400: 1480px;
  --container-900: 100%;
  --content-padding-block: 80px;
  --content-padding-inline: 20px;

  /* COLOURS */
  --white: #ffffff;
  --black: #000000;
  --grey-200: #f2f2f2;
  --grey-400: #cccccc;     /* most common border colour */
  --grey-600: #9a9a9a;
  --grey-800: #58585a;
  --grey-900: #2f2f2f;    /* body copy, list text */
  --blue-100: #e3f0fb;     /* icon circle background */
  --blue-200: #5dbae5;     /* login border */
  --blue-400: #0073c9;     /* primary brand blue - headings, links */
  --blue-800: #003893;     /* homebutton accent 6 */
  --green-200: #d5eed2;
  --green-400: #009c32;    /* homebutton accent 2 */
  --green-800: #006648;    /* homebutton accent 1 */
  --red-200: #ffe4e7;
  --red-400: #d81e05;      /* homebutton accent 8 */
  --red-800: #780a26;     /* calendar today */
  --orange-400: #e2880d;   /* calendar date activity */
  --purple-400: #36167d;   /* homebutton accent 4 */

  /* ── SEMANTIC ALIASES ─────────────────────────────────────── */
  --primarycolor-400: var(--blue-400);
  --secondarycolor-400: var(--green-600);
  --textcolor-400: var(--grey-1700);
  --bordercolor-400: var(--grey-700);
  --backgroundcolor-400: var(--white);

  /* TEXT SIZE/LINE HEIGHTS */
  --fontsize-200: 0.8rem;
  --fontsize-300: 0.9rem;
  --fontsize-400: 1rem;
  --fontsize-450: 1.1rem;
  --fontsize-500: 1.25rem;
  --fontsize-600: 1.5rem;
  --fontsize-700: 1.75rem;
  --fontsize-800: 2rem;
  --fontsize-900: 2.5rem;
  --fontsize-1000: 3rem;
  --defaultlineheight: 1.5;

  /* ── FONT FAMILIES ────────────────────────────────────────── */
  --bodyfont: arial, sans-serif;
  --tablefont: Arial, Helvetica, sans-serif;

  /* ── FONT WEIGHTS ─────────────────────────────────────────── */
  --fontweight-300: 300; /* Light */
  --fontweight-400: 400;
  --fontweight-500: 500; /* Medium */
  --fontweight-600: 600; /* Semibold - used with secondaryfont for headings */
  --fontweight-700: 700; /* Bold */

  /* ── TYPOGRAPHY SHORTCUTS ─────────────────────────────────── */
  --defaultfontsize: var(--fontsize-250);

}

body {display: flex; flex-direction: column; height: 100%;}
main {display: block; flex-grow: 1;}

/* .header, .search, .nav, main, .content, .footer {width: var(--container-400);} */

.content.home {display: grid; grid-template-columns: 1fr 2fr; gap: 40px;}
.content.home .col1, .content.home .col2 {float: unset!important; width: 100%!important; margin: 0!important;}

/* HOME BANNER */
.content.home .col2 {display: flex;}
.home-banner {width: 100%; display: flex; flex-direction: column; gap: 20px;}
.home-banner .banner {flex: 1; position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;}
.home-banner .banner .image {flex: 1; display: block; overflow: hidden;}
.home-banner .banner .image img {width: 100%; height: 100%; object-fit: cover; display: block;}
.home-banner .banner .text-wrap {background: #ae2573; background: linear-gradient(to right, #ae2573, #d22d8b);}
.home-banner .banner .text-wrap a {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 30px; color: var(--white); font-weight: var(--fontweight-700); font-size: var(--fontsize-450); text-decoration: none;}
.home-banner .banner .text-wrap a::after {content: ""; flex-shrink: 0; width: 10px; height: 10px; border-top: 3px solid var(--white); border-right: 3px solid var(--white); transform: rotate(45deg); transition: all 0.2s ease-in-out;}
.home-banner .banner:hover .text-wrap a:after {transform: rotate(45deg) translate(7px, -7px);}


.featureboxes {grid-column: 1/-1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.featureboxes .clear {display: none;}
.featureboxes .left, .featureboxes .right, .featureboxes .feature {width: 100%; height: 100%; float: unset; margin: 0;}
.featureboxes .feature {position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;}
.featureboxes .feature > a:first-child {flex: 1; display: block; overflow: hidden;}
.featureboxes .feature > a:first-child img, .featureboxes .feature img.featurebox {width: 100%; height: 100%; object-fit: cover; display: block;}
.featureboxes .feature .strapline {margin: 0; gap: 10px;}
.featureboxes .feature .strapline a {display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; box-sizing: border-box; padding: 12px 20px; color: var(--white); font-weight: var(--fontweight-700); font-size: var(--fontsize-450); text-decoration: none;}
.featureboxes .feature .strapline a:hover {text-decoration: underline;}
.featureboxes .feature .strapline a::after {content: ""; flex-shrink: 0; width: 10px; height: 10px; border-top: 3px solid var(--white); border-right: 3px solid var(--white); transform: rotate(45deg); transition: all 0.2s ease-in-out;}
.featureboxes .feature:hover .strapline a::after {transform: rotate(45deg) translate(4px, -4px);}

.featureboxes .feature.orange .strapline {background: #5c2d91;}
.featureboxes .feature.darkblue .strapline {background: #005eb8;}
.featureboxes .feature.blue .strapline {background: #006b54;}

/* HOME LINKS FEATURE */
.home-links {grid-column: 1/-1; display: flex; flex-wrap: wrap; border: 1px solid var(--grey-400); border-radius: 12px; background: var(--white); margin: 0;}
.home-links .link-box {flex: 1 1 0; min-width: 280px; display: flex; align-items: center; gap: 20px; padding: 25px;}
.home-links .link-box:not(:first-child) {border-left: 1px solid var(--grey-400);}
.home-links .link-box .icon, .home-links .link-box .image {flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: var(--blue-100); display: flex; align-items: center; justify-content: center; margin: 0; padding: 0; overflow: hidden; font-size: var(--fontsize-600); line-height: 1; color: var(--blue-400);}
.home-links .link-box .image img {width: 28px; height: 28px; object-fit: contain;}
.home-links .link-box .text-wrap {display: flex; flex-direction: column; gap: 4px;}
.home-links .link-box .heading {margin: 0; font-size: var(--fontsize-500); font-weight: var(--fontweight-700); color: var(--black);}
.home-links .link-box .desc {margin: 0; color: var(--grey-900);}
.home-links .link-box a {color: var(--blue-400); font-weight: var(--fontweight-600); text-decoration: underline;}
.home-links .link-box a:hover {text-decoration: none;}

@media (max-width: 995px) {
  .features .feature {width: 100%; height: 100%!important; padding-bottom: 0!important;}
  .features .feature img, .home-banner .banner .image img {width: 100%!important; margin: 0; height: 100%!important; object-fit: cover;}

  .featureboxes .left, .featureboxes .right, .featureboxes .feature {width: 100%!important; height: 100%!important; float: unset!important; margin: 0!important;}
}

@media (max-width: 720px) {
  .featureboxes {grid-template-columns: 1fr;}
}

@media (max-width: 667px) {
  .features .feature.orange a {display: block!important;}
}

@media (max-width: 620px) {
  .content.home {grid-template-columns: 1fr;}

  .home-banner .banner {min-height: 280px;}

  .home-links {flex-direction: column;}
  .home-links .link-box:not(:first-child) {border-left: none; border-top: 1px solid var(--grey-400);}

  .home-links .link-box {min-width: unset; padding: 15px;}
}

@media (max-width: 400px) {
  .home-links .link-box {flex: 1; flex-direction: column; justify-content: center;}
  .home-links .link-box p, .home-links .link-box a {text-align: center;}
}