/*
    Created on : 16 Oct 2023, 14:43:13
    Author     : anthonylynn
*/


body.fledge-town{

    color:#000000;
    font-family: 'Questrial', sans-serif;
    font-size:20px;
    background-color:#ffffda;
}
h1,h2,h3,h4,h5,h6{
    font-family: 'PT Serif', serif;
    color:#1b8083;
    text-align:center;
}
h1{
    font-size:3em;
}
h2{
    font-size:2.4em;
}
h3{
    font-size:1.5em;
}
h1.site-title {
    margin-bottom: 0em;
}
.fledge-town a.nav-link, .fledge-town a.dropdown-item {
    font-size: 1.1em;
    color:#494949;
}
.fledge-town a.disabled{
    color:#bcbcbc;
}
a.nav-link:hover, a.dropdown-item:hover {
    color:#1b8083;
}

@media (min-width: 768px) {
h1,h2,h3,h4,h5,h6{

    text-align:left;
}
    .text-center h1{
        text-align:center;
    }
}

@media (min-width: 992px) {
    .ft-navbar.navbar.navbar-expand-lg .navbar-nav .nav-link {
        padding-right: 1em;
        padding-left: 1em;
    }
}
.lead{
    font-size:2em;
    margin:1em 0;
}
.banner-img{
    width:100%;
    height:auto;
    margin:2em 0;
}
footer {
    padding: 1em 0;
    float: left;
    width: 100%;
}
.logo img{
    display:block;
    width:200px;
    margin:0 auto;
    text-align:center;
}
a.logo{
    width:100%;
    display:block;
}
.strap{
    margin-top:1em!important;
}
.sub-strap{
    font-size:1.5em;
    color:#1b8083;
}
  .hotspot-wrap{
    position:relative;
    max-width:1100px;             /* optional */
    margin-inline:auto;
  }
  .hotspot-wrap img{ width:100%; height:auto; display:block; }

  /* Circle hotspots (180px on a 1434px image) */
  .spot{
    --x:50; --y:50;
    position:absolute;
    left:calc(var(--x) * 1%);
    top: calc(var(--y) * 1%);
    width:12.552%;                /* 180 / 1434 */
    aspect-ratio:1/1;
    transform:translate(-50%,-50%);
    border-radius:50%;
    text-indent:-9999px;
  }

  /* Visual ring while testing (remove in production)
  .spot::after{
    content:""; position:absolute; inset:0;
    border:3px solid rgba(18,101,129,.7);
    box-shadow:0 0 0 3px rgba(255,255,255,.95);
    border-radius:inherit; pointer-events:none; 
  } */

  /* CTA rounded rectangle (610×150 on 1434 image) */
  .spot-cta{
    width:42.538%;                /* 610 / 1434 */
    height:10.460%;               /* 150 / 1434 */
    /* 70px corner radius expressed as % of 610×150 */
    border-radius:11.475% / 46.667%;
  }

  @media (max-width:420px){
    .spot{ width:14%; }           /* larger touch targets */
    .spot-cta{ width:46%; height:11.5%; }
  }

.fa {
    font-size:1.1em;
    color: black;
}
.carousel {
    position: relative;
    padding: 0 2em 0 2em;
    text-align:center;
}
.carousel-control-prev, .carousel-control-next {

    width: 0;

} 
.carousel h2{
    text-align:center;
}
.carousel-control-prev, 
.carousel-control-next {
    top: 50%;                      /* place at middle */
    transform: translateY(-50%);   /* shift up half of own height */
    width: auto;                   /* allow space for the icon */
    height: auto;                  /* don’t stretch full height */
    display: flex;
    align-items: center;
    justify-content: center;
}

.carousel-control-prev i,
.carousel-control-next i {
    font-size: 1.5em;   /* adjust size if needed */
    color: #555;        /* your desired arrow color */
}
.carousel-inner {

    padding: 1em;
}
.carousel cite {
    display: block;
    margin-top: 1em;
    font-weight: bold !important;
}
.bird-img img {
    width: 100%;
}

.bs-calltoaction{
    position: relative;
    padding: 15px 25px;
    border: 1px solid black;
    margin-top: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

    .bs-calltoaction > .row{
        display:table;
        width: calc(100% + 30px);
    }
     
        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:table-cell;
            vertical-align:middle;
        }



                .cta-title{
                    margin: 0 auto 15px;
                    padding: 0;
                        color: #1b8083;
                }

                .cta-desc{
                    padding: 0;
                }

                .cta-desc p:last-child{
                    margin-bottom: 0;
                }

            .cta-button{
                padding-top: 10px;
                padding-bottom: 10px;
            }

@media (max-width: 991px){
    .bs-calltoaction > .row{
        display:block;
        width: auto;
    }

        .bs-calltoaction > .row > [class^="col-"],
        .bs-calltoaction > .row > [class*=" col-"]{
            float:none;
            display:block;
            vertical-align:middle;
            position: relative;
        }

        .cta-contents{
            text-align: center;
        }
}




.bs-calltoaction.bs-calltoaction-default {
    color: #1b8083;
    background-color: rgb(255,255,255,0.3);
    border-radius: 16px;
    border-width:0;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    width: 100%;
    transition: box-shadow 0.2s ease;
}

.bs-calltoaction.bs-calltoaction-primary{
    color: #fff;
    background-color: #337ab7;
    border-color: #2e6da4;
}

.bs-calltoaction.bs-calltoaction-info{
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da;
}

.bs-calltoaction.bs-calltoaction-success{
    color: #fff;
    background-color: #5cb85c;
    border-color: #4cae4c;
}

.bs-calltoaction.bs-calltoaction-warning{
    color: #fff;
    background-color: #f0ad4e;
    border-color: #eea236;
}

.bs-calltoaction.bs-calltoaction-danger{
    color: #fff;
    background-color: #d9534f;
    border-color: #d43f3a;
}

.bs-calltoaction.bs-calltoaction-primary .cta-button .btn,
.bs-calltoaction.bs-calltoaction-info .cta-button .btn,
.bs-calltoaction.bs-calltoaction-success .cta-button .btn,
.bs-calltoaction.bs-calltoaction-warning .cta-button .btn,
.bs-calltoaction.bs-calltoaction-danger .cta-button .btn{
    border-color:#fff;
}

.cta-button a.btn {
    background-color: #ffffff;
    width:auto;

}


@media(max-width:767px){

    .cta-button a.btn {
    background-color: #ffffff;
    width:100%;

}

.carousel-control-prev, .carousel-control-next{
margin: 0 1em 0 1em;
}

.chapters.accordion {

    text-align: left;
}
}

.col-md-4{
    padding:0  0.5rem;
}
.card-title {
    font-family: 'PT Serif', serif;
    font-size: 1.4em;
    margin-bottom: 1em;
    font-weight: bold;
}
.card-text{
    text-align: center;
    padding: 1rem 2rem;
    font-size: 1em;
    color: rgb(82, 81, 81);
    line-height: 1.4rem;
}
.footer{
    border-top: none;
    text-align: center;
    line-height: 1.2rem;
    padding: 2rem 0 1.4rem 0;
}
#name{
    font-size: 1rem;
    font-weight: bold;
}
#position{
    font-size: 0.7rem;
}
.fledge-town a{
    color: #f3833e;
    font-weight: normal;
}
a:hover{
    color: #1b8083;
}

.align-center{
    text-align:center;
}
.cta-title{
    font-size:2em;

}
.cta-box {
  background-color: #f8f8eb;
  border-radius: 1rem;
  padding: 2rem;
  max-width: 900px;
  margin: 3rem auto;
  display: flex;
  justify-content: space-between;
  align-items: center; /* centers button vertically */
  gap: 2rem;
  flex-wrap: wrap; /* allows stacking on small screens */
}

.cta-content {
  flex: 1;
  min-width: 250px;
}

.cta-box h2 {
  color: #127b77;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: left;
}

.cta-box p {
  color: #000;
  font-size: 1.2rem;
  margin: 0.5rem 0;
}

.cta-button {
  background-color: #127b77;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.2rem;
  padding: 1rem 2rem;
  border-radius: 0.75rem;
  transition: background-color 0.3s ease;
}

.cta-button:hover {
  background-color: #0d5e5b;
}

/* ✅ Mobile adjustments */
@media (max-width: 700px) {
  .cta-box {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .cta-box h2,
  .cta-box p {
    text-align: center;
  }

  .cta-button {
    width: 100%; /* full width button */
    margin-top: 1.5rem;
    text-align: center;
  }
}

.events-container{
    margin:2em 0;
}


/*    IMAGES   */

.main-content img.float-right, .main-content img.float-left {
    display:block;
    clear:both;
    float:none;
    width: 250px;
    margin: 0 auto;
}

    
@media(min-width:600px){
.main-content img.float-right, .main-content img.float-left{
    width:40%;
    margin:1em;
}    
.main-content img.float-right{
    float:right;
}
.main-content img.float-left{
    float:left;
}
}
@media(min-width:992px){
.main-content img.float-right, .main-content img.float-left{
    width:15%;
    margin:1em;
}    
    
}
section.uncrc {
    margin: 2em 0;
}
/*   RESPONSIVE TABLES  */
  :root{
    --border:#d6d6d6;
    --text:#1f2937;         /* slate-800 */
    --muted:#6b7280;        /* gray-500 */
    --bg:#ffffda;
    --row:#f9fafb;          /* gray-50 */
  }
  html,body{margin:0;background:var(--bg);color:var(--text);font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";}
.wrap {
    max-width: 100%;
    margin: 2em 0;

}

  .card{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:14px;
    box-shadow:0 1px 1px rgba(0,0,0,.03);
    overflow:hidden;
    margin-bottom:1em;
  }


  /* Base table (desktop / tablets) */
  table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
  }
  caption{
    text-align:left;
    font-weight:700;
    font-size:clamp(18px,2.4vw,28px);
    padding:18px 18px 6px;
  }
thead th {
  background: var(--row);
  font-weight: 800;
  font-size: clamp(14px,1.5vw,18px);
}
th, td {
    border: 1px solid var(--border);
    padding: 18px;
    vertical-align: top;
}
  thead th:first-child,
  tbody td:first-child{border-right:1px solid var(--border);}
  thead th:last-child{text-align:left;}
  .code{
    font-weight:800;
    font-style:italic;
    white-space:nowrap;
  }

  /* Small screens: make rows into cards while keeping content readable */
  @media (max-width: 640px){
    table, thead, tbody, th, td, tr { display:block; }
    caption{ padding:16px; }
    thead{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } /* keep for a11y */

    tr{
      border-top:1px solid var(--border);
      border-bottom:1px solid var(--border);
    }

    /* Each cell shows its header via data-label */
    td{
      border:none;
      border-top:1px solid var(--border);
      padding:14px 16px;
    }
    td:first-child{ border-top:none; background:var(--row); }
    td::before{
      content:attr(data-label);
      display:block;
      font-weight:800;
      color:var(--muted);
      margin-bottom:6px;
      letter-spacing:.2px;
      text-transform:none;
    }
    /* Improve readability of long outcome text */
    .outcome{ font-size:1.05rem; }
    .code{ font-size:1.05rem; }
  }
  
  /* Reference list container */
.references {
  margin: 2rem 0;
  padding: 0;
  font-size: 0.6rem;
  line-height: 1;
  list-style-position:inside;
}

/* Each reference item */
.references li {
  margin-bottom: 0.3rem;
  text-indent: -1.5rem;      /* hanging indent */
  padding-left: 1.5rem;
}

/* Optional: make DOIs/links look neat */
.references a {
  color: #0645ad;
  text-decoration: none;
}

.references a:hover {
  text-decoration: underline;
}

/*  Text and Images flow   */

    :root{
      --ink:#222;
      --muted:#5f6368;
      --border:#e6e6e6;
      --soft:#f9fafb;
      --accent:#0d6efd;
    }

    /* Base */
    html,body{margin:0;}
    body{font-family:"PT Serif",serif; line-height:1.65; font-size:1.05rem;}
    h1,h2,h3,h4{font-family:"Questrial",system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.25;}
    h1{font-size:clamp(28px,4.5vw,40px); margin:1.25rem 0;}
    h2{font-size:clamp(22px,3.4vw,28px); margin:1.25rem 0 .5rem;}
    h3{font-size:clamp(18px,2.6vw,22px); margin:1rem 0 .25rem;}


    /* Page container */
    .main-content{ margin-inline:auto; padding:clamp(16px,4vw,28px);}

    /* Article typography */
    .prose p{margin:0 0 1rem;}
    .prose ul{margin:.5rem 0 1rem 1.5rem; padding:0; list-style:disc;}
    .prose li{margin:.35rem 0;}
    .prose blockquote{
      margin:1rem 0; padding:1rem 1.25rem; background:var(--soft);
      border-left:4px solid #f3833e; border-radius:8px;
    }
    .prose cite{display:block; color:var(--muted); font-style:normal; margin-top:.5rem;}

    /* Wrapping images */
    .prose img.float-left,
    .prose figure.float-left{ float:left; width:clamp(120px,22vw,220px);
      margin:.25rem 1rem .75rem 0; border-radius:12px; }
    .prose img.float-right,
    .prose figure.float-right{ float:right; width:clamp(120px,22vw,220px);
      margin:.25rem 0 .75rem 1rem; border-radius:12px; }
    /* Better wrap where images are rounded */
    .prose .with-shape{ shape-outside: inset(0 round 12px); }

    /* Story blocks to clear floats between sections */
    .story-block{ margin:0 0 1.25rem 0; }
    .story-block::after{ content:""; display:block; clear:both; }

    /* Footnotes / references (from earlier) */
    .references{ margin:1.5rem 0 0; padding:0; font-size:.98rem; }
    .references li{ margin:.6rem 0; text-indent:-1.5rem; padding-left:1.5rem; }
    .references a{ color:var(--accent); text-decoration:none; }
    .references a:hover{ text-decoration:underline; }

/* Small screens: stack and center images */
@media (max-width: 600px){
  .prose img.float-left,
  .prose img.float-right,
  .prose figure.float-left,
  .prose figure.float-right{
    float: none;
    display: block;
    margin: 0 auto 1rem;     /* center horizontally */
    width: min(70%, 320px);
    max-width: 100%;
  }

  /* Optional: center captions if you use <figure> */
  .prose figure figcaption{
    text-align: center;
    margin-top: .35rem;
  }
}
/* -- Contact Form -- */
  .message { 
    margin-top: 1rem; padding: .9rem 1rem; border-radius: 8px; 
    font-weight: 600; text-align: center;
  }
  .message.success { background: #e6f8ec; border: 1px solid #38a169; color: #22543d; }
  .message.error   { background: #fde8e8; border: 1px solid #e53e3e; color: #742a2a; }

.contact-form {
    background: rgb(255, 255, 255, 0.3);
  padding: 2rem 2.5rem;
  border-radius: 16px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.08);
  width: 100%;
  transition: box-shadow 0.2s ease;
}
.contact-form:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,0.1);
}

.contact-form h2 {
  text-align: center;
  color: #1e293b;
  margin-bottom: 1.8rem;
  font-size: 1.75rem;
}

/* === Form groups === */
.form-group {
  margin-bottom: 1.2rem;
}

label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: #374151;
}

/* === Inputs & Textarea === */
input,
textarea {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1.5px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
  background-color: #f9fafb;
}

input:focus,
textarea:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
  outline: none;
  background-color: #fff;
}

textarea {
  resize: vertical;
  min-height: 120px;
}

/* === Button === */
button.btn, button.btn-lg, button.btn-block, button.btn-default {
  width: 100%;
  padding: 0.9rem;
  border: none;
  border-radius: 8px;
  background: #1b8081;
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.25s ease, transform 0.1s ease;
}

button.btn:hover, button.btn-lg:hover, button.btn-block:hover, button.btn-default:hover {
  background: #f4b588;
    color:#ffffff;
}

button:active {
  transform: scale(0.98);
}

/* === Message (success/error banner) === */
.message {
  margin-top: 1.2rem;
  padding: 0.9rem 1rem;
  border-radius: 8px;
  font-weight: 600;
  text-align: center;
  display: none;
}

.message.success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #34d399;
}

.message.error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #f87171;
}

/* === Responsive tweaks === */
@media (max-width: 480px) {
  .contact-form {
    padding: 1.5rem;
  }
  .contact-form h2 {
    font-size: 1.5rem;
  }
}

/* Register Interest Form */

.cta-box {
  background: #f8f8e8;
  padding: 2rem;
  border-radius: 12px;
  max-width: 900px;
  margin: 2rem auto;
}

.cta-box h2 {
  color: #1a7a75;
  margin-bottom: 0.5rem;
}

.cta-box p {
  margin: 0.25rem 0;
}

/* ========== Base: mobile first ========== */
.interest-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1rem;
}

.interest-form input,
.interest-form button, .fledge-town .ft-next, .fledge-town .ft-prev {
  width: 100%;
  padding: 0.7rem 0.8rem;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-sizing: border-box;
  font-family: inherit;
}
.fledge-town .ft-next, .fledge-town .ft-prev{
    color:#ffffff;
    text-decoration:none;
    width:150px;
    text-align:center;
}
.ft-next{
    float:right;
}
.ft-prev{
    float:left;
}
.interest-form button, .fledge-town .ft-next, .fledge-town .ft-prev, .cta-box a {
    padding: 0.9rem;
    border: none;
    border-radius: 8px;
    background: #1b8081;
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.25s 
    ease, transform 0.1s 
    ease;    
}

.interest-form button:hover {
background: #f4b588;
    color: #ffffff;
}
#submitBtn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Consent text */
.gdpr-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.4;
  color: #174d4d;
}

.gdpr-consent input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  margin-top: 0.2rem;
}

.gdpr-consent a {
  color: #174d4d;
  text-decoration: underline;
}

/* ========== Desktop layout (>=768px) ========== */
@media (min-width: 768px) {
  .interest-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 1rem;
    align-items: center;
  }

  /* Row 1: Name | Email */
  .interest-form input[type="text"] {
    grid-column: 1;
    grid-row: 1;
  }

  .interest-form input[type="email"] {
    grid-column: 2;
    grid-row: 1;
  }

  /* Row 2: Consent | Submit */
  .consent-row {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 1rem;
  }

  .interest-form button {
    justify-self: end;
    width: auto;
    padding: 0.7rem 1.6rem;
  }
}

/* Form feedback messages */
#formMessage {
  margin-top: 1rem;
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  display: inline-block;
}

#formMessage.success {
  background: #e6f9ed;
  color: #176c38;
  border: 1px solid #97d5a0;
}

#formMessage.error {
  background: #fde8e8;
  color: #b30000;
  border: 1px solid #e0aaaa;
}

#formMessage.info {
  background: #fffbe6;
  color: #7c6f00;
  border: 1px solid #e4d97b;
}

.list-container {
  text-align: center;       /* Centers the whole container on the page */
}

.list-container ul {
  display: inline-block;    /* Makes the list itself a centered block */
  text-align: left;         /* Keeps bullets and text left-aligned */
  list-style-position: outside;
  padding-left: 1.5em;      /* Gives bullets a bit of room */
  margin: 1em 0;
}

img.profile {
    width: 100%;
    margin-top:1em;
}