/*
Theme Name: SSF Portfolio
Theme URI: 
Author: SSF
Author URI: 
Description: 
Requires at least: 7.1
Tested up to: 7.1
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ssf-portfolio
Tags: 
*/

/* navigation */
.headWrapInner {
    max-width: 1200px !important;
    margin: auto !important;
}
.navLg { display: none; }
.navSmWrap {margin-right: 2em !important; }
.navSm rect { height: 3px; }
.navSmWrap .wp-block-navigation__responsive-container-open svg {
    background-color: #4DC2BF;
    height: 28px;
    padding: 0 3px;
    border-radius: 5px
}
.navSm ul {
    width: 100%;
    text-align: center;
}
.navSm ul li {
    border-bottom: solid 1px #4DC2BF;
    display: block !important;
    width: 100%;
    padding-bottom: 10px;
}
.navSm button.wp-block-search__button {
    background-color: #4DC2BF;
}
:where(.wp-block-search__button-inside .wp-block-search__inside-wrapper) {
    border: none;
}
.navSm form {
    margin: auto;
}
@media (min-width: 768px) {
    .navSmWrap { display: none; }
    .navLg {
        display: flex;
        margin-right: 2em !important;
    }
    .menuWrapInner {
        height: 48px !important;
        max-width: 1200px;
        margin: auto !important;
    }
}
.wp-block-search__input::placeholder {
    color: #2F4858;
    opacity: 0.5;
}

/* Footer Alignment */
@media (max-width: 768px) {
  .aligned-grid-columns {
    max-width: 200px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
     /* Make the entire paragraph container behave like a block button */
.footerLink {
    padding: 0; /* Clear default paragraph padding so the link fills the edge */
}

/* Force the link to stretch horizontally and look like a button */
.footerLink a {
    display: block; /* Spans 100% width of the line */
    width: 100%;
    box-sizing: border-box; /* Ensures padding doesn't break the layout width */
}


/* =========================================================
Patterns
========================================================= */
 /* Scale details pattern */
.size-Pattern {
    max-width: 200px !important;
}

/* =========================================================
Firelight
========================================================= */
/* Make Firelight thumbnail caption non obscuring so it cannot block the image link */
.wp-block-gallery .wp-element-caption {
    pointer-events: none;
    background: linear-gradient(to top, #4DC2BF, transparent) !important;
    color: #2F4858 !important;
    -webkit-text-stroke: 0 !important;
    text-shadow:
        -1px -1px 0 #F2F2F2,
         1px -1px 0 #F2F2F2,
        -1px  1px 0 #F2F2F2,
         1px  1px 0 #F2F2F2 !important;
}


/* =========================================================
ERA FILTER - COMPLETE CSS
========================================================= */
.era-filter {
width: 100%;
}

/* =========================================================
OPTIONS CONTAINER
Desktop: 3 options per row
========================================================= */

.era-filter__options {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;

width: 100% !important;

margin: 0 !important;
padding: 0 !important;

row-gap: 4px !important;
column-gap: 10px !important;

justify-items: center !important;
align-items: start !important;

}

/* =========================================================
INDIVIDUAL OPTION
========================================================= */

.era-filter__option {
display: inline-block !important;

width: auto !important;

margin: 0 !important;
padding: 0 !important;

white-space: nowrap !important;

cursor: pointer !important;

}

/* =========================================================
CHECKBOX
========================================================= */

.era-filter__option input {
display: inline !important;

position: static !important;
float: none !important;

width: auto !important;
height: auto !important;

margin: 0 6px 0 0 !important;
padding: 0 !important;

}

/* =========================================================
CHECKBOX VERTICAL ALIGNMENT
========================================================= */

.era-filter__option input[type="checkbox"] {
position: relative !important;
top: 1px !important;
}

/* =========================================================
OPTION TEXT
========================================================= */

.era-filter__text {
display: inline !important;

margin: 0 !important;
padding: 0 !important;

white-space: nowrap !important;

}

/* =========================================================
TABLET
2 options per row
========================================================= */

@media (max-width: 900px) {

.era-filter__options {
    grid-template-columns: repeat(2, 1fr) !important;
}

}

/* =========================================================
MOBILE
1 option per row
========================================================= */

@media (max-width: 600px) {

.era-filter__options {
    grid-template-columns: 1fr !important;
}

}

/* =========================================================
RESULTS LOADING
========================================================= */

.era-filter-results {
transition: opacity 0.2s ease;
}

.era-filter-results--loading {
opacity: 0.45 !important;
pointer-events: none;
}