/* Button container */
.button-div {
    display: flex;
    flex-direction: column; /* stack skyline above button */
    align-items: center;    /* center skyline and button */
    width: 100%;           /* fixed width (change if needed) */
    
}

/* Skyline always visible above button */
.skyline {
    display: block;
    width: 100%;
    height: auto;           /* keeps aspect ratio consistent */
    margin-bottom: -0.3rem; /* slight overlap with button */
}

/* Login button */
.login-button {
    display: block;
    width: 100%;
    max-width: 100%;     /* prevents overflow */
    box-sizing: border-box;
    text-align: center;
    border-radius: 5px;
    padding: 0.9rem 1.5rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: #2c4f77;
    background-color: #ffffff;
    border: 2px solid black;
    cursor: pointer;
    text-decoration: none;
    line-height: 1.2;
}


/* 1) Stop 100vw-style overflow on the fullwidth layout */
.block-totara-featured-links-layout.fullwidth {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 2) Let tiles actually shrink inside the flex row */
.block-totara-featured-links-tile,
.block-totara-featured-links-flex-filler {
  min-width: 0;          /* critical for flex items to shrink */
  max-width: 100%;
  box-sizing: border-box;
}

/* 3) Ensure the tile itself never exceeds its parent */
.block-totara-featured-links-tile {
  width: 100%;
  overflow: hidden;       /* prevents background from causing overflow */
}

/* 4) Mobile: stack tiles to avoid width + margins pushing past viewport */
@media (max-width: 768px) {
  .block-totara-featured-links-layout {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .block-totara-featured-links-tile,
  .block-totara-featured-links-flex-filler {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .block-totara-featured-links-content-container {
    padding: 1rem;        /* safe inner spacing */
  }
}


.block-totara-featured-links-content {
  word-wrap: break-word;    /* old support */
  overflow-wrap: break-word; /* modern support */
  white-space: normal;       /* allow wrapping */
  max-width: 100%;           /* don’t overflow parent */
  box-sizing: border-box;    /* include padding in size */
}

@media (max-width: 1440px) {
  .block-totara-featured-links-content h3 {
    font-size: 0.8rem;   /* shrink heading */
    line-height: 1.2;
  }
  .block-totara-featured-links-content p {
    display: none;
  }
}



/* Guest Banner Welcome Message */
.guest .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-middle p {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    padding-left: 10px;
    }

/* Featured Links Padding */
.guest .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content, .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom, .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top {
    text-align:center;
}

.guest .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-middle h3 {
  font-size: 35px;
}

.guest .block-totara-featured-links-layout .block-totara-featured-links-content * {
    position: relative;
    color: #003f87!important;
}

.guest .block-totara-featured-links-layout .block-totara-featured-links-content * {
    position: relative;
    color: #003f87 !important;
}

.guest .block .content {
    word-wrap: break-word;
    padding: var(--gap-0);
    margin: 0;
}



/* Banner Welcome Message */
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-middle p {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    padding-left: 0px;
    }

.block-totara-featured-links-layout .block-totara-featured-links-content * {
    position: relative;
    color: #ffffff!important;
}

.head1 .block-totara-featured-links-layout .block-totara-featured-links-content * {
    position: relative;
    color: #003f87 !important;
}

.block .content {
    word-wrap: break-word;
    padding: var(--gap-0);
    margin: 0;
}

/* ************************************************** */
/* FEATURED LINKS BLOCK */
/* 
************************************************** */

/* Feat1 featured tile color */
.feat1 .block-totara-featured-links-layout .block-totara-featured-links-content * {
    position: relative;
    color: #000000!important;
}

/* Featured Links Padding */
.feat1 .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content, .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom, .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top {
    padding-bottom: 15px;
}


.feat1 .block-totara-featured-links-layout 
.block-totara-featured-links-tile.block-totara-featured-links-tile-medium::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px; /* Thickness of the bottom border */
  width: 100%;
  background: linear-gradient(to right, #1a3668 50%, #e32627 50%);
  border-radius: 3px; /* Rounds the ends */
}


/* Font size and weight of link title */
/* Defaults to size 1.8rem and weight bold */
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h3,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .box.message .messagearea .messagesend .mform .fitemtitle,
.box.message .messagearea .messagesend .mform .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .fitemtitle,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .box.message .messagearea .messagesend .mform .form-label,
.box.message .messagearea .messagesend .mform .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .form-label,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h3 {
    color: #fff;
padding-left: 10px;
padding-bottom: 10px;

}

/* Text color of link title */
/* Defaults to white */
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h1,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h2,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h3,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .box.message .messagearea .messagesend .mform .fitemtitle,
.box.message .messagearea .messagesend .mform .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .fitemtitle,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h4,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h5,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content h6,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h1,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h2,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h3,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h4,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h5,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom h6,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h1,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h2,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h3,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h4,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h5,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top h6 {
    color: #ffffff;
}

/* Text color of link description */
/* Defaults to white */
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .box.message .messagearea .messagesend .mform .form-label,
.box.message .messagearea .messagesend .mform .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content .form-label,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content p,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom p,
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top p {
    color: #ffffff;
padding-left: 10px;
padding-bottom: 0px;
}

/* Color of link title and description background */
/* Defaults to semi transparent black */
.block-totara-featured-links-layout .block-totara-featured-links-content::before {
    /* Transparent */
    background: rgba(0, 0, 0, 0);

    /* Solid color */
    /*background: #000000;*/
}
/* Featured Links Block background color */
.block-totara-featured-links-layout>div .block-totara-featured-links-content h3, .block-totara-featured-links-layout>div .block-totara-featured-links-content .box.message .messagearea .messagesend .mform .fitemtitle, .box.message .messagearea .messagesend .mform .block-totara-featured-links-layout>div .block-totara-featured-links-content .fitemtitle, .block-totara-featured-links-layout>div .block-totara-featured-links-content .box.message .messagearea .messagesend .mform .form-label, .box.message .messagearea .messagesend .mform .block-totara-featured-links-layout>div .block-totara-featured-links-content .form-label, .block-totara-featured-links-layout>div .block-totara-featured-links-content p {
    color: #4c4c4c;
}


/*Rounded header image */
.block-totara-featured-links-tile {
    border-radius: 8px;
}

/*Rounded Featured Links Tiles */
.block-totara-featured-links-tile.background-cover{
border-radius: 8px;
}

.block.chromeless {
    border-radius: 8px;
}

.block-totara-featured-links-layout>div .block-totara-featured-links-content-container {
    border-radius: 8px;
    }

/* Featured Links Padding */
.block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content, .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-bottom, .block-totara-featured-links-layout .block-totara-featured-links-content.block-totara-featured-links-content-top {
    padding-bottom: 5px;
}

/* Desktop / laptop: exactly 4 tiles per row (each tile has 10px margin all around) */
@media (min-width: 1024px) {
  .cc .block-totara-featured-links-layout {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;   /* cancel left outer margin from tiles */
    margin-right: -10px;  /* cancel right outer margin from tiles */
  }

   .cc .block-totara-featured-links-layout
    .block-totara-featured-links-tile {
    flex: 0 0 calc((100% - 80px) / 4); /* 80px = 4 tiles × (10px left + 10px right) */
    max-width: calc((100% - 80px) / 4);
    margin: 10px;              /* keep the existing 10px margin around each tile */
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }
}

/* Tablet: 2 tiles per row (adjusts margins) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .cc .block-totara-featured-links-layout { margin-left: -10px; margin-right: -10px; }
  .cc .block-totara-featured-links-layout
    .block-totara-featured-links-tile,
  .cc .block-totara-featured-links-layout
    .block-totara-featured-links-flex-filler {
    flex: 0 0 calc((100% - 40px) / 2); /* 40px = 2 tiles × 20px margins */
    max-width: calc((100% - 40px) / 2);
    margin: 10px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }
}

/* Mobile: 1 tile per row */
@media (max-width: 767.98px) {
  .block-totara-featured-links-layout { margin-left: -10px; margin-right: -10px; }
  .cc .block-totara-featured-links-layout
    .block-totara-featured-links-tile,
  .cc .block-totara-featured-links-layout
    .block-totara-featured-links-flex-filler {
    flex: 0 0 calc(100% - 20px); /* 20px = single tile left+right margins */
    max-width: calc(100% - 20px);
    margin: 10px;
    box-sizing: border-box;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  }
}


/* Desktop / laptop: exactly 4 tiles per row (each tile has 10px margin all around) */
@media (min-width: 1024px) {
  .feat1 .block-totara-featured-links-layout {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;   /* cancel left outer margin from tiles */
    margin-right: -10px;  /* cancel right outer margin from tiles */
  }

   .feat1 .block-totara-featured-links-layout
    .block-totara-featured-links-tile {
    flex: 0 0 calc((100% - 80px) / 4); /* 80px = 4 tiles × (10px left + 10px right) */
    max-width: calc((100% - 80px) / 4);
    margin: 10px;              /* keep the existing 10px margin around each tile */
    box-sizing: border-box;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
}

/* Tablet: 2 tiles per row (adjusts margins) */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .feat1 .block-totara-featured-links-layout { margin-left: -10px; margin-right: -10px; }
  .feat1 .block-totara-featured-links-layout
    .block-totara-featured-links-tile,
  .feat1 .block-totara-featured-links-layout
    .block-totara-featured-links-flex-filler {
    flex: 0 0 calc((100% - 40px) / 2); /* 40px = 2 tiles × 20px margins */
    max-width: calc((100% - 40px) / 2);
    margin: 10px;
    box-sizing: border-box;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
}

/* Mobile: 1 tile per row */
@media (max-width: 767.98px) {
  .block-totara-featured-links-layout { margin-left: -10px; margin-right: -10px; }
  .feat1 .block-totara-featured-links-layout
    .block-totara-featured-links-tile,
  .feat1 .block-totara-featured-links-layout
    .block-totara-featured-links-flex-filler {
    flex: 0 0 calc(100% - 20px); /* 20px = single tile left+right margins */
    max-width: calc(100% - 20px);
    margin: 10px;
    box-sizing: border-box;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  }
}

/* BMF Guest Block stlying */
.bmf-hero {
    text-align: center;
    padding: 40px 20px;
    background: #f5f5f5;
    border-radius: 12px;
    margin-bottom: 30px;
  }
  .bmf-hero h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #003366;
  }
  .bmf-hero p.tagline {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #555;
  }
  .bmf-btn {
    display: inline-block;
    background: #003366;
    color: #fff;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
  }
  .bmf-btn:hover {
    background: #0055a5;
  }
  .bmf-grid {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0;
    flex-wrap: wrap;
  }
  .bmf-card {
    flex: 1 1 250px;
    max-width: 300px;
    background: white;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
    text-align: center;
  }
  .bmf-card h3 {
    margin: 10px 0;
    color: #003366;
  }
  .bmf-card p {
    font-size: 0.95rem;
    color: #555;
  }
  .bmf-icons {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #0055a5;
  }

/* New hover classes for Building Blocks page */
.bmf2-card {
  flex: 1 1 250px;
  max-width: 300px;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.bmf2-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.12);
}
.bmf2-icons {
  font-size: 2rem;
  margin-bottom: 10px;
  color: #0055a5;
  transition: transform 0.25s ease, color 0.25s ease;
}
.bmf2-card:hover .bmf2-icons {
  transform: scale(1.15);
  color: #003366;
}
.bmf2-btn {
  display: inline-block;
  background: #003366;
  color: #fff;
  padding: 12px 24px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.25s ease, transform 0.25s ease;
}
.bmf2-btn:hover {
  background: #0055a5;
  transform: translateY(-2px);
}
.bmf2-video iframe {
  transition: box-shadow 0.25s ease;
  border-radius: 8px;
}
.bmf2-video iframe:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}