/* Header image dimensions */

/* PHP NOTES: 

 * Make subscribe form fit with MailChimp
 * Select form to attach to subscribe form
 * Select suscriber page, included in footer.php

 * Select footer icon, can be from site icon?
 * Has footer menu? 

 * Has main menu

*/


/* TYPOGRAPHY STYLES */


body,
.p,
.p--font-body {
    color: var(--ixn-color-grey);
}

@media only screen and (min-width: 360px) {
    .overflowing-container {
       overflow-y: hidden; /* The section bg vw includes the scroll bar, this avoids the horizontal scrollbar */
    }
}


.a, 
a {
    color: #16737b;
}    

a:not(.a--hover-no, .btn, .btn-secondary) {
    border-bottom:  1px solid #16737b;
}

    .a:focus, 
    a:not(.a--hover-no):focus {
      outline: 1px dashed var(--ixn-color-primary--tint-60);
    }

    .a:hover, 
    a:not(.a--hover-no):hover {
        background-color: var(--ixn-color-primary--tint-10); /* */
        color: var(--ixn-color-primary) !important;
        border-color:var(--ixn-color-primary) !important;
    }


.hr {
    border-top: var(--ixn-border-primary);
}



/* Typography */

.h1,
h1 {
     color:  var(--ixn-color-primary);
}

.h2,
h2 {
    color: inherit;
    scroll-margin-top: var(--ixn-space-md);
}

.h3,
h3 {
    color: inherit;
}


.u--color--white {
    color:  var(--ixn-color-white);
}

/* blue */
.u--color--primary {
    color:  var(--ixn-color-primary);
}



/* Yellow */
.u--color--secondary {
    color:  var(--ixn-color-secondary);
}


/* Text selection */


::-moz-selection { 
    background: var(--ixn-color-primary--tint-10); 
    color: var(--ixn-color-primary); 
}

::selection { 
    background: var(--ixn-color-primary--tint-10); 
    color: var(--ixn-color-primary); 
}



/* Form field focus */

input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: 3px solid var(--ixn-color-primary--tint-20);
}

.header__logo {
	/* width: 180px;  */
}


.smr-container, .entry-content {
    background-color: #f7f7f7;
}

/* Front page hero */

.smr-hero-bg {
    border-top: 6px solid var(--ixn-color-secondary);
    background: url(../../assets/imgs/portada-tecuala-sm.jpg) no-repeat;
    background-size: cover;
    position: relative;
}   

    .smr-hero-backdrop {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .6);
    }

.smr-hero {
    padding-bottom: var(--ixn-space-lg);
    position: relative;
    z-index: 1;
}

    .smr-hero__header {
        background: var(--ixn-color-white);
        padding: var(--ixn-space-sm);
        padding-bottom: 16px;
        padding-top: var(--ixn-space-sm);
        padding-left: 34px;
        display: block;
        width: 358px;
        margin-left: 0;
        margin-bottom: var(--ixn-space-md);
        border-radius: 0 var(--ixn-border-radius) var(--ixn-border-radius) 0;
    }

    .smr-hero__body {
        background: none;
    }




/* Internal page */

.smr-hero-bg-two .smr-hero-backdrop {
    background-color: rgba(36, 192, 205, .6);        
}

.smr-hero-bg-two .smr-hero__header {
    margin-bottom: var(--ixn-space-md);
}

.smr-hero-bg-two .smr-hero {
    padding-bottom: var(--ixn-space-md);
}

/* Box  */

.smr-box-1 {
    background: var(--ixn-color-primary);
    border-radius: var(--ixn-border-radius);
    padding: var(--ixn-space-sm);
    color: var(--ixn-color-white);
}


/* Section bg */

.smr-section-bg {
}

    .smr-section-bg__in {
        padding: var(--ixn-space-sm);
        padding-bottom: var(--ixn-space-md);
        max-width: 550px;
        margin: 0px auto;
    }

.smr-section-bg--primary {
    background: var(--ixn-color-primary);
    color: var(--ixn-color-white);
}

.smr-section-bg--secondary {
    background: var(--ixn-color-secondary);
    color: var(--ixn-color-white);
}

/* Image with colored border */
.smr-picture--border {
    background: var(--ixn-color-secondary);
    padding: var(--ixn-space-xsm);
    text-align: center;
    border-radius: var(--ixn-border-radius);
}

/* Subnav */

.smr-subnav {
    display: block;
    border: 6px solid var(--ixn-color-primary) !important;
    padding: var(--ixn-space-xsm) var(--ixn-space-xsm);
}

.smr-subnav__item {
    font-weight: bold;
    display: block;
    text-decoration: none;
    border-radius: var(--ixn-border-radius);
    border: 2px solid var(--ixn-color-secondary) !important;
    padding: var(--ixn-space-xsm) var(--ixn-space-sm);
    margin-bottom: var(--ixn-space-xsm);;
}

    .smr-subnav__item:last-child {
        margin-bottom: 0;
    }

.smr-main {
    border: 6px solid var(--ixn-color-primary);
    padding: var(--ixn-space-sm);
}


/* Footer */
.footer-wrapper {
    border-bottom: 15px solid var(--ixn-color-secondary);
}

    .footer {
        padding-top: var(--ixn-space-sm);
        padding-bottom: var(--ixn-space-sm);
    }

    .m-flexbox-spaced {
        display: flex;
        justify-content: left;
        align-items: center;
        gap: var(--ixn-space-md);
    }

    .m-flexbox-spaced {
        flex-wrap: wrap;
    }

/* Btns theme  */

.btn--theme-light .btn__link { 
   background-color: var(--ixn-color-primary--tint-20); 
   color: var(--ixn-color-primary--tint-80);
}
   
   
/* Button to top  */

.btntop {
    font-family:  var(--ixn-type-secondary);
	background-color: var(--ixn-color-secondary--tint-80);
	color:  var(--ixn-color-primary--tint-90);
	border: 1px solid white;
    padding-top: 5px;
}

    .btntop svg {
        fill: var(--ixn-color-grey);
    }



/* Buttons  */

.btn,
.btn__link {
   border: none;
   background-color: var(--ixn-color-secondary);
   color: var(--ixn-color-grey);
   padding: var(--ixn-space-xxsm) var(--ixn-space-sm);
   font-weight: bold;
}

    body .btn:hover {
        background: var(--ixn-color-grey) !important;
        color: var(--ixn-color-secondary) !important; 
    }

/* Square button next to images */
.smr-img-btn {
    position: relative;
    display: inline-block;
    background: transparent;
}

.smr-img-btn .ixn-picture__default {
    opacity: .5;
}

    .smr-img-btn:hover {
        background: none;
    }

    .smr-img-btn:hover .ixn-picture__default {
        opacity: .3;
    }

.smr-btn-icon {
    text-decoration: none;
    display: inline-block;
    position: absolute;
    z-index: 2;
    right: -15px;
    bottom: -15px;
    width: 50px;
    height: 50px;
    background: var(--ixn-color-secondary);
    font-size: var(--ixn-font-size-h2);
    font-weight: bold;
    line-height: 50px;
    text-align: center;
}

    .smr-img-btn:hover .smr-btn-icon {
        background: var(--ixn-color-grey);
        color: var(--ixn-color-secondary);    
    }


.smr-img-btn--secondary .smr-btn-icon {
    background: var(--ixn-color-primary);
    color: var(--ixn-color-white);
}


/* WP Block shared styles ------------------------------ */

/* Lazyload placeholder graphic */

.ixn-gallery__img-wrapper,
.ixn-picture__picture,
.modal--fit-picture-size .c-gallery__picture,
.post__img {   
   background-color: var(--ixn-color-primary); 
   background-position: left top;
   background-repeat: no-repeat; 
   background-image: none;
   background-size: 100% 100%;
}


/* WP Block: Table ------------------------------ */




/* Optimize for 360 screen width, its a popular screen size */

@media only screen and (max-width: 399px) {

    h1, .h1 { font-size: 40pt; }

    .container__in,
    .smr-box-1,
    .smr-section-bg__in {
        padding-left: var(--ixn-space-xsm);
        padding-right: var(--ixn-space-xsm);
    }

    .smr-picture--border {
        padding-left: 0;
        padding-right: 0;
    }

    .smr-btn-icon {
        right: -6px;
    }

}



/* 
*  <edium sizes like tablets
*/

@media only screen and (min-width: 700px) {

    .entry-content {
        padding-top: 0;
    }

    h1, .h1 { font-size: var(--ixn-font-size-h1); }


    .smr-hero-bg {
        background: url(../../assets/imgs/portada-tecuala.jpg) no-repeat;
        background-position: center center;
        background-size: cover;
    }   

    .smr-hero {
        padding-bottom: var(--ixn-space-xlg);
    }

        .smr-hero__header {
            margin-bottom: var(--ixn-space-lg);
        }

        .smr-hero__body { text-align: center; width: 100%; }

    .smr-section-cta {
        text-align: center;
    }

    .smr-cols-cta.cols {
        grid-template-columns: 1fr;
        text-align: center;
        grid-row-gap: var(--ixn-space-xsm);
    }

        .smr-cols-cta.cols .cols__item {
            margin-bottom: var(--ixn-space-sm);
        }


    .m-flexbox-spaced {
        justify-content: center;
    }


}


/* 
*  Landscape tablets and small desktop
*/

@media only screen and (min-width: 1025px) {

    .smr-hero__body { text-align: center; width: 100% !important; }

    .smr-section-bg__in {
        max-width: 800px;
        align-items: center;
        text-align: left;
    }

    .smr-cols-cta.cols {
        grid-template-columns: 1fr 1fr;
        text-align: center;
        grid-row-gap: var(--ixn-space-xsm);
    }

    .footer { 
        padding-left: 0;
        padding-right: 0;
    }

    .m-flexbox-spaced {
        gap: 30px;
    }

    /* make box overflow a bit */
    .smr-box-1 {
        margin-left: -24px !important;
        width: calc(100% + 48px);
        padding: var(--ixn-space-md);
    }

}



@media only screen and (min-width: 1350px) {
    .footer.container__in {
        width: 1025px;
    }
}


/* PHP NOTE TO PUT FOOTER COPYRIGHT TEXT IN CMS */