/*
Theme Name: iddo
Description: A theme built on blankslate 2021; mobile styles
ioblankslate WordPress Theme © 2022 Imaginary Office
*/

/* MEDIA QUERIES */


@media screen and (max-width: 1200px){
    
    #iddo-logo-primary { max-width: 450px; }
    
    header .top-links .row-items { 
        padding: 0 30px!important;
    } 
    .home-banner .overlay-text { 
        padding: 30px!important;
    } 
    
    header .row-logo,
    footer .wp-block-group.inner,
    /* add side padding to Post full width banner blocks */
    .lp-banner-fullwidth .wp-block-columns,
    /* add side padding to LP full width blocks */
    .page-template-landing-page section.wp-block-group.alignfull    {
        padding-left:30px;
        padding-right:30px;
    }

    /* do not add padding to Home and LP full-width banners and alignfull promos */
    .home main,
    header.lp-banner-jump,
    header.lp-banner-tall,
    aside.prefooter-contact {
        padding:0!important;
    }
    
    .archive .lp-banner-fullwidth .wp-block-columns {
        padding-right:60px;
    }
    
    /* remove max-width 1200 and 1000 and add side padding */
    .print-share-container,
    .single article .entry-content,
    
    .page-template-landing-page .entry-content section.wp-block-group.is-layout-constrained,
    .page-template-wp-custom-template-language-template .entry-content section.wp-block-group.is-layout-constrained,

    .page-template-wp-custom-template-page-w-footer-no-rv article .wp-block-group.is-layout-constrained,

    .error404 article.wp-block-group.is-layout-constrained,
    .archive article section.wp-block-group.is-layout-constrained .wp-block-query,
    .accordion,

    .page-template-default article ,
    .search-results article,
    
    .home section.wp-block-group.alignfull

    {
        max-width:none!important; 
        padding-left:30px!important;
        padding-right:30px!important;
    }
    
}


@media screen and (max-width: 1024px){
    
    .css-logo {position:relative; padding-bottom: 12px; }
    
    /* .css-logo-row { justify-content: flex-start; } */
    
    #iddo-logo-primary { max-width: 420px; }
    
    .lp-banner-tall .banner-layout {flex-wrap:wrap!important; gap:0;}
    
    .lp-banner-tall .banner-layout .banner-text {
        position:relative; z-index:auto; left:0; margin-left:0;
        /* min-height:500px;  */
        min-height:300px;
        width:100%;}
        .lp-banner-tall .banner-layout .wp-block-cover {width:100%;}
        /* .lp-banner-tall .banner-layout .wp-block-cover { height: 400px; } */
        
        .icon-contact, .icon-laptop, .category-news figure { max-width: 120px; }
        
        /* .prefooter-contact { padding: 0 !important; } */
        
        .prefooter-contact p, .prefooter-contact .wp-block-buttons { font-size: 1.5rem !important; }
        
        /* about */
        
        /* 16:9 aspect ratio */
        /* .lp-banner-jump .wp-block-cover { min-height: 56.25vw !important;  } */
        /* .lp-banner-jump .wp-block-columns {flex-direction:column!important;}
        .lp-banner-jump .wp-block-columns .wp-block-column {flex-basis:100%!important; flex-grow:1!important;}
        .lp-banner-jump .banner-text {min-height:auto!important; padding:40px!important;} */
        
        /* jump links bar */
        .jump-links-bar ul.wp-block-list li, .lp-banner-jump .jump-links-bar h2 { display: block; text-align: center; height: 40px; }
        
        .jump-links-bar ul.wp-block-list li a:hover { border: none !important; text-decoration: underline;}
        #jump-links-list { width: 100%; padding: 0; }
        
        #jump-links-row { flex-direction: column; }
        
        #jump-links-list[hidden] {
            display: none;
        }
        
        .jump-links-toggle {
            cursor: pointer;
            position: relative;
        }
        
        .lp-banner-jump .jump-links-toggle::after {
            content: "\f078";padding-left: 12px; font-family: "Font Awesome 5 Free"; font-weight: 900;
            transition: transform 0.3s ease;
        }
        
        .jump-links-toggle[aria-expanded="true"]::after {
            /* transform: rotate(180deg); /* Optional: flip chevron up */
        }
        
        #jump-links-list[hidden] {
            display: none;
        }
        
    }
    
    
    @media screen and (max-width: 781px){
        
        
        .mobile-only { display: block; }
        .hide-on-mobile { display: none; }
        .menu-mobile { display: block; font-weight: 500 !important;
            padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40);
            line-height:1.5;}
        .menu-main { display: none !important; }
        .top-links .row-items {align-items:center; flex-wrap:nowrap;}
        ul.contact-links {text-align:left;}
        
        #language-list ul {
            margin-left: 0;
            padding-left: 0;
        }
        
        #language-list {
            position: relative;
            z-index: 999999; 
            background: var(--cyan-dark) !important;
            padding: 1rem;
            width: 100vw !important;
            margin-left: -15px;
            padding-left: 43px;
        }
        
        #language-list li {
            padding-left: 0 !important; 
            padding-top: 6px !important;
            padding-bottom: 6px !important;
            
        }
        
        #language-list li a {
            padding-left: 0;
            font-size: 1.5rem;
            
        }
        
        #mobile-language-controller { width: 100% !important; }
        
        #language-list h2 {
            font-size: 1.5rem; 
            margin-bottom: 24px;
            margin-top: 24px;
            text-align: left !important;
        }
        
        .wp-block-navigation__responsive-container.is-menu-open #language-list {
            background: transparent;
        }
        
        .wp-block-navigation__responsive-container.is-menu-open #language-list li {
            display: block;
            text-align: left;
            margin-bottom:12px;
        }
        
        .wp-block-navigation__responsive-container.is-menu-open #language-list li a {
            margin-left: 0;
            padding-left: 0 !important;
            color: white;
            
        }
        
        
        .prefooter-contact .wp-block-cover { min-height: 300px !important; }
        
        .prefooter-contact .column-text { border: none !important; }
        
        .prefooter-contact .column-image { border-image: linear-gradient(to right, var(--orange-dark) 50%, transparent 50%) 100% 1; }
        
        .prefooter-contact .contact-buttons-big { width: 100%; }
        
        footer .fineprint { flex-direction: column; align-items: flex-start; }
        
        
        ul.contact-links .email {
            display: none;
        }
        
        .menu-mobile li a  { padding-left: 28px !important; }
        .menu-mobile button .telephone a { padding-left: 28px !important; }
        .menu-mobile .wp-block-button__link { padding-left: 28px !important; font-size: 1.5rem;  }
        
        .top-links {
            background: var(--cyan);
            color: white;  
            align-items: stretch !important;
        }
        .top-links .row-items {
            padding-left: 0 !important;
            padding-right: 20px !important;
        }
        .menu-mobile .telephone { display: block !important; }
        
        .top-links a {
            color: white;
        }
        
        .top-links button.lang-picker {
            display: none;
        }
        
        button.wp-block-navigation__responsive-container-open,
        button.wp-block-navigation__responsive-container-close {
            font-weight: 500 !important;
            font-size: 1rem !important;
        }
        
        button.wp-block-navigation__responsive-container-close {
            align-items: flex-start;
        }
        
        .wp-block-navigation__responsive-container-close {
            left: 0 !important;
            right: auto !important;
            padding-top: 8px;
        }
        
        button.wp-block-navigation__responsive-container-close:before {
            content:"\f060";
            font-family: 'Font Awesome 6 Free';
            font-style: normal;
            font-size:1.25rem;
            font-weight: 900;
            margin-right:10px;
            color:white;
        }
        
        button.wp-block-navigation__responsive-container-open:after {
            content:"\f061";
            font-family: 'Font Awesome 6 Free';
            font-style: normal;
            font-size:1.25rem;
            font-weight: 900;
            margin-left:10px;
            color:white;
        }
        
        #mobile-lang-list {
            background: var(--cyan-dark) !important;
            width: 100vw !important;
            margin-left: -20px;
            padding: 30px 0;
            
        }
        
        #mobile-lang-list li a {
            margin-bottom: 16px; 
            font-weight: 500 !important;
            font-size: 1.25rem;
        }
        
        .telephone a {
            padding-right: 0 !important;
            width: 100%;
            text-align: left;
            font-size: 24px;
        }
        
        .row-logo {
            padding-left: 20px !important; 
        }
        
        nav .wp-block-navigation-link a.wp-block-navigation-item__content, nav .wp-block-navigation-link a.wp-block-navigation-item__content:hover {
            border-bottom: none;
        }
        
        /*about */
        .single-story figure {
            width: 120px;
            height: 120px;
        }
        
        #stories .single-story {
            padding-right: 0;
            padding-left: 0;
        }
        
        
        .single-story blockquote{
            width: 95%;
            padding: 100px 30px 30px 30px !important;
        }
        
        .region-group { 
            padding-right: 0;
            padding-left: 0;
        }
        
        
        /* home */
        
        .home-banner {
            background-size: 100% auto !important;
            background-repeat: no-repeat;
            background-position: top center !important;
            background-color:#d4e8f2;
        }
        .home-banner h2 {
            font-size: 3.5rem !important;
            line-height: 4rem;
        }
        
        .home-banner .overlay-text {
            background: transparent !important;
            width: 100%; 
            justify-content: flex-start;
            /* to accommodate 16:9 image above text block */
            /* margin-top: 56.25vw;   */
            padding-top: 56.25vw!important;
            
        }
        
        .home-banner .overlay-text h2,  .home-banner .overlay-text h3,  .home-banner .overlay-text p {
            color: black !important;
        }
        
        /* landing page */
        .page-template-wp-custom-template-language-template .banner-text, 
        .page-template-landing-page .banner-text {
            min-height: auto !important;
            padding: 40px !important;
        }
        
        .lp-banner-short .wp-block-columns {
            padding: 40px !important;
            gap: 10px !important;
        }
        
        .get-help-lang-buttons {
            padding-left:30px!important;
            padding-right:30px!important;
        }
        
        .lp-banner-tall .banner-layout .wp-block-cover { height: 300px; }
        
        /* resources */
        
        .category-list-with-icons li a {
            padding: 30px;
        }
        
        /* category */
        
        .archive.category .column-with-image { width: 200px; }
        
        .cat-icon {         
            top: calc(50% - 100px);
            right: calc(50% - 100px);
            font-size: 2.5rem;
            width: 70px;
            height: 70px;
        }
        
        
        /* patterns */
        
        .contact-buttons-big {
            flex-direction: column;
            width: 100%;
        }
        
        .contact-buttons-big .wp-block-button { 
            width: 90%;
        }
        
        /* .wp-block-buttons.is-content-justification-center {
            width: 100%;
        } */
        
        .prefooter-glossary figure {
            width: 150px;
            padding-top: 40px;
            align-items: center;
            margin-left: calc(50% - 75px);
        }
        
        .single .lp-banner-fullwidth {padding: 0 30px;}
        .single .lp-banner-fullwidth figure { box-shadow:none; }

        .single .lp-banner-fullwidth .wp-block-columns {padding:0;}

        .wp-block-search__inside-wrapper {width:100%!important;}
        
    }
    
    
    @media (max-width: 600px) {
        
        header .wp-block-spacer { height: 0 !important; }
        
        .has-large-font-size {
            font-size: 1.5rem !important;
        }
        
        #iddo-logo-primary {
            display: none;
        }
        
        #iddo-logo-mobile {
            display: block;
            width: 100%;
            padding-bottom: 28px;
        }
        
        .row-logo {
            padding-bottom: 0px !important;
        }
        
        .row-logo div { gap: 0; }
        header .top-links {
            padding-right: 10px !important;
        }
        
        
        html {
            font-size: 14px;
        }
        
        p { font-size: 1rem; }
        
        /* header */
        
        .top-links .row-items {
            padding-right: 0px !important;
        }
        
        /* get help buttons */
        
        /* .has-global-padding > .alignfull {
        padding: 30px !important;
        } */
        
        
        /* patterns */
        
        
        
        .get-help-lang-buttons {
            padding-top: 20px !important;
        }
        
        .get-help-lang-buttons h2 { text-align: center !important;}
        
        .get-help-lang-buttons figure {
            position: relative;
            right: calc(50% - 50px);
            top: auto;
            width: 100px;
        }
        .get-help-lang-buttons #language-list ul li {
            width:100%!important;
            display:flex;
        }
        /* footer */
        ul.footer-links {
            display: flex;
            flex-direction: column;
        }
         ul.footer-links li {
            padding-top:10px;
            padding-bottom:10px;
        }

        .related-articles ul.columns-3 {
                columns:2!important;
                -webkit-columns: 2!important;
                -moz-columns: 2!important;
            }
        
    }
    
    
    @media (min-width: 600px) {
        /* Keep hiding the expanded menu */
        .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
            display: none;
        }
        
        /* Keep showing the button to open the menu */
        .wp-block-navigation__responsive-container-open:not(.always-shown) {
            display: flex;
        }

        section.related-articles.wp-block-group.is-layout-constrained {
            padding-left:0!important; padding-right:0!important;
        }
    }
    
    
    
    /* Apply core styles at custom breakpoint */
    
    @media (min-width: 781px) {
        /* Show the expanded menu */
        .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
            display: block;
        }
        
        /* Hide the button to open the menu */
        .wp-block-navigation__responsive-container-open:not(.always-shown) {
            display: none;
        }
    }
    
    @media screen and (min-width: 1920px){
    .home-banner {background-position:top center !important;}
    }
    
    @media print {
        
        html , body {  font-size: 12px; color: black !important; line-height: 1.75;}
        .donotprint { display: none !important; }
        .printonly { display: block; }
        
        .has-white-color,
        .has-text-color { color: black !important; }
        
        .wp-block-cover img, img {
            page-break-inside: avoid;
            break-inside: avoid;
            display: block;
            max-width: 100%;
        }
        header {margin-bottom:100px;}
        header.wp-block-group { margin-bottom: 30px !important; }
        
        /* Reset margins and padding for all blocks */
        .wp-block,
        .wp-block-group,
        .wp-block-columns,
        .wp-block-column,
        .wp-block-paragraph,
        .wp-block-image,
        .wp-block-cover,
        .wp-block-video,
        .wp-block-embed,
        .entry-content,
        .site-content,
        body {
            margin: 0 !important;
            padding: 0 !important;
            box-sizing: border-box;
        }
        
        /* Make all containers full width */
        .wp-block,
        .wp-block-group,
        .wp-block-columns,
        .entry-content {
            width: 100% !important;
            max-width: 100% !important;
        }
        
        /* Force consistent alignment */
        .wp-block,
        .wp-block-group,
        .entry-content > * {
            text-align: left !important;
        }
        
        /* Remove Gutenberg editor margins */
        .has-global-padding,
        .is-layout-constrained {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }
        
        /* Remove any centered layouts */
        .aligncenter,
        .is-layout-flex,
        [class*="align"],
        .wp-block-image,
        figure {
            margin-left: 0 !important;
            margin-right: 0 !important;
            text-align: left !important;
        }
        
        
        /* set gap to zero to improve vertical spacing */
        
        .wp-block,
        .wp-block-group,
        .wp-block-columns,
        .wp-block-column,
        .is-layout-flex,
        .is-layout-grid,
        .is-layout-flow {
            gap: 0 !important;
            row-gap: 0 !important;
            column-gap: 0 !important;
        }
        
        
        /* clear top and bottom padding and margins */
        
        .top-announcement,
        .has-global-padding > .alignfull,
        {
            padding: 0 !important;
            margin: 0 !important;
        }
        
        
        
        /* do not print */
        
        .top-links,
        nav,
        .print-share-container,
        .back-link,
        .single .lp-banner-fullwidth figure,
        .glossary-promo,
        .wp-block-post-featured-image,
        button.close,
        .fineprint,
        iframe,
        .a11y-toolbar,
        .responsivevoice-button,
        .jump-links-bar,
        .get-help-lang-buttons,
        .lp-banner-short figure,
        .lp-banner-fullwidth figure,
        .lp-banner-fullwidth .cat-icon,
        .wp-block-read-more,
        .related-articles,
        aside .wp-font-awesome-icon,
        .wp-block-spacer
        { display: none !important; }
        
        /*show urls after the link*/
        p a:after, h3 a:after {
            content: " (" attr(href) ")";
            font-size: 80%;
        }
        p a, h3 a {
            word-wrap: break-word;
        }
        

        /* adjust styles for print */
        
        .is-content-justification-center, .wp-block-buttons.is-content-justification-center { align-items: flex-start; justify-content: left; }
        
        .wp-block-button .wp-block-button__link { padding: 0 !important; color: black !important; background: transparent !important; text-align: left; }
        .contact-buttons-big { margin-top: 10px !important; margin-bottom: 10px !important; }
        .wp-block-column { border: 0 !important; }
        .wp-block-spacer { display: none; }
        
        #iddo-logo-primary { width: 300px; }
        
        /* banners */
        .home-banner { height: 300px; margin-bottom: 50px !important;  }
        .banner-text { min-height: auto !important; padding: 0 !important; background: transparent !important; }
        .banner-layout { height: auto; }
        .home-banner, .home-banner .overlay-text, .home-banner div { width: 100%; padding: 0; margin: 0; justify-content: flex-start; }
        .page-template-landing-page .banner-text { min-height:fit-content; }
        
        .lp-banner-jump .wp-block-cover { min-height: 500px !important; } /* about photo */
        .lp-banner-tall .banner-layout .wp-block-cover { height: 400px !important; }
        .lp-banner-tall .banner-layout::after { background: none !important; } /* no borders */
        .lp-banner-tall .banner-layout .banner-text { padding: 10px !important; margin-left: 0 !important; min-height: auto; background-color: transparent !important;}
        
        .single-story.has-global-padding.is-layout-constrained { margin: 10px 0 !important; }
        .single-story figure { position: absolute; z-index: 10; width: 130px; height: 130px; top: 0; left: 0; }
        .single-story blockquote { width: calc(100% - 150px); padding: 10px !important; background: none !important; margin-block-start: 0; }
        
        
        h2 { margin: 30px 0 !important; }
        
        #our-network img { width: 70%;} 
        
        .wp-block-cover .wp-block-cover__image-background { object-fit: cover;  margin: 30px 0; }
        
        .wp-block-details #details-content,
        .wp-block-details #details-summary,
        .wp-block-details { display: block !important; content-visibility: visible !important;} /* not working */
        
        details[open],
        details:not([open]) {
            /* force all to appear open */
            open: true;
        }
        
        /* resources and posts */

        .category-list-with-icons li a {padding:0;}

        aside.wp-block-group {margin:50px 0!important; border:none;}
        .prefooter-contact,
        aside .wp-block-column.column-text .wp-block-group {min-height:0!important;}

        .single .lp-banner-fullwidth {height:fit-content; border-bottom-width:0;}
        /* .single .wp-block-columns {border: 1px solid black;} */
        .single .lp-banner-fullwidth .wp-block-columns {border:none;}
        .single .wp-block-spacer {height:0;}
        
        footer.wp-block-template-part p {color:#000000;}
        footer.wp-block-template-part .wp-block-group { background-color:transparent!important;}
        
        .wp-caption {display:block;float:none;}
        .print-header {display:block;width:100%;height:auto;font-size:1rem;}
        .print-header img {width:200px;height:auto;}
        
        /* prefooters */
        
        .prefooter-contact img { display: none !important; height: auto !important; }
        .prefooter-contact { min-height: auto !important; border: 0 !important; background: none !important; }
        .prefooter-contact .wp-block-cover { display: none; }
        
        .prefooter-glossary figure {
            width: 150px;
            padding-top: 40px;
            align-items: center;
            margin-left: calc(50% - 75px);
        }
        
        .prefooter-glossary .wp-block-group { min-height: auto !important; gap: 0; }
        
        .button-glossary { display: none !important; }
        
        /* resources */
        .icon-contact, .icon-laptop { max-width: 120px; }
        
        /* youtube video */
        
        .wp-block-embed-youtube,
        .wp-block-embed__wrapper,
        iframe[src*="youtube.com/embed"] {
            display: none !important;
        }
        
        .youtube-thumbnail-print-wrapper {
            display: block !important;
            page-break-inside: avoid;
        }
        
        .youtube-thumbnail-print {
            display: block !important;
        }
        
        .youtube-print-link {
            display: block;
        }
        
        .youtube-print-link::after {
            content: " (" attr(href) ")";
            font-size: 12px;
            color: black;
            word-break: break-all;
            display: block;
            margin-top: 0.2em;
        }
    }