/*Custom Landing Pages Global CSS - Phase 2*/

:root {
   --color-lightblue: #18BCEE;
    --color-darkblue: #004E8F;
    --color-verydarkblue: #00396A;
    --color-white: #ffffff;
    --color-mediumblue: #008BFF;
    --color-darkmediumblue: #0073D1;
    --color-bluegray:#81A4CD;
    --color-verylightblue: #cfe5f7;
    --color-cream:#F7F7F7;
    --color-black: #000000;
    --color-gray: #77787b;
    --color-blackgray:#444F58;
    --color-darkblack:#383838;
}


/*Original Styles*/

/* Box sizing rules */
.custom-mizuho-block *,
.custom-mizuho-block *::before,
.custom-mizuho-block *::after {
    box-sizing: border-box;
}

/* Remove default margin */
.custom-mizuho-block body,
.custom-mizuho-block h1,
.custom-mizuho-block h2,
.custom-mizuho-block h3,
.custom-mizuho-block h4,
.custom-mizuho-block p,
.custom-mizuho-block figure,
.custom-mizuho-block blockquote,
.custom-mizuho-block dl,
.custom-mizuho-block dd {
    margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
.custom-mizuho-block ul[role=list],
.custom-mizuho-block ol[role=list] {
    list-style: none;
}

/* Make images easier to work with */
.custom-mizuho-block img,
.custom-mizuho-block picture {
    max-height: 100%;
    max-width: 100%;
    display: block;
}

/* Inherit fonts for inputs and buttons */
.custom-mizuho-block input,
.custom-mizuho-block button,
.custom-mizuho-block textarea,
.custom-mizuho-block select {
    font: inherit;
}





/*Custom Global Styles*/


/*Custom Landing Typography Styles*/
.custom-mizuho-block-page .site-main {
    font-size: 16px;
}

.custom-mizuho-block h1, .has-gutenberg-blocks .site-main h1 {
   font-size: clamp(1.3rem, 1.5rem + 1.5vw, 2.7rem);
    color: var(--color-black);
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 15px;
    line-height: 1.2;
}



.custom-mizuho-block h2, .has-gutenberg-blocks .site-main h2 {
    font-size: clamp(1.1rem, 0.8rem + 1.5vw, 1.875rem);
    color: var(--color-darkblue);
    font-weight: 700;
    margin-bottom: 15px;
    margin-top: 15px;
    line-height: 1.2;
}


.custom-mizuho-block h3, .has-gutenberg-blocks .site-main h3 {
    font-size: clamp(1.2rem, 0.6rem + 1vw, 1.4rem);
    color: var(--color-darkblue);
    line-height: 1.3;
    font-weight: 700;
    margin-bottom: 15px;
}


.custom-mizuho-block h4, .has-gutenberg-blocks .site-main h4 {
    font-size: clamp(1.1rem, 0.5rem + 1vw, 1.3rem);
    color: var(--color-darkblue);
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 700;
}

 .custom-mizuho-block h5, .has-gutenberg-blocks .site-main h5 {
    font-size: clamp(1.1rem, 0.5rem + 1vw, 1.3rem);
    color: var(--color-darkblue);
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 700;
}

.custom-mizuho-block h6, .has-gutenberg-blocks .site-main h6 {
    font-size: clamp(1.1rem, 0.5rem + 1vw, 1.3rem);
    color: var(--color-darkblue);
    margin-bottom: 20px;
    line-height: 1.3;
    font-weight: 700;
}


.custom-mizuho-block p, .has-gutenberg-blocks .site-main p {
    font-size: clamp(1.1rem, 0.6rem + 1vw, 1.3rem);
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 15px;
    color: var(--color-black);
}

.custom-mizuho-block li, .has-gutenberg-blocks .site-main li {
    font-size: clamp(1.1rem, 0.6rem + 1vw, 1.3rem);
    line-height: 1.5;
    font-weight: 400;
}


.custom-mizuho-block ol, .has-gutenberg-blocks .site-main ol, .custom-mizuho-block ul, .has-gutenberg-blocks .site-main ul {
   margin-bottom:15px;
}

.custom-mizuho-block button, .custom-mizuho-block blockquote footer, .custom-mizuho-block blockquote, .custom-mizuho-block a, .has-gutenberg-blocks .wp-block-group a {
     font-weight: 400;
}

/*Tiny Text*/
.custom-mizuho-block .tiny-text {
    font-size: .9rem;
}


/*Custom Full Width class*/
.custom-mizuho-block-full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}


/*Blockquote - Reset & Override theme styles*/
.custom-mizuho-block blockquote footer {
    background-color: transparent;
    padding:0;
}



/*Readmore Arrow Icon*/
.custom-mizuho-block .read-more-btn .arrow {
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' viewBox='0 0 51.83 55.21'%3E%3C!-- Generator: Adobe Illustrator 30.0.0, SVG Export Plug-In . SVG Version: 2.1.1 Build 123) --%3E%3Cdefs%3E%3Cstyle%3E .st0 %7B fill: url(%23linear-gradient2); %7D .st1 %7B fill: url(%23linear-gradient1); %7D .st2 %7B fill: url(%23linear-gradient); %7D %3C/style%3E%3ClinearGradient id='linear-gradient' x1='-2547.1' y1='3566.54' x2='-2535.9' y2='3566.54' gradientTransform='translate(3590.55 2574.51) rotate(90)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231bbcef'/%3E%3Cstop offset='1' stop-color='%23009ad5'/%3E%3C/linearGradient%3E%3ClinearGradient id='linear-gradient1' x1='-2556.26' y1='3566.45' x2='-2544.88' y2='3566.45' xlink:href='%23linear-gradient'/%3E%3ClinearGradient id='linear-gradient2' x1='-2565' y1='3566.52' x2='-2528.2' y2='3566.52' xlink:href='%23linear-gradient'/%3E%3C/defs%3E%3Cg%3E%3Cpath class='st2' d='M14.98,30.3c.11-.15.18-.27.28-.37.74-.73,1.5-1.45,2.23-2.19.43-.43.73-.23,1.08.11,1.5,1.45,3.05,2.85,4.52,4.32.61.61.99.69,1.63.03,1.46-1.49,3.03-2.87,4.5-4.34.59-.59,1.04-.61,1.61-.02.6.62,1.24,1.2,1.9,1.76.45.38.4.65,0,1.03-2.67,2.51-5.35,5.02-7.98,7.56-.58.56-.96.53-1.51,0-2.62-2.51-5.26-5-7.89-7.5-.12-.12-.23-.26-.36-.41Z'/%3E%3Cpath class='st1' d='M23.99,29.63c-.22-.17-.43-.31-.61-.47-2.64-2.49-5.27-5-7.92-7.48-.46-.43-.43-.71.03-1.11.63-.53,1.24-1.11,1.79-1.72.49-.54.83-.58,1.37-.04,1.47,1.47,3.05,2.85,4.51,4.33.62.62.98.54,1.56-.03,1.53-1.52,3.14-2.96,4.67-4.48.51-.5.86-.48,1.34,0,.66.66,1.36,1.28,2.07,1.89.36.31.38.56.04.88-2.8,2.64-5.59,5.29-8.39,7.93-.12.12-.29.2-.46.31Z'/%3E%3C/g%3E%3Cpath class='st0' d='M5.63,27.91c0-10.15,8.26-18.4,18.4-18.4s18.4,8.26,18.4,18.4-8.26,18.4-18.4,18.4S5.63,38.06,5.63,27.91ZM41.79,27.91c0-9.79-7.97-17.76-17.76-17.76S6.27,18.12,6.27,27.91s7.97,17.76,17.76,17.76,17.76-7.97,17.76-17.76Z'/%3E%3C/svg%3E");
    width: 55px;
    height: 55px;
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.3s ease;
    display: inline-block;
    vertical-align: middle;
    transform: rotate(0deg);
    background-position: 5px 0px;


}


/* Rotate arrow when readmore button is expanded */
.custom-mizuho-block .read-more-btn[aria-expanded="true"] .arrow {
    transform: rotate(180deg);
}


/*Read More Button*/
.custom-mizuho-block .read-more-btn {
    cursor: pointer;
    border: none;
    background: none;
    color: var(--color-lightblue);
}

.custom-mizuho-block .read-more-btn span.btn-text:hover {
    text-decoration: underline;
}

.custom-mizuho-block .downarrow {
    font-size: 20px;
    vertical-align: 3px;
}

.custom-mizuho-block .uparrow {
    vertical-align: -5px;
}

.custom-mizuho-block .read-more-btn {
    position: relative;

}



/*Block Editor Button Variations*/

.wp-element-button {
	 margin: 15px 0;
}

/*Default Mizuho Theme Button Styles (and fill style)*/
.wp-block-button.is-style-fill .wp-block-button__link, .wp-block-button .wp-block-button__link {
    background-color: var(--color-darkmediumblue);
    font-weight: bold;
    border-radius: 10px;
    min-width: 180px;
    color: #fff !important;
    margin: 15px 0;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover, 
.wp-block-button .wp-block-button__link:hover, 
.wp-block-button .wp-block-button__link:focus, 
.wp-block-button .wp-block-button__link:active,
.wp-block-button.is-style-fill .wp-block-button__link:focus,
.wp-block-button.is-style-fill .wp-block-button__link:active {
    background-color: var(--color-mediumblue)!important;
}

 /*Border Button - Dark blue with light blue border*/
 .is-style-borderbutton .wp-block-button__link {
     background-color: var(--color-darkblue);
     border: solid 5px var(--color-lightblue);
     border-radius: 15px;
     padding: 11px 15px 11px 15px;
     color: var(--color-white) !important;
     /*overriding default wp-element-button style if added in editor*/
     text-transform: uppercase;
     font-weight: 700 !important;
     /*overriding default custom mizuho block style if added in editor*/
     font-family: 'HelveticaNeueLTstd', Arial, sans-serif;
     text-decoration: none;
     font-size: clamp(1.1rem, 0.6rem + 1vw, 1.3rem);

 }


 .is-style-borderbutton .wp-block-button__link:hover,
 .is-style-borderbutton .wp-block-button__link:focus,
 .is-style-borderbutton .wp-block-button__link:active {
     color: var(--color-white);
     background-color: var(--color-lightblue) !important;
     /*overriding theme style*/
     border: solid 5px var(--color-darkblue) !important;
     /*overriding theme style*/
 }



 /*Border White on Hover Button - Dark blue with light blue border, on hover border is white*/
.is-style-borderwhitebutton .wp-block-button__link {
    background-color: var(--color-darkblue);
    border: solid 5px var(--color-lightblue);
    border-radius: 15px;
    padding: 11px 15px 11px 15px;
    color: var(--color-white) !important;
    /*overriding default wp-element-button style if added in editor*/
    text-transform: uppercase;
    font-weight: 700 !important;
    /*overriding default custom mizuho block style if added in editor*/
    font-family: 'HelveticaNeueLTstd', Arial, sans-serif;
    text-decoration: none;
    font-size: clamp(1.1rem, 0.6rem + 1vw, 1.3rem);

}

.is-style-borderwhitebutton .wp-block-button__link:hover, .is-style-borderwhitebutton .wp-block-button__link:focus, .is-style-borderwhitebutton .wp-block-button__link:active {
    color: var(--color-white);
    background-color: var(--color-lightblue) !important;
    /*overriding theme style*/
    border: solid 5px var(--color-white) !important;
    /*overriding theme style*/
}



 /*Border White - Dark blue border on hover, white text */
.is-style-borderwhitetextbutton .wp-block-button__link {
    background-color: var(--color-darkblue);
    border: solid 5px var(--color-white);
    border-radius: 15px;
    padding: 11px 15px 11px 15px;
    color: var(--color-white) !important;
    /*overriding default wp-element-button style if added in editor*/
    text-transform: uppercase;
    font-weight: 700 !important;
    /*overriding default custom mizuho block style if added in editor*/
    font-family: 'HelveticaNeueLTstd', Arial, sans-serif;
    text-decoration: none;
    font-size: clamp(1.1rem, 0.6rem + 1vw, 1.3rem);

}

.is-style-borderwhitetextbutton .wp-block-button__link:hover, .is-style-borderwhitetextbutton .wp-block-button__link:focus, .is-style-borderwhitetextbutton .wp-block-button__link:active {
    color: var(--color-white);
    background-color: var(--color-lightblue) !important;
    /*overriding theme style*/
    border: solid 5px var(--color-darkblue) !important;
    /*overriding theme style*/
}





/*Bullet point list*/

/*For gutenberg wp blocks*/
.has-gutenberg-blocks .site-main .wp-block-list li:before {
    position: static;
    line-height: 1.3;
	margin:0;
	padding: 0 6px 6px 0;
}

/*For custom ul / li*/
.has-gutenberg-blocks .site-main ul.wp-block-list, .has-gutenberg-blocks .custom-mizuho-block ul  {
 	list-style-type: disc !important;
 	padding-left: 1.2em !important;
 	margin-left: 0 !important;
}

.has-gutenberg-blocks .site-main .wp-block-list li, .has-gutenberg-blocks .custom-mizuho-block li {
 	list-style-position: outside;
    padding-bottom: 15px;
}

.has-gutenberg-blocks .site-main .wp-block-list li::marker, .has-gutenberg-blocks .custom-mizuho-block li::marker  {
 	font-size: 1.3em;
}

.has-gutenberg-blocks .site-main ol.wp-block-list li::marker, .has-gutenberg-blocks .custom-mizuho-block ol li::marker  {
 	font-size: 1em;
}

.has-gutenberg-blocks .site-main ul.wp-block-list li::before, .has-gutenberg-blocks .custom-mizuho-block ul li::before  {
    display:none;
}


/*Prevent horizontal scroll*/
.has-gutenberg-blocks .site-main {
    overflow-x: hidden;
}

.has-gutenberg-blocks .site-main .wp-block-button__link {
    height:auto;
}