/*
  * Text and font styles for the Practice Education Team's html pages.
  */

  html {
    scroll-behavior: smooth;
  }
  

  /* body font*/
  body{font-family: 'Roboto', 'Arial' sans-serif; border:0; padding:0; color:#18988B;}

  /* Header Styles */
  h1,h2{font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; color:#020d1a; line-height:1; margin:15px 0}
  h3,h4,h5,h6{font-family: 'Roboto', 'Arial', sans-serif; font-weight:400; color:#020d1a; line-height:1; margin:35px 0 0 0}
  h1 {font-size: 32px; clear:both; display:inline-block; width:100%;}
  h2, h2 .Head {font-size:28px;}
  h3, h3 .Head {font-size:18px;}
  h4, h4 .Head {font-size:16px;}
  h5, h5 .Head {font-size:14px;}
  h6, h6 .Head {font-size:13px;}
  p {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; color:#000000;}
  p.indent2 {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; color:#000000; margin:5px 0 10px 25px}
  p.indent3 {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; color:#000000; margin:5px 0 10px 50px}
  p.indent4 {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; color:#000000; margin:5px 0 10px 75px}
  i {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; color:#000000;}

  /* Hyperlinks */
  a:visited {color:#0E4E96; text-decoration: none;}
  a:hover {font-weight:700; color:#0E4E96 ; text-decoration: none;}
  a:active {color:#0E4E96; text-decoration: none;}

  /* Columns */
  .column {float: left;
           width: 31%;
           padding: 10px;
          }
  .row:after {
             content: "";
             display: table;
             clear: both;
             }

  /* Bullets */
  ol, ul, li{font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; color:#000000; margin:6px 0}

  /* header for logos */
  .fixed-top{clear:both;
             height:52px;
             width:960px;
             margin:20px auto;}

/* Header Text right aligned in Content Portal */
  .header-text {font-family: 'Roboto', 'Arial', sans-serif;
                      font-weight:300;
                      color:#0E4E96;
                      line-height:1;
                      margin:14px 0;
                      float:right;
                      text-align:right;
                      font-size: 20px;
                     }

/* Footer */
.footer {position: fixed;
         left: 0;
         bottom: 0;
         width: 100%;
         background-color: #dedede;
         color: black;
         font-family: 'Roboto', 'Arial', sans-serif;
         text-align: center;
         padding:10px 5px 0px 5px;}
   .footer a:link, .footer a:visited {color:#153866;
                                      text-decoration:underline;}
   .footer a:hover, .footer a:focus {color:#5d8196;
                                     text-decoration:underline;}
   .footer a:active {color:#153866; text-decoration:underline;}
   .footer .left {float:left;text-align:left;padding:0 0 10px 15px;}
   .footer .right {float:right;text-align:right;padding:0 15px 10px 0;}
   .footer .center {float:center;text-align:right;padding:0 0 10px 0;}

/* Table of Contents */
.row1 {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; background-color:#fff; margin:0; padding:10; text-align:left; width: 100%; color:#000000}
.row2 {font-family: 'Roboto', 'Arial', sans-serif; font-weight:300; font-size: 16px; background-color:#f5f5f5; margin:0; padding:10; text-align:left; width: 100%;  color:#000000}

/* Horizontal Line */
hr {
  display: block;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  margin-left: 5%;
  margin-right: 5%;
  border-style: inset;
  border-width: 1px;
}

/* Float Text in Front of Graphic */

.page-heading{
	position: relative;
	height:256px;
 }
.page-heading-text {
	 width: 40%;
	 transform: translate(0px, -220px);
	}

/* Buttons */

.button {
		background-color: #4CAF50; /* Green */
		border: none;
		color: white;
		padding: 8px 32px;
		text-align: center;
		text-decoration: none;
		display: inline-block;
		font-size: 16px;
		margin: 4px 2px;
		transition-duration: 0.4s;
		cursor: pointer;
		border-radius: 8px;
	}
	.button1 {
		background-color: #008CBA; /* Light Blue */
		color: white;
		border: 2px solid #0E4E96;
	}

	.button1:hover {
    background-color: white;
		color: black;
  }

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  font-family: 'Roboto', 'Arial', sans-serif; font-size:18px; font-weight:300; color:#020d1a;
  background-color: #279989;
  border: 2px solid  #008CBA; /* Blue */
  color: #ffffff;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  margin-bottom: 5px;
}
.active, .accordion:hover {
  background-color: #0E4E96;
  color: #ffffff;
}
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.icon {
  float: right;
}

/* Expandable tab */
.tab {
    overflow: hidden;
    border: 4px solid #0E4E96;
    background-color: #F9F9F9;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 26px;
    transition: 0.3s;
    font-size: 17px;
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    background-color: #ccc;
  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 6px 12px;
    border: 0px solid #ccc;
    border-top: none;
  }
  
  /* Scroll to Top Button */
  #topBtn {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 15%;
    z-index: 99;
    font-size: 18px;
    border: none;
    outline: none;
    background-color: #6bc7b9;
    color: #000000;
    cursor: pointer;
    padding: 10px;
    border-radius: 4px;
  }
  
  #topBtn:hover {
    background-color: #1b3769;
    color: #ffffff;
  }

/* Cool Box - emphasis on hover */
/* Usage: <div class="cool-box"> */
.cool-box {
  width: 80%;
  margin: 20px auto;
  padding: 20px;
  border: 5px solid #002f66; /* Jordy-600 border */
  border-radius: 15px; /* Rounded corners */
  background: linear-gradient(135deg, #DEFDFF, #C4FCFE); /* Gradient background */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Shadow effect */
  font-family: Arial, sans-serif;
  color: #333; /* Text color */
  text-align: center;
  }
.cool-box:hover {
  transform: scale(1.05); /* Slight zoom on hover */
  transition: transform 0.3s ease-in-out;
  }


/* Floating Graphic styles */
:root {
      --fg-width: 300px;           /* Panel width */
      --fg-right: 16px;            /* Distance from right edge */
      --fg-bottom: 84px;           /* Distance from bottom edge */
      --fg-radius: 12px;           /* Border radius */
      --fg-bg: #ffffff;            /* Background color */
      --fg-shadow: 0 8px 24px rgba(0,0,0,0.18); /* Shadow */
      --fg-border: 1px solid rgba(0,0,0,0.06);
      --fg-z: 1060;                /* Stacking above headers/modals as needed */
      --fg-close-size: 32px;       /* Close button size */
      --fg-close-bg: rgba(0,0,0,0.6);
      --fg-close-color: #fff;
      --fg-focus: 2px solid #005fb8; /* Focus ring color */
    }

    /* Floating Graphic Container */
    .floating-graphic {
      position: fixed;
      right: var(--fg-right);
      bottom: var(--fg-bottom);
      width: var(--fg-width);
      max-width: calc(100vw - 2 * var(--fg-right));
      background: var(--fg-bg);
      border: var(--fg-border);
      box-shadow: var(--fg-shadow);
      border-radius: var(--fg-radius);
      z-index: var(--fg-z);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      gap: 8px;
      transition: transform 180ms ease, opacity 180ms ease, visibility 0s linear 0s;
      transform: translateY(0);
      opacity: 1;
      visibility: visible;
    }

    /* Floating Graphic Hidden state (when closed) */
    .floating-graphic.is-hidden {
      transform: translateY(12px);
      opacity: 0;
      visibility: hidden;
      transition: transform 140ms ease, opacity 140ms ease, visibility 0s linear 140ms;
    }

    /* Floating Graphic Link wrapper (if using image as CTA) */
    .fg-link {
      display: block;
      line-height: 0;
    }

    /* Floating Graphic Make images responsive within the panel */
    .floating-graphic img {
      display: block;
      width: 100%;
      height: auto;
    }

    /* Floating Graphic Caption / CTA area */
    .fg-caption {
      padding: 10px 12px 12px;
      font: 500 14px/1.4 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
      color: #1a1a1a;
    }

    /* Floating Graphic Close button */
    .fg-close {
      position: absolute;
      top: 8px;
      right: 8px;
      width: var(--fg-close-size);
      height: var(--fg-close-size);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: var(--fg-close-bg);
      color: var(--fg-close-color);
      border: none;
      border-radius: 999px;
      cursor: pointer;
      transition: background-color 120ms ease, transform 120ms ease;
    }

    .fg-close:hover { background: rgba(0,0,0,0.75); }
    .fg-close:active { transform: scale(0.96); }
    .fg-close:focus-visible { outline: var(--fg-focus); outline-offset: 2px; }

    /* Floating Graphic Respect reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .floating-graphic,
      .floating-graphic.is-hidden,
      .fg-close {
        transition: none;
      }
    }

    /* Floating Graphic Responsive: hide or tweak on small screens */
    @media (max-width: 640px) {
      .floating-graphic {
        display: none;
        /* Alternatively adjust instead of hide:
        width: min(88vw, 320px);
        right: 6px;
        bottom: 12px;
        */
      }
    }