/*
  1. Use a more-intuitive box-sizing model.
*/
*, *::before, *::after {
box-sizing: border-box;
}
/*
2. Remove default margin
*/
* {
margin: 0;
}
/*
Typographic tweaks!
3. Add accessible line-height
4. Improve text rendering
*/
body {
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
/*
5. Improve media defaults
*/
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}
/*
6. Remove built-in form typography styles
*/
input, button, textarea, select {
font: inherit;
}
/*
7. Avoid text overflows
*/
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}
/*
8. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}



* {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;  
  font-style: normal;  
  color: white;
}

/**
 * ==================================
 * LMP Styles
 * ==================================
 */

html, body {
    min-height: 100%;
}

/*.bg {*/
/*    height: 100%;*/
/*    background-image: url("img/lurgan-medical-hero.jpg");*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    background-repeat: no-repeat;*/
/*}*/

.bg {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url("img/lurgan-medical-hero.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


.container {
    width: 90%;
    max-width: 1280px;
    margin: 0 auto;
}

.site-title {
    margin-bottom: 1rem;
}

.site-header {
    padding: 1rem 0;
}

.site-header__logo {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 1rem;
}

.site-header__contact {
    padding: 0.5rem 0;
}

.contact-bar {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 1rem;
    overflow: hidden;
}

.contact-bar__col--addr {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 1rem;
}

.contact-bar__col--phone,
.contact-bar__col--pres,
.contact-bar__col--ooh {
    float: left;
    width: 33.3333%;
    padding-top: 0.5rem;
}

.contact-bar__title {
    font-weight: bold;
    font-size: 14px;
}

.contact-bar__info {
    font-size: 14px;
}

.contact-bar__info a {
    text-decoration: none !important;
}

.contact-bar__col--socials {
    clear: left;
    padding-top: 0.5rem;    
}

.social-icon {
    width: 32px;
}

@media (min-width:768px){
    
    .contact-bar {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
    }

    .contact-bar__col--phone,
    .contact-bar__col--pres,
    .contact-bar__col--ooh {
        float: none;
        width: auto;
    }

    .contact-bar__col--addr {
        padding-top: 0.5rem;
        padding-bottom: 0;
        border: 0;
    }

    .contact-bar__col--socials {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
}

@media (min-width:1024px){    

    .site-header {
        display: grid;
        grid-template-columns: 1fr 4fr;

        border-bottom: 1px solid rgba(255,255,255,0.5);
    }

    .site-header__logo {
        border: 0;
        padding-bottom: 0;
        display: flex;
    }

    h1 {
        display: flex;
    }

    .site-header__logo img {
        display: inline-block;
        align-self: center;
    }

    .contact-bar {
        grid-template-columns: 2fr 1fr 1fr 1fr 0.25fr;
        padding-bottom: 0;
        border: 0;
    }

    .contact-bar__title,
    .contact-bar__info  {
        font-size: 16px;
    }
}

@media (min-width:1280px){    
    .contact-bar__title {
        font-size: 18px;
    }
}

/**
 * Top Section
 */

@media (min-width: 768px){
    .site-body__top {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
        border-bottom: 1px solid rgba(255,255,255,0.5);
        margin-bottom: 1rem;
    }
}

@media (min-width: 1024px){
    .site-body__top {
        padding-top: 2rem;
        gap: 3rem;
    }
}


/**
 * Top Section
 */

.site-body__bottom {
    border-bottom: 1px solid rgba(255,255,255,0.5);
    padding-bottom: 1rem;
}


/**
 * Tables
 */

.opening-hours {
    border-collapse: collapse;
    width: 100%;
    border-top: 1px solid rgba(255,255,255,0.5);
    border-left: 1px solid rgba(255,255,255,0.5);
}

.opening-hours th,
.opening-hours td {
    padding: 0.5rem;
    border-right: 1px solid rgba(255,255,255,0.5);
    border-bottom: 1px solid rgba(255,255,255,0.5);
    font-size: 14px;
}

.opening-hours th {
    background-color: rgba(255,255,255,0.5);
    color: #273b4a;
}

.table-footer {
    margin-top: 1rem;
}


/**
 * Doctors
 */

.site-body__top-column--hours,
.site-body__top-column--doctors {
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.5);
}

.doctor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem
}

.person-card__name,
.person-card__qual {
    font-size: 14px;
}

.person-card__inline-qual {
    font-weight: normal;
}

@media (min-width: 768px){ 
    .site-body__top-column--hours,
    .site-body__top-column--doctors {
        border: 0;
        margin-bottom: 0;
    }
}


/**
 * Other Staff
 */

.staff-grid__col {
    margin-bottom: 1rem;
}

.dept-wrap {
    margin-bottom: 1rem;
}

.dept-title {
    margin-bottom: 0.25rem;
}

.staff-grid__col .person-card {
    margin-bottom: 0.5rem;
}

.info-admin-team {
    border-top: 1px solid rgba(255,255,255,0.5);
    padding-top: 1rem;
}


@media (min-width: 768px){
    .staff-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 2rem;
    }
}

@media (min-width: 1024px){
    .staff-grid {
        gap: 3rem;
    }
}

/**
 * Footer
 */

.site-footer {
    padding: 1rem 0;
    text-align: center;
    font-size: 14px;
}

.rte p,
.rte ul li,
.rte h1,.rte h2, .rte h3, .rte h4, .rte h5 {
    margin-bottom: 1rem;
}

hr {
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,0.5);
    margin-bottom: 1rem;
}