/* style.css */
@import url('_variables.css'); /* or @import '_variables.css'; */


/* Global default */
html,
body {
  font-family: var(--font-manrope);
}


body {
    padding:0;
    margin:0;
    color: var(--colour-indigo);
    background: #fff;
    font-style: normal;
    font-weight:300;
    font-size:16px;
    line-height:1.5em;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  body {
    font-size:15px;
    line-height:1.4em;
  }
}

.l-external-container, .l-main {
  min-height:100vh
}

.l-main {
  display: flex;
  flex-direction: column;
}


/* Basic Font Styling */

p {
    font-family: var(--font-manrope);
    font-size: 1em;
    line-height: 1.5em;
    font-weight:300;
    color: var(--colour-indigo);
    margin-bottom:0.5em;
}

p a {
   color: var(--colour-blue-one);
   transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out; 
}

p a:hover {
    color: var(--colour-blue-two);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-barlow);
    font-weight:600;
}

h1 {
  @apply text-4xl/5;
}
h2 {
  @apply text-3xl/5;  
}
h3 {
  @apply text-2xl/6;
}
h4, h5, h6 {
  @apply text-xl/8; 
}

b, strong {
    font-weight: 600;
}


/* Fun Default List Styling */

/* Reset default bullets + give room for the custom icon */
 .block-richText  ul {
    list-style: none;
    padding-left: 1.25rem; /* ~20px indentation */
    margin: 1rem 0;
  }

 .block-richText  ul li {
    position: relative;
    padding-left: 0; /* text stays aligned with the marker gutter */
  }

  /* Custom bullet using mask so it inherits text colour */
  .block-richText ul li::before {
    content: "";
    position: absolute;
    left: -1.5em;      /* sits in the padding gutter */
    top: 0.75em;          /* vertically centres against text line-height */
    transform: translateY(-50%);
    width: 0.9em;
    height: 0.9em;

    /* colour comes from the text (currentColor) */
    background-color: currentColor;

    /* mask = the SVG shape; scales crisply on HiDPI */
    -webkit-mask: url("/uploads/seaweed-icon-eucheumatoids.svg") no-repeat center / contain;
    mask: url("/uploads/seaweed-icon-eucheumatoids.svg") no-repeat center / contain;
  }

  /* Nested lists: smaller + nudged */
  .block-richText ul ul {
    padding-left: 1.5rem;
    margin-top: 0.35rem;
  }
  .block-richText ul ul li::before {
    left: -1.5rem;
    width: 0.5em;
    height: 0.5em;
    opacity: 0.8;
  }



/* Background Colours */

.bg-indigo {
    background-color: var(--colour-indigo);
}
.bg-green {
    background-color: var(--colour-green);
}
.bg-blue-one {
    background-color: var(--colour-blue-one);
}
.bg-blue-two {
    background-color: var(--colour-blue-two);
}
.bg-grey-one {
    background-color: var(--colour-grey-one);
}
.bg-grey-two {
    background-color: var(--colour-grey-two);
}


/* BUTTONS */

.button-link__link {
  @apply inline-block min-w-[60%] md:w-auto px-8 py-4 text-white rounded-md transition-all;
  background-color: var(--colour-blue-one);
  text-transform: uppercase;
}

.button-link__link:hover { 
  @apply shadow-lg opacity-85;
  background-image: linear-gradient(0deg,rgba(0, 0, 0, 0.20) 0%, rgba(0, 0, 0, 0) 65%);
  background-blend-mode: overlay;
}

.button-link__link.default {
  background-color: var(--colour-blue-one);  
}

.button-link__link.dark {
  background-color: var(--colour-green);  
}

.button-link__link.light {
  background-color: var(--colour-cloud);
  color:var(--colour-indigo);  
}

.button-link__link.orange {
  background-color: var(--colour-tangerine);  
}

.button-link__link.teal {
  background-color: var(--colour-teal);  
}

.button-link {
  @apply flex justify-center content-center text-center;
}

.sidebar-layout .button-link {
  @apply text-left;
}

.button-link__list-single {
  @apply inline-block my-1 md:my-2;
}

.button-link__list {
  @apply flex justify-center content-start md:content-center w-full flex-col md:flex-row gap-1 md:gap-8;
}

.sidebar-layout .button-link__list {
  @apply justify-start flex-wrap;
}


/* Mobile Nav Menu */

.menu-mobile {
  @apply flex justify-between flex-row p-4 flex-wrap w-full;
  background-color:var(--colour-indigo);
  height:80px;
}

.mobile-nav__logo {
  @apply content-center;
  height:48px;
}

.mobile-nav__logo-image {
  height:48px;
}

.nav-mobile__trigger {
  @apply flex content-center;
  height:48px;
}

.nav-mobile__trigger .hamburger {
  padding:12px!important;
}

.nav-mobile__trigger .hamburger-inner, .nav-mobile__trigger .hamburger-inner:after, .nav-mobile__trigger .hamburger-inner:before {
    width: 30px;
    height: 3px;
    border-radius: 6px;
    background-color: #fff;
}


/* Footer Styles */

.l-footer-fixed {
  margin:auto 0 0;
}

footer {
  @apply flex justify-center content-center flex-wrap w-full p-8;
  background-color:var(--blue-dark);    
}

footer p {
    @apply text-center md:text-left;
    color:#fff;
    font-size:0.8em;
    letter-spacing: 0.5px;    
}

footer .container {
    @apply flex-col;
    padding:0; 
}

footer .footer-top {
  @apply flex justify-center md:justify-start;
}

footer .footer-bottom {
  @apply flex columns-1 flex-col-reverse md:columns-2 md:flex-row gap-10;
}

footer .footer__logo {
  @apply block transition-all duration-[400ms] ease-in-out my-4;  
}

footer .footer__logo-image {
  @apply block transition-all duration-[400ms] ease-in-out h-10 md:h-12;
}

footer .footer__logo:hover .footer__logo-image {
  transform:scale(1.1); 
}

footer .footer-col-1 {
  @apply flex flex-wrap py-4 content-center gap-4 flex-1;  
}

footer .footer-col-2 {
  @apply flex flex-wrap content-center flex-1;
}

footer .footer-contact, footer .footer-terms {
  @apply w-full text-center md:text-left;
}



footer .footer-link {
    color: var(--colour-blue-one);
    transition: background-color 0.5s ease-in-out, color 0.5s ease-in-out;
    font-size:0.8em;
    font-weight:400; 
}

footer .footer-link:hover {
    color: var(--colour-blue-two);
}

footer .footer-link-active {
    color: var(--colour-grey-two);
}

footer ul li {
    display: inline;
}

footer ul li:not(:first-child)::before {
    content: "|";
    margin:0 3px;
    color:#fff;
    font-size:0.8em;
}


@media screen and (min-width: 1200px) {

    footer {
        
    }
    
    footer .container {
        max-width: 1000px;    
    }
    
    footer h4 {
        color:#fff;
        font-size:0.7em;
        font-weight:500;
    }

}

@media screen and (max-width: 1199px) {

    footer {
        
    }
    
    footer .container {
        width: 90%;
        max-width: 1000px;
    }

}

@media screen and (max-width: 768px) {

    footer {
        
    }
    
    footer .container {
        width:90%;    
    }

}


/* Header Styling */

/* Top nav wrapper */
.nav-top-desktop {
  @apply sticky top-0 z-[99];
  background-color:var(--colour-indigo);  
}

/* Main bar */
.nav-top-desktop__main {
  @apply w-full flex z-[2] relative justify-center;
  background-color:var(--colour-indigo);
}

.nav-top-desktop__main > .container {
   @apply w-[80vw] max-w-[1200px] content-center;
   height:110px;
}

.nav-top-desktop__inner {
  @apply flex items-center justify-between w-full gap-8;
}

/* Logo */
.page-top__logo {
  @apply flex items-center;
}

.page-top__logo-image {
  @apply h-13 w-auto block;
}

/* Right cluster (species/region + links) */
.nav-top-desktop__right {
  @apply flex items-center gap-12;
}

/* Main nav links */
.nav-top-desktop__links {
  @apply flex items-center gap-8 m-0 p-0 list-none;
}

.nav-top-desktop__single {
  @apply list-none;
}

.nav-top-desktop__link {
  @apply relative inline-flex items-center gap-2 text-base font-medium transition-all duration-150; 
  color:#fff; 
  text-transform: uppercase;    
}

.nav-top-desktop__link:hover {
   color:var(--colour-tangerine);   
}

.nav-top-desktop__link-down {
  @apply text-[10px] leading-none;
}

/* Active state */
.nav-top-desktop__link--active {
  color:var(--colour-blue-one);
}

/* Subnav wrapper strips */
.nav-top-desktop__sub {
  @apply w-full bg-white shadow-lg h-40 flex items-center;
}

.nav-top-desktop__sub-list {
  @apply mx-auto list-none gap-2 grid justify-center;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  width:900px;
}

/* Subnav items */
.nav-top-desktop__sub-item {
  @apply flex flex-wrap justify-center content-start;
}

.nav-top-desktop__sub-item-link {
  @apply flex flex-col items-center gap-1 transition-colors duration-150;
  color:var(--colour-green);
}

.nav-top-desktop__sub-item-link:hover {
   color:var(--colour-tangerine);
}
.nav-top-desktop__sub-item-image {
  @apply w-auto h-14 object-contain transition-transform duration-200 ease-out;
}

/* When hovering the whole item/link, scale the image slightly */
.nav-top-desktop__sub-item-link:hover .nav-top-desktop__sub-item-image,
.nav-top-desktop__sub-item--active .nav-top-desktop__sub-item-image {
  transform: scale(1.15);
}

.nav-top-desktop__sub-item-text {
  @apply flex text-sm font-medium text-center content-center flex-wrap mt-2;
  line-height:1.2em;
  min-height:2.4em;
}

/* Active sub item */
.nav-top-desktop__sub-item--active .nav-top-desktop__sub-item-link {
  color:var(--colour-blue-one);
}

/* Base state: hidden, positioned under main nav, no interaction */
[data-species-menu],
[data-region-menu] {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;              /* sit directly under the main nav bar */
  z-index: 1;            /* under the nav top if needed, above content */
  opacity: 0;
  transform: translateY(-50px);
  pointer-events: none;

  transition:
    opacity 180ms ease-out,
    transform 180ms ease-out;
}

[data-species-menu][data-species-menu-visible],
[data-region-menu][data-region-menu-visible] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}




/* Header Styling Ends */


/* Page Builder Styles */

.page-content {
    width:100%;
}
    
.page-builder {
    background-color: #fff;
    margin: 0px auto;
    padding:0;
    width:100%;
}

.page-content .container {
  width:var(--container-w);
}


@media screen and (min-width: 1200px) {

    .page-builder {
        
    }

}

@media screen and (max-width: 1199px) {

    .page-builder {

    }

}

@media screen and (max-width: 768px) {

    .page-builder {

    }

}




/* Block Content */

.content-block {
   
}

.content-block > .container {
   @apply py-8;  
}


.block-header {
  @apply flex justify-center;    
}

/* Block Content Ends */


/*sidebar layout*/

.sidebar-layout .container{ padding: 0 !important; }
.sidebar-layout section{ padding-top: 0; }
.sidebar-layout section section{ padding-top: 2rem; padding-bottom: 2rem; }
.sidebar-layout section:last-of-type{ padding-bottom: 0; }
.sidebar-layout section + p{ padding-top: 2rem; }





/*topic and ecoregions - page*/

.sidebar-layout{
    margin-bottom: 4rem;
}

.subtopic__lvl1:not(:first-of-type){
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid #00000030;
}

.subtopic__lvl1-header{
    @apply text-4xl leading-4 md:text-5xl md:leading-6;
    margin-bottom: 1.5rem;
    color: var(--blue-darker);
    font-weight: 300;
}

.subtopic__lvl2{
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
.subtopic__lv2-header{
    margin-bottom: 1.5rem;
    color: var(--blue-darker);
}

.subtopic__right{
    max-width: 1100px;
    background-color:#fff;
    padding: 4rem 0;
}

/* Sub topic headings */

/* shared alignment + margins */
.sectionHeader__main,
.header-small.subtopic__lvl2-header {
  @apply text-center md:text-left;
}

/* sectionHeader */
.sectionHeader__main {
  @apply text-4xl;
  color: var(--colour-ocean);
  font-weight: 400;
  margin: 0 0 0.33em;
}

.sectionHeader__main p {
  @apply text-4xl;
  color: var(--colour-ocean);
  font-weight: 400;
  margin: 0 0 0.33em;  
}



/* subtopic */
.subtopic__lvl2 h2.header-small.subtopic__lv2-header, .subtopic__lvl2 h5.header-small.subtopic__lv2-header  {
  @apply text-5xl;
  color: var(--colour-blue-two);
  font-weight: 500;
  margin: 0 0 0.5em;
}

/* Catching inconsistent css class */
.subtopic__lvl2 h2.header-small.subtopic__lvl2-header, .subtopic__lvl2 h5.header-small.subtopic__lvl2-header  {
  @apply text-5xl;
  color: var(--colour-blue-two);
  font-weight: 500;
  margin: 0 0 0.5em;
}



.subtopic__right-nav-bottom {
 @apply flex justify-center gap-8;
}

.subtopic__right-nav-bottom-prev, .subtopic__right-nav-bottom-next {
  @apply inline-block md:w-auto px-6 py-3 rounded-md transition-all;
  background-color: white;
  text-transform: uppercase;
  border:2px solid;
  border-color:var(--colour-blue-two);
  color:var(--colour-blue-two);  
}

.subtopic__right-nav-bottom-prev:hover, .subtopic__right-nav-bottom-next:hover {
  @apply shadow-lg opacity-85;
  background-color:var(--colour-cloud);
}


/* Topic Nav */

.topic-nav {
  @apply flex justify-center content-center py-4 shadow-xl static md:sticky;
  background-color:var(--gray-light);
  top:0;
  z-index:20;   
}

.topic-nav .container {
  @apply justify-center content-center w-full px-4 md:w-[90vw] max-w-[1400px]; 
}

.topic-nav__list-single-image-wrapper{

}
.topic-nav__list{
    @apply gap-2 grid grid-cols-3 md:grid-cols-10 md:justify-center;
}

.topic-nav__list-single-link {
  @apply flex flex-row md:flex-col content-between;
}

.topic-nav__list-single{
    @apply shadow-xs p-2 flex flex-wrap justify-center content-center md:content-start h-10 md:h-32;
    border-radius: 9px;
    background-color: rgba(255,255,255,0.25);
}
.topic-nav__list-single-text{
  @apply w-full transition-all duration-[400ms] ease-in-out text-center m-0 text-xs md:text-sm md:h-12;
    font-weight:500;
    line-height:1em;
    text-transform: uppercase;
    align-content:center;
}
.topic-nav__list-single-image-wrapper{
    @apply hidden md:flex justify-center w-1/3 md:w-full transition-all duration-[400ms] ease-in-out;
}
.topic-nav__list-single--active{
    @apply hidden md:flex;
    color: var(--colour-tangerine);
    background-color: rgba(255,255,255,0.5);
}
.topic-nav__list-single:hover .topic-nav__list-single-text {
    color: var(--colour-blue-one);
}
.topic-nav__list-single:hover .topic-nav__list-single-image-wrapper {
    transform: scale(1.1);
}

/*sidebar layout*/

.sidebar-layout{
  @apply flex justify-center w-full;
}

.sidebar-layout .grid {
  @apply flex flex-col md:grid md:grid-cols-4 gap-10 w-[90vw] max-w-[1440px];
}

.sidebar-layout .container {
  @apply w-full;
}

.sidebar-layout .grid .gridCol_1 {
  @apply md:col-span-1;
}

.sidebar-layout .grid .gridCol_2 {
  @apply md:col-span-3;
}

.sidebar-layout__sidebar{
    @apply -mt-8 md:mt-8 bg-gradient-to-tr from-[var(--colour-ocean)] to-[var(--colour-green)] shadow-xl;
    position: sticky;
    top: 12rem;
    color: white;
    background-color: #284c60;
    padding: 1.5rem;
    border-radius:6px;
    overflow:scroll;
}

.sidebar-layout__sidebar .side-menu__sub-item .side-menu__sub-link, 
.sidebar-layout__sidebar .side-menu__sub-item .side-menu__sub-link p,
.sidebar-layout__sidebar .side-menu__sub-item .side-menu__sub-link a { 
  @apply text-sm;
  color:var(--colour-cloud);
  margin:0 0 3px;
}

.sidebar-layout__sidebar .side-menu__item-link:hover, .sidebar-layout__sidebar .side-menu__sub-item .side-menu__sub-link:hover, .sidebar-layout__sidebar .side-menu__sub-item .side-menu__sub-link:hover p {
    @apply transition-all duration-[400ms] ease-in-out;
    color:var(--colour-tangerine);
}


*{
    scroll-margin-block-start: 13rem;
}
html {
    scroll-behavior: smooth;
}
.sidebar-layout__sidebar ul ol{
    padding-left: 0.5rem;
}

.sidebar-layout__sidebar ul ol a{
   font-weight:400;
}


/* EMBED BLOCKS */

.embed-block{
  margin-bottom:2em;
}

.embed-block__wrapper {
  @apply p-4 min-h-[24rem] md:min-h-[30rem];
  border:1px solid;
  border-radius:12px;
  border-color:var(--colour-cloud);
}

.embed-block__wrapper iframe{
  @apply block p-2 md:p-8 min-h-[24rem] md:min-h-[30rem];
  width: 100%;
  background-color: white;    
}

.embed-block__wrapper div {
  @apply flex justify-center items-center;
  width: 100%;  
}


.embed__vid .embed-block__wrapper {
  @apply aspect-16/9 w-full;
}

.embed__vid .embed-block__wrapper iframe {
  @apply aspect-16/9 w-full;  
}


.embed__sm .embed-block__wrapper {
  @apply min-h-[15rem] md:min-h-[20rem];  
}

.embed__sm .embed-block__wrapper iframe {
  @apply min-h-[15rem] md:min-h-[18rem];  
}

.embed__lg .embed-block__wrapper {
  @apply min-h-[35rem] md:min-h-[50rem];  
}

.embed__lg .embed-block__wrapper iframe {
  @apply min-h-[35rem] md:min-h-[46rem];  
}

.sidebar-layout .embed__sm .embed-block__wrapper {
  @apply min-h-[15rem] md:min-h-[20rem];  
}

.sidebar-layout .embed__md .embed-block__wrapper {
  @apply min-h-[22rem] md:min-h-[30rem];  
}

.sidebar-layout .embed__lg .embed-block__wrapper {
  @apply min-h-[30rem] md:min-h-[40rem];  
}



/* TEXT REVEAL */

/* base (hidden) */
.reveal-wipe :is(h2) {
  position: relative;
  display: inline-block;
  padding-bottom:10px;

  /* capture original colour before we hide the text */
  --reveal-color: currentColor;

  /* hide glyph paint so background can show through */
  color: transparent;
  -webkit-text-fill-color: transparent; /* Safari */
  background-image: linear-gradient(var(--reveal-color), var(--reveal-color));
  background-clip: text;
  -webkit-background-clip: text;

  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size 2s cubic-bezier(.22,.61,.36,1);
}

/* visible state triggered by JS on the parent */
.reveal-wipe.is-visible :is(h2) {
  background-size: 100% 100%;
}
.reveal-wipe.is-visible :is(h2)::after {
  width: 100%;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  .reveal-wipe :is(h2),
  .reveal-wipe :is(h2)::after {
    transition: none !important;
    background-size: 100% 100% !important;
    width: 100% !important;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
  }
}

/* parent */
.reveal-words :is(h2){ display:inline-block }

/* words */
.reveal-words .rw-word{
  display:inline-block; opacity:0; transform:translateY(.6em);
  transition:opacity .6s ease, transform .6s ease;
}

/* visible */
.reveal-words.is-visible .rw-word{ opacity:1; transform:none }

/* tiny spacing fix between inline-block words */
.reveal-words .rw-word + .rw-word{ margin-left:.25ch }


.reveal-letters :is(h2){ position:relative; display:inline-block }

/* letters base */
.reveal-letters .rl { 
  color:transparent; -webkit-text-fill-color:transparent;
  --c: currentColor;
  background-image: linear-gradient(var(--c),var(--c));
  background-clip:text; -webkit-background-clip:text;
  background-repeat:no-repeat; background-size:0% 100%;
  transition: background-size .6s cubic-bezier(.2,.8,.2,1);
}

/* visible */
.reveal-letters.is-visible .rl{ background-size:100% 100% }

.reveal-letters.is-visible :is(h2)::after{ transform:scaleX(1) }

.reveal-clip :is(h2){ position:relative; display:inline-block }
.reveal-clip .rc{
  display:inline-block; clip-path:inset(0 100% 0 0); /* hidden from right */
  transition:clip-path .7s cubic-bezier(.2,.8,.2,1);
}
.reveal-clip.is-visible .rc{ clip-path:inset(0 0 0 0) }

/* variants by data-direction */
.reveal-clip[data-direction="up"] .rc{ clip-path:inset(100% 0 0 0) }
.reveal-clip[data-direction="down"] .rc{ clip-path:inset(0 0 100% 0) }
.reveal-clip[data-direction="left"] .rc{ clip-path:inset(0 0 0 100%) }

.reveal-soft :is(h2){
  opacity:0; filter:blur(6px); transform:translateY(20px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1),
              transform .7s cubic-bezier(.2,.8,.2,1),
              filter .7s cubic-bezier(.2,.8,.2,1);
}
.reveal-soft.is-visible :is(h2){
  opacity:1; filter:blur(0); transform:none;
}