/*border:1px solid red;*/

/*debugs*/
.dr{border:1px solid red;}
.dy{border:1px solid yellow;}
.db{border:1px solid blue;}

body{
    display:block;
    margin:0;
    box-sizing: border-box;/*Ensures padding is included in width calculations*/
    border: none;
    min-height:100vh;
    width:100%;
    font-size:16px;
    font-family: Raleway, Helvetica, Arial, sans-serif;
    background-color:#333333; /* old #000000; */
    text-align:left; 
    color:#333333;
    overflow-x: hidden;
    z-index: 1;/**/
}

* {box-sizing: border-box;}/*ensures padding does not go outside container*/

/*html{margin:0; padding:0; width:100%;}*/

/* Remove default focus outline, provide accessible custom focus ring */
button:focus, a:focus, input:focus, textarea:focus, select:focus {
    outline: none;
}

button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
    outline: 0.1875rem solid #3498db; /* bright blue ring for keyboard users */
    outline-offset: 0.1875rem;
    border-radius: 0.5rem;
}



/*--------------------links--------------------*/

a{outline:none;}

a:link{color:#fff; text-decoration:none;}
a:visited{color:#fff; text-decoration:none;}
a:hover{color:#fff; text-decoration:none;}
a:active{color:#fff; text-decoration:none;}

a.red:link{color:#bf1717; text-decoration:none;}
a.red:visited{color:#bf1717; text-decoration:none;}
a.red:hover{color:red; text-decoration:none;}
a.red:active{color:red; text-decoration:none;}

a.softyellow:link{color:#f79c2d; text-decoration:none;}
a.softyellow:visited{color:#f79c2d; text-decoration:none;}
a.softyellow:hover{color:#e68a1f; text-decoration:none;}
a.softyellow:active{color:#e68a1f; text-decoration:none;}

a.leafgreen:link{color:#6cae75; text-decoration:none;}
a.leafgreen:visited{color:#6cae75; text-decoration:none;}
a.leafgreen:hover{color:#588c5f; text-decoration:none;}
a.leafgreen:active{color:#588c5f; text-decoration:none;}

a.gray:link{color:#2f4f4f; text-decoration:none;}
a.gray:visited{color:#2f4f4f; text-decoration:none;}
a.gray:hover{color:#d3d3d3; text-decoration:none;}
a.gray:active{color:#d3d3d3; text-decoration:none;}

a.cream:link{color:#fff6eb; text-decoration:none;}
a.cream:visited{color:#fff6eb; text-decoration:none;}
a.cream:hover{color:#ffeedc; text-decoration:none;}
a.cream:active{color:#ffeedc; text-decoration:none;}

a .pagelink{color:#2f4f4f;}

/*--------------------text--------------------*/

h1{margin-bottom:1.25rem; font-size:5rem; text-align:center;}
h2{margin-bottom:1.25rem; font-size:2rem; color:#ffffff; text-align:left;}
h3{margin-bottom:1.25rem; font-size:1.5rem; color:#ffffff;}

h2, h3, h4 {scroll-margin-top:3.9rem;} /* stops heading slipping under navbar when scrolling to an anchor point */

p{text-wrap:balance; white-space:normal;}

.intro-sml{font-size:1.3em; font-weight:bold;}
.intro-lrg{font-size:1.65em; font-weight:bold;}
.contact-label-sml{font-size:0.4em;}

.bold{font-weight:bold;}
.semibold{font-weight:600;}
.italic{font-style:italic;}
.strong{font-weight:strong;}
.smallcaps{font-variant:small-caps;}

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

.white{color:#fff;}
.black{color:#000;}
.gray{color:#2f4f4f;}
.light-gray{color:#d3d3d3;}
.mid-gray{color:#333333;}
.yellow{color:#f39200;}
.softyellow{color:#f79c2d;}  /*f6a243*/
.softyellow-pastel{color:#fbe3c4;}
.softyellow-dark{color:#e68a1f;}
.light-yellow{color:#ffc20e;}
.pale-yellow{color:#fff6b3;}
.orange{color:#ff4d00;}
.red{color:#bf1717;}
.brickred{color:#d14b4b;}
.brickred-pastel{color:#f0d2d2;}
.green{color:#3da335;}
.leafgreen{color:#6cae75;}
.leafgreen-dark{color:#588c5f;}
.leafgreen-pastel{color:#d2e9d9;}
.purple{color:#7f3f90;}
.softpurple{color:#9147b3;}
.softpurple-pastel:{color:#e2d2ec;}
.cream{color:#fff6eb;}
.richcream{color:#ffeedc;}
.teal{color:#2b9da6;}
.deepteal{color:#23848c;}

/*decorative dot used in datebar (could be used other places)*/
.dot {display: inline-block; width: 6px; height: 6px; background-color: #fff; border-radius: 50%;  /* makes it a circle */ margin: 0 0.5rem;   /* spacing on each side */}

/*--------------------backgrounds--------------------*/

.bkg-black{background-color:#202020;} .bkg-red{background-color:#bf1717;} .bkg-brickred{background-color:#d14b4b;} .bkg-yellow{background-color:#f39200;} .bkg-softyellow{background-color:#f79c2d;} .bkg-yellow-dark{background-color:#ec6607;} .bkg-orange{background-color:#ff4d00;} .bkg-blue{background-color:#009bb7;} .bkg-green{background-color:#3da335;} .bkg-leafgreen{background-color:#6cae75;} .bkg-white{background-color:#ffffff;} .bkg-cream{background-color:#fff6eb;} .bkg-richcream{background-color:#ffeedc;}.bkg-purple{background-color:#7f3f90;} .bkg-softpurple{background-color:#9147b3;} .bkg-teal{background-color:#2b9da6;} .bkg-deepteal{background-color:#23848c;}

.bkg-ptn-ops{background-image:url("/img/ptn28937asmd019.png"); background-attachment:fixed;} 
.bkg-ptn-grm{background-image:url("/img/ptn29384grmr182.png"); background-attachment:fixed;} 
.bkg-ptn-sym{background-image:url("/img/ptn34234mtsm203.png"); background-attachment:fixed;} 
.bkg-ptn-pnc{background-image:url("/img/ptn29382pnc004.png"); background-attachment:fixed;} 
.bkg-ptn-qtn{background-image:url("/img/ptn49302qstn921.png"); background-attachment:fixed;} 
.bkg-ptn-ifo{background-image:url("/img/bkg-ptn-ifo.png"); background-attachment:fixed;} 

/*--------------------buttons--------------------*/

.btn-cell{display:flex; flex-flow:row; justify-content:center; align-items:center; width:100%;} /*special cell for buttons to override left align and make them full-width*/

.btn{display:flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:600; border-radius:0.5rem; width:100%; max-width:18.75rem; height:3.75rem; max-height:3.75rem; color:#fff; font-family:inherit; text-decoration:none; white-space: nowrap; cursor:pointer; transition:background-color 0.2s ease;}

.btn.border{border:0.1875rem solid #fff;}

.btn-teal{background-color:#2b9da6;}
.btn-teal:hover{background-color:#238891;}
.btn-teal:active{background-color:#1e6c73;transform:scale(0.97);}

.btn-leafgreen{background-color:#6cae75;}
.btn-leafgreen:hover{background-color:#5aa462;}
.btn-leafgreen:active{background-color:#478a50;transform:scale(0.97);}

.btn-brickred{background-color:#d14b4b;}
.btn-brickred:hover{background-color:#b73f3f;}
.btn-brickred:active{background-color:#8f3030;transform:scale(0.97);}

.btn-softyellow{background-color:#f79c2d;}
.btn-softyellow:hover{background-color:#e6881f;}
.btn-softyellow:active{background-color:#bf6c1a;transform:scale(0.97);}

.btn-none-softyellow{background-color:transparent;}
.btn-none-softyellow:hover{background-color:#e6881f;}
.btn-none-softyellow:active{background-color:#bf6c1a;transform:scale(0.97);}

.btn-none-leafgreen{border:0.0625rem solid #fff; color:#fff; background-color:transparent;}
.btn-none-leafgreen:hover{background-color:#5aa462;}
.btn-none-leafgreen:active{background-color:#478a50;transform:scale(0.97);}


/*.btn-hollow:focus-visible {outline:3px solid #3498db; outline-offset:3px; border-radius:0.5rem;}*/

/*--------------------images-------------------*/

.flipX{transform:scaleX(-1);}


/*--------------------headerrow-------------------*/
.headerrow {display:flex; justify-content:space-between; align-items:center; width:100%; margin:0; padding:0;}

/*--------------------navbar-------------------*/

/* navbar container */
.navbar{position: fixed; top: 0; z-index: 1000; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; border-bottom: 5px solid #fff; padding: 0.75rem 1rem; width: 100vw; max-width: 100%; height: 60px; background: #333333;}


/*logo animation also applied to footer*/
.logo {transition: transform 0.3s ease; /* smooth animation */}
.logo:hover {transform: scale(1.1); /* grows 10% bigger */}


/* links */
.nav-links{max-width: 100%; box-sizing: border-box; list-style: none; display: flex; gap: 1rem; margin: 0; padding: 0;}

/* all links */
.nav-links a{flex: 1 1 auto; min-width: 0; text-decoration: none; color:#fff; font-weight: 500; padding: 0.25rem 0.5rem;}

/* prevent first-item highlight when menu opens */
.nav-links a:focus:not(:focus-visible){outline: none; background: transparent; color: #fff;}

/* active link - desktop only */
.nav-links a.active:not(.navbtn){border-bottom: 2px solid #fff; color: #fff;}

/* hover/focus underline - desktop only */
.nav-links a:not(.navbtn):hover, .nav-links a:not(.navbtn):focus, .nav-links a:not(.navbtn):active{border-bottom: 2px solid #fff; color: #fff;}

/* button styles */
.navbtn{background: #6cae75; color: #fff; padding: 2rem 1rem; border-radius: 6px; font-weight: 600; transition: background 0.2s ease; -webkit-tap-highlight-color: transparent; -webkit-user-select: none;}

.navbtn:hover, .navbtn:focus, .navbtn:active{background: #256628; color: #fff;}

/* mobile toggle */
.menu-toggle{display: none; font-size: 1.5rem; background: none; border: none; cursor: pointer; color: #fff;}

/*=== responsive styles ===*/
@media (max-width: 1024px){
/* nav links hidden by default on mobile, not blocking clicks */
  .nav-links {display: none; flex-direction: column; align-items:center; background: #333333; width: 100%; padding:1.5rem; font-size:1.2rem;}

/* links when menu is active */
.nav-links.active, .nav-links.mobile-active{display: flex; position: absolute; top: 100%; right: 0; z-index: 1000; pointer-events: auto;}

/* all links in mobile menu */
.nav-links a{display: block; border-radius: 6px; width: 100%; text-decoration: none; color: #fff; padding: 0.5rem 1rem; border-bottom: none;}

/* hover/focus background highlight - mobile */
.nav-links a:not(.navbtn):hover, .nav-links a:not(.navbtn):focus, .nav-links a:not(.navbtn):active{background-color: #f79c2d; color: #fff; border-bottom: none;}

/* nav button hover/focus/active - mobile */
.navbtn:hover, .navbtn:focus, .navbtn:active{background: #256628; color: #fff;}

/* hide active link underline when mobile menu is open */
.nav-links.mobile-active a.active:not(.navbtn){border-bottom: none;}

/* show mobile toggle button */
.menu-toggle{display: block;}
}

.nav-links.active, .nav-links.mobile-active{display:flex; position:absolute; top:100%; right:0; z-index:1000; pointer-events:auto;}


/*--------------------billboard area-------------------*/

.billboard{display:flex; flex-flow:column; justify-content:center; align-items:center; border-bottom:5px solid #fff; margin:0 0 1rem 0; padding:20px; overflow:hidden; color:#fff;}

.billboard > .frame{display:flex; flex-flow:row wrap; justify-content:space-around; align-items:center; max-width:93.75rem;}

.billboard .cell{display:flex; flex-flow:row wrap; justify-content:center; padding:20px;}
.billboard .cell.stretch{flex:1; justify-content:flex-start;}
.billboard .cell.ctr{align-items:center; max-width:300px;}

.billboard picture{display:flex; justify-content:center; align-items:center; width:100%;}

.billboard h1{margin:0 0 20px 0; font-size:4.8em; text-align:center;}
.billboard h2{text-align:center;}
.billboard p{margin-bottom:10px; font-size:1.5em;}

@media(max-width:480px){
    .billboard h1{margin:0; padding:0; font-size:2.6em;}
    .billboard h2{margin-bottom:0; font-size:1.2em;}
    .billboard img{width:200px;}
    .billboard .cell{padding:0;}
}

@media(max-width:680px) and (min-width:481px){
    .billboard h1{margin:0; font-size:3em;}
    .billboard h2{font-size:1.6em;}
    .billboard img{width:210px;}
}

@media(max-width:980px){
    .billboard .frame{flex-flow:column-reverse; justify-content:center;}
    .billboard .cell.stretch{justify-content:center; align-self:center; padding:20px; text-align:center;}
}
@media(min-width:980px) {
    .billboard h1{text-align:left; font-size:5.6em;}
    .billboard h2{text-align:left; font-size:1.78em;}
}

/*--------------------miniboard area-------------------*/
/*(((like billboard but smaller)))*/

.miniboard{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin:0; padding:20px; color:#fff;}

.miniboard .frame{display:flex; flex-flow:row wrap; justify-content:space-between; align-items:center; margin:0;}

.miniboard .newframe{padding:1.5rem;} /*COMBINE WITH .FRAME ONCE SITE IS FULLY UPDATED*/

.miniboard .cell{display:flex; flex-flow:column; justify-content:center; align-items:center;}
.miniboard .cell.stretch{flex:1;}

.miniboard h1{margin:0 0 20px 0; font-size:3.75em;}
.miniboard p{margin:0; font-size:1.5em;}

@media(max-width:480px){
    .miniboard h1{margin:0; padding:0; font-size:2.6em;}
    .miniboard h2{margin-bottom:0; font-size:1.2em;}
    .miniboard .cell{padding:0;}
}

@media(max-width:680px) and (min-width:481px){
    .miniboard h1{margin:0; font-size:3em;}
    .miniboard h2{font-size:1.6em;}
}



/*--------------------datebar-------------------*/

.datebar{display:flex; flex-flow:column nowrap; justify-content:center; align-items:center; padding:3.9rem 0 0.25rem 0; width:100%; height:auto; min-height:4.375rem;}

.term-week{display:flex;}

.holiday{display:none; flex-flow:row nowrap; justify-content:center; align-items:center;}

.datebar .frame-datebar{display:flex; flex-flow:column nowrap; justify-content:flex-end; align-items:center; width:100%;}

.datebar .cell-datebar{display:flex; flex-flow:row nowrap; align-items:center; justify-content:center; width:100%;}

.datebar .subcell-datebar{display:flex; flex-flow:row; align-items:center; width:auto; height:3rem; font-weight:bold; font-size:1.3rem;}

.datebar .subcell-datebar p{margin:0; padding:0;}

.datebar .subcell-datebar.flipcard-container{display:flex; justify-content:center; align-items:center; flex:0 0 auto; width:auto;} /* centred always */

.datebar .flipcard{display:flex; flex-flow:row; justify-content:center; align-items:center; margin:0.0625rem 0.1875rem; border-radius:0.625rem; width:4.0625rem; height:2.1875rem; color:#000; font-size:1.4rem; background-color:#fff; min-width:3.4375rem; min-height:1.875rem; text-align:center;}

.datebar .subcell-datebar.msg-start{justify-content:flex-end; flex:1; margin:0; padding-right:0.5rem;}

.datebar .subcell-datebar.msg-end{justify-content:flex-start; flex:1; margin:0; margin-left:0.5rem;}

.datebar .subcell-datebar.msg-end a {
  position: relative;          /* needed for ::after to position relative to link */
  display: inline-block;       /* ensures proper width inside flex containers */
  color: #fff;              /* keeps text color */
  text-decoration: none;       /* remove default underline */
  cursor: pointer;
}

.datebar .subcell-datebar.msg-end a::after {
  content: "";                 /* creates the underline element */
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;                 /* thickness of the underline */
  width: 0%;                   /* start hidden */
  background-color: currentColor; /* same color as text */
  transition: width 0.3s ease; /* smooth slide animation */
}

.datebar .subcell-datebar.msg-end a:hover::after,
.datebar .subcell-datebar.msg-end a:focus::after {
  width: 100%;                 /* expands underline to full width on hover/focus */
}

.datebar .subcell-datebar.msg-start p{margin:0; padding:0; color:#fff;}

.datebar .termcard-container{display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; margin:0.3125rem 0.625rem; padding:0;} /* centred now */

.datebar .termcard-label{margin:0 0.625rem 0 0; padding:0; font-size:1.1em;}

.datebar .termcard{display:flex; flex-flow:column; justify-content:center; align-items:center; margin:0; padding:0; border-radius:0.625rem; width:3.75rem; height:auto; min-width:3.4375rem; min-height:1.875rem; color:#000; font-family:Arial, Helvetica, sans-serif; font-size:1.6em; background-color:#fff;}

.datebar .calendar-icon{height:3.125rem;}

/*.datebar .cell-datebar-alert{display:flex; flex-flow:row wrap; justify-content:center; align-items:center; margin-bottom:-0.26rem; padding:0.2rem; width:100%; color:#fff; font-size:1rem; text-align:center; line-height:1.5; white-space:pre-line;}*/

.datebar .cell-datebar-alert{
    display:flex;
    flex-flow:row wrap;
    justify-content:center;
    align-items:center;
    margin-bottom:-0.26rem;
    padding:0.2rem;
    width:100%;
    color:#fff;
    font-size:1rem;
    text-align:center;
    line-height:1.5;
    white-space:normal;
}


.datebar .cell-datebar-alert:empty{display:none;}

/*.datebar .cell-datebar-alert:not(:empty){position:relative; z-index:1; margin-top:0.5rem;}*/

/*@media(max-width:580px){*/
/*.datebar{flex-flow:column nowrap; font-size:0.8rem;}*/
/*.datebar .frame-datebar{flex-flow:column;}*/
/*.datebar .cell-datebar{flex-flow:column nowrap; align-items:center; justify-content:center;}*/
/*.datebar .subcell-datebar{flex:none; margin:0.25rem 0;}*/
.datebar .termcard-container{margin:0.3125rem 0.3125rem; justify-content:center;} /* keep centred on mobile */
/*.datebar .termcard{width:3.125rem; height:1.875rem; font-size:1.45rem;}*/
/*.datebar .termcard-label{margin:0 0.3125rem 0 0; font-size:1rem;}*/
/*.datebar .cell-datebar-alert:not(:empty){margin-top:0;}*/
/*.datebar .subcell-datebar.msg-end{display:none;}*/
/*}*/

/*@media(min-width:380px){*/
/*.datebar .cell-datebar-alert{white-space:nowrap;}*/
/*.datebar .cell-datebar-alert .alert-item:not(:last-child)::after{content:" • "; margin:0 0.46875rem;}*/
/*}*/

/* MOBILE – stacked alerts, no dot */
@media (max-width: 579px) {
    .datebar{flex-flow:column nowrap; font-size:0.8rem;}
    .datebar .frame-datebar{flex-flow:column;}
    .datebar .cell-datebar{flex-flow:column nowrap; align-items:center; justify-content:center;}
    .datebar .subcell-datebar{flex:none; margin:0.25rem 0;}
    .datebar .termcard-container{margin:0.3125rem 0.3125rem; justify-content:center;} /* keep centred on mobile */
    .datebar .termcard{width:3.125rem; height:1.875rem; font-size:1.45rem;}
    .datebar .termcard-label{margin:0 0.3125rem 0 0; font-size:1rem;}
    .datebar .cell-datebar-alert:not(:empty){margin-top:0;}
    .datebar .subcell-datebar.msg-end{display:none;}

    /* key part: make each alert sit on its own line */
    .datebar .cell-datebar-alert {
        flex-flow:column nowrap;
        white-space:normal;
    }
    .datebar .cell-datebar-alert .alert-item {
        display:block;
    }
    .datebar .cell-datebar-alert .alert-item + .alert-item {
        margin-top:0.125rem; /* small vertical gap */
    }
}

/* DESKTOP / LARGER – alerts on one line with dot */
@media (min-width: 580px) {
    .datebar .cell-datebar-alert {
        flex-flow:row nowrap;
        white-space:nowrap;
    }

    .datebar .cell-datebar-alert .alert-item {
        display:inline;
    }

    .datebar .cell-datebar-alert .alert-item:not(:last-child)::after {
        content:" • ";
        margin:0 0.46875rem;
    }
}


/*--------------------placard area-------------------*/

.placard{display:flex; flex-direction:row; justify-content:center; align-items:center; margin:1rem 0 1rem 0; width:100%;}

/*container of the boxes*/
.placard-frame{display:flex; flex-flow:row wrap; gap:1rem; justify-content:space-evenly; align-items:stretch; width:100%; max-width:93.75rem; padding:0 1rem;}

/*coloured boxes*/
.placard .box-placard{display:flex; flex:1 1 20rem; flex-direction:column; justify-content:space-between; align-items:stretch; padding:1rem; border:0.3125rem solid #fff; border-radius:0.625rem; min-width:16rem; height:auto; min-height:12.5rem; color:#fff; box-sizing:border-box;}

/*container of the three rows of content inside the boxes*/
.placard .cell-placard{display:flex; flex:1; flex-flow:column nowrap; gap:0; justify-content:space-between; align-items:stretch;}

/*rows of content (three in each box)*/
.placard .module-placard{display:flex; flex-flow:row wrap; padding:1rem; min-height:0;}

.placard .module-placard.top{justify-content:center; align-items:flex-start;}
.placard .module-placard.middle-1{flex:1; justify-content:center; align-items:center;}
.placard .module-placard.middle-2{flex:1; flex-wrap:nowrap; gap:1rem; justify-content:space-between; align-items:center;}
.placard .module-placard.bottom{justify-content:center; align-items:flex-end;}

/*container to go inside module, when two needed*/
.placard .module-placard-interior{display:flex; flex-flow:row nowrap; align-items:center;}

/*.placard img{max-height:10rem;}*/

.placard .module-placard-interior.left{flex:1; justify-content:flex-start;}
.placard .module-placard-interior.right{justify-content:flex-end;}

.placard .title-placard{margin:0; padding:0; font-size:2em; font-weight:bold; color:#fff; text-align:center;}

.placard .text-placard{margin:0; padding:0; color:#fff;}

.placard .text-placard.xlarge, .placard a.xlarge{font-size: 1.4rem;}

.placard .text-placard.large, .placard a.large{font-size:1.2rem;}
.placard .text-placard.standard, .placard a.standard{font-size:1rem;}


.placard a.internal{display:inline;} 
.placard a.button{display:flex; justify-content:center; align-self:center; width:80%;}

@media(max-width:450px){.placard .title{font-size:1.8em;} .placard p{font-size:1em;}}

@media(min-width:680px) and (max-width:1050px){
    .placard .box-placard.third-wheel{display:none;}
}

@media(max-width:1200px){.placard .vanish{display:none;}}

/*--individual placard adjustments--*/

/*book now*/
.placard .book-alt-2{display:none;} /*next term book now*/

/*contact*/
.placard .contact-alt-2{display:none;}

@media(max-width:1390px) and (min-width:1200px) {
    /*contact*/
    .placard .contact-alt-1{display:none;}
    .placard .contact-alt-2{display:inline;}
    /*book now*/
    .placard .book-alt-1{display:none;}
    .placard .book-alt-2{display:inline;}
}


/*--------------------touchpad area-------------------*/

/* border:1px solid blue;*/

.touchpad{display:flex; flex-flow:column; justify-content:center; align-items:center; margin:1rem 0 1rem 0; padding:2rem; width:100%;}

.touchpad .frame-touchpad{display:flex; flex-flow:row; justify-content:space-around; align-items:flex-start; gap:6rem; width:100%; max-width:80%;}

.touchpad .cell-touchpad{display:flex; flex-flow:column; justify-content:flex-start; align-items:center;}

.touchpad .subcell-touchpad{display:flex; flex-direction:column; justify-content:flex-start; padding-bottom:2rem; width:100%;}

.touchpad .img-touchpad{align-self:center; width:25%;}

.touchpad p, .touchpad li{color:#fff; font-size:1.2rem; font-weight:600; text-align:center;}

/*.touchpad .img-touchpad {align-self: center; width: auto; min-width:5px; flex: 0 0 auto;*/
/*}*/

.touchpad ul{margin:0; padding:0;}

.touchpad li{list-style:none; margin-bottom:1rem; font-size:1.2rem; text-align:center;}

.touchpad a{display:inline-block; text-decoration:underline; color:#fff; cursor:pointer;}  

.touchpad a:hover, .touchpad a:focus{color:#fffccc;}

.touchpad .button{min-width:12rem;}

.mini-map {width:100%; max-width:400px; height:250px; margin:1rem auto; border:0; border-radius:1rem; overflow:hidden;}
.mini-map iframe {width:100%; height:100%; border:0;}


@media (max-width:899px){
    .touchpad .frame-touchpad{gap:2rem; max-width:100%;}
    .touchpad .frame-touchpad{flex-flow:column; align-items:center;}
}



/*--------------------gallery-------------------*/

.gallery {display:flex; flex-flow:row; justify-content:center; margin:0; padding:2rem 0; width:100%;}

.gallery .frame-gallery {display:grid; gap:1.25rem; justify-items:center; align-items:flex-start; align-self:center; width:100%; max-width:980px; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));}

/*.gallery .frame-gallery a {display:grid; align-items:start; justify-items:center;}*/

.gallery .cell-gallery {display:grid; gap:1.25rem; justify-items:center; align-items:start; width:8rem; height:9rem;}

.gallery .icon {max-width:70px; aspect-ratio:1/1;}

.gallery .cell-gallery p{margin:0; padding:0; width:100%; font-size:1.1rem; font-weight:bold; text-align:center; color:#fff; line-height:1.2;}

.gallery .text {display:block; width:100%; max-width:8rem; max-height:3rem; text-align:center; font-size:1.125em;}

/* Medium screens: force 2 columns → 2x2 for 4 items */
@media (min-width:350px) and (max-width:859px) {
  .gallery > .frame-gallery {
    grid-template-columns: repeat(2, 1fr);
    gap: 4rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    max-width: 600px;
  }
}


@media (max-width:768px){
     .gallery  .gallery-slide {font-size:1rem;}
}

/* Large screens: 4 in a row */
@media (min-width:900px) { 
  .gallery > .gallery-frame { grid-template-columns: repeat(4, 1fr); }
}

/*feedback slidebox (inside gallery above)*/

.gallery .gallery-slide { display:flex; flex-direction:column; width:auto; max-width:80%; font-size:1.2rem;}

.slidebox{display:grid;width:100%; min-height:200px; max-height:250px; overflow:hidden; text-align:center;}

.slides{grid-row:1/2; grid-column:1/2; font-size:1.6rem; opacity:0; transition:opacity 1.5s ease-in-out; display:flex; justify-content:center; align-items:center; color:#fff; text-align:center; flex-direction:column;}

.slides.active{opacity:1;}

.gallery .gallery-slide-comment{display:flex; justify-content:center;}

@media(max-width:659px) {
    .slidebox { min-height: 220px; }
    .slides{font-size:1.4rem;}
}

@media(min-width:1025px) {
    .slidebox { max-width: 600px; }
}


/*--------------------pageflow area-------------------*/

.pageflow{display:flex; flex-flow:column; justify-content:center; align-items:center; margin:0 0 1rem 0; padding-bottom:2rem; width:100%;}

.pageflow .frame-pageflow{display:flex; flex-flow:row; justify-content:center; align-items:center; gap:2rem; width:90%; max-width:61.25rem;}

.pageflow .cell-pageflow{display:flex; flex-flow:column; justify-content:flex-start;}
.pageflow .cell-pageflow.alone{max-width:70%;}/*for cells with nothing either side so they don't get too wide*/

.pageflow .cell-pageflow.lonely{max-width:40%;}/*for cells with nothing either side so they don't get too wide*/

.cell-termdate{display:flex; flex-flow:column; justify-content:flex-start; align-items:center;}

.pageflow .image{display:flex; flex-flow:column; justify-content:center; align-items:center; width:100%; height:100%;}

.pageflow .image-left{padding-right:2rem;}
.pageflow .image-right{padding-left:2rem;}

.pageflow .heading{text-align:left;}

.pageflow p{margin:0 0 10px 0; text-align:left; line-height:1.5; font-size:1.2em; color:#333333;}

.pageflow .intro-pageflow{margin:2.5rem 1.25rem 0; width:90%; max-width:40rem;} /*use this when not heading up pageflow with h2*/

.pageflow ul{line-height:1.5}
.pageflow li{margin-bottom:0.5rem; color:#333333; font-size:1.2rem;}

.pageflow .frame-CTA{display:flex; flex-flow:column; align-items:center; gap:2rem; margin:2rem; max-width:90%; border-top:0.0625rem solid #6cae75; padding:2rem 4rem; background-color:none;}

.pageflow .cell-CTA{display:flex; flex-flow:column; justify-content:center; align-items:center; gap:1.5rem; width:100%;}

.pageflow .cell-CTA p{font-size:1.5rem; font-weight:bold; text-align:center; color:#6cae75;}

.pageflow .btn-CTA{display:inline-flex; justify-content:center; align-items:center; font-size:1.5rem; font-weight:500; border:0.0625rem solid #6cae75; border-radius:0.5rem; padding:0.5rem 1.2rem 0.5rem 1.2rem; width:100%; max-width:18.75rem; height:3.75rem; max-height:3.75rem; background-color:#fff6eb; color:#6cae75; text-decoration:none; white-space: nowrap; cursor:pointer; transition:background-color 0.2s ease;}

.pageflow .btn-CTA:hover{color:#fff; background-color:#6cae75;}

.pageflow .btn-CTA:active{color:#fff; background-color:#588c5f;}

.pageflow .cell-404{display:flex; flex-flow:column nowrap; gap:2rem; justify-content:center; align-items:center; width:auto; min-height:20rem;}
.pageflow .cell-404 p{margin:0.5rem; padding:0; text-align:center; line-height:2.5;}

.pageflow .terms-and-privacy{max-width:80%;}
.pageflow .terms-and-privacy-summary-box{border: 2px solid #f0a500; background-color: #fff8e5; padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 2rem;}

@media(max-width:600px){
    .pageflow .frame-CTA{padding:2rem 1rem;}
    .pageflow .cell-CTA p{font-size:1.4rem;}
    .pageflow .terms-and-privacy{width:100%; max-width:100%;}
    .pageflow .terms-and-privacy-summary-box{border-top:2px solid #f0a500; border-bottom:2px solid #f0a500; border-left:none; border-right:none; border-radius:0;}
}
@media(max-width:899px){
    .pageflow .frame-pageflow{flex-flow:column; padding:2rem 1rem;}
    .pageflow .image-short{height:18.75rem;}
    .pageflow .image-tall{height:28rem;}
    .pageflow .image-left, .pageflow .image-right{padding:0;}
    .pageflow .cell-pageflow.alone{max-width:100%;}
}
@media(min-width:900px){
    .pageflow .frame-pageflow{padding:2rem 0 2rem 0;}
}


/*--------------------feedback (reviews page)-------------------*/

.feedback-row{display:flex; flex-flow:row nowrap; margin: 2rem 0 2rem 0; width:100%;}

.feedback-row.start{justify-content:flex-start;}

.feedback-row.end{justify-content:flex-end;}

.feedback-content{display:flex; flex-flow:row nowrap; gap:1rem; width:80%;}

.feedback-graphic{display:flex; flex:0 0 15%; justify-content:center; align-items:center; width:80px;}

.feedback-graphic img{display:block; width:80px; max-width:100%; height:auto;}

.feedback-details{display:flex; flex:1;}

@media(max-width:600px){
    .feedback-content{flex-flow:column nowrap; align-items:center;}
    .feedback-row.end .feedback-content{flex-flow:column-reverse nowrap;}
}


/*--------------------footer-------------------*/

footer{display:flex; flex-flow:column; align-items:stretch; padding-top:1.2rem; border-top:0.3125rem solid #fff; min-width:100%; background-color:#333333;}

footer.add-top-margin{margin-top:1.1rem;}

footer.collapse-top-margin{margin-top:-1.1rem;} /*variable set in footer.php*/

footer .frame-footer{display:flex; flex-flow:row wrap; justify-content:space-around; align-items:flex-start; align-self:center; margin-top:1.25rem; width:100%; max-width:93.75rem;;}

footer .logo-footer{display:flex; flex-flow:column; justify-content:space-around; align-items:center;}
footer .logo-footer-cell{flex:1; display:flex; flex-flow:column; justify-content:center; align-items:center; width:11rem; max-width:12rem;}

footer .heading-footer{color:#f79c2d; font-size:1.1em;}

footer .cell-footer{flex:1 1 1000px; display:flex; flex-flow:row wrap; justify-content:space-around; align-items:flex-start;}

footer .subcell-footer{flex:1 1 280px; display:flex; flex-flow:column; justify-content:center; align-items:flex-start; padding:20px; min-height:100%; font-size:1.125em; line-height:1.8em;}

footer .subcell-footer li{list-style:none;}

footer .characters{justify-content:center; align-items:center; align-self:center;}

footer .cell-copyright{display:flex; flex-flow:row wrap; justify-content:center; margin:30px 0; min-width:100%; font-size:0.875em; text-align:center; color:#fff;}

footer p{margin-bottom:5px; width:100%; font-size:0.875em;}

@media(max-width:600px){
    footer .cell-footer{max-width:300px;}
    footer .logo-footer, footer .subcell-footer{min-width:100%; padding:0;}
    footer .subcell-footer li:not(.heading-footer) {margin-left: 0.75rem;}
}