/*************************************/
/* STYLES for DR. MARY FIASCHETTI    */
/*************************************/


/* NON STANDARD FONTS ****************/

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&display=swap');

.playfair {
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

@font-face {
    font-family: 'AcidGrotesk';
    src: url(../font/FFF-AcidGrotesk-Normal-TRIAL.otf);
    font-weight: normal;
}

@font-face {
    font-family: 'AcidGrotesk';
    src: url(../font/FFF-AcidGrotesk-Medium-TRIAL.otf);
    font-weight: 500;
}

@font-face {
    font-family: 'AcidGrotesk';
    src: url(../font/FFF-AcidGrotesk-Bold-TRIAL.otf);
    font-weight: bold;
}


/* VARIABLES *************************/

:root {
    --black:      #292929;
    --gray:       #F5F4E4;
    --white:      #FFFFFF;
    --red:        #F63F3C;
    --light-red:  #FDD6D5;
    --dark-red:   #C2312F;
    --blue:       #235DD1;
    --light-blue: #B9CCF3;
    --dark-blue:  #1B479E;

    --max-width:      calc(var(--font-size-base) * 80);

    --font-size-base: 1em;
    --column-min-width: 20em;
    --outline-width: 2px;

    --xs-gap:         calc(var(--font-size-base) * 0.8);
    --s-gap:          calc(var(--font-size-base) * 1);
    --base-gap:       calc(var(--font-size-base) * 1.5);
    --l-gap:          calc(var(--font-size-base) * 2);
    --xl-gap:         calc(var(--font-size-base) * 5);
    --xxl-gap:        calc(var(--font-size-base) * 7);

    --full-radius:    999em;
    --s-radius:       calc(var(--font-size-base) * 1);
    --base-radius:    calc(var(--font-size-base) * 1.5);
    --l-radius:       calc(var(--font-size-base) * 2);
    --xl-radius:      calc(var(--font-size-base) * 4);

    --s-size:         calc(var(--font-size-base) * 0.8);
    --xs-size:        calc(var(--font-size-base) * 0.65);
    --base-size:      calc(var(--font-size-base) * 1); 
    --l-size:         calc(var(--font-size-base) * 1.35);
    --xl-size:        calc(var(--font-size-base) * 1.5);
    --xxl-size:       calc(var(--font-size-base) * 1.9);
}

@media only screen and (min-width: 55rem) {
    :root {
        --xs-size: calc(var(--font-size-base) * 0.65);
        --s-size: calc(var(--font-size-base) * 0.8);
        --base-size: calc(var(--font-size-base) * 1.15);
        --l-size: calc(var(--font-size-base) * 1.5);
        --xl-size: calc(var(--font-size-base) * 2);
        --xxl-size: calc(var(--font-size-base) * 2.8);
    }
}

@media only screen and (min-width: 65rem) {
    :root {
        --xl-size: calc(var(--font-size-base) * 2.25);
        --xxl-size: calc(var(--font-size-base) * 3.25);
    }
}


/* COLOR *******************************/

.bkg-red {
    background-color: var(--red); 
}

.bkg-blue {
    background-color: var(--blue); 
}

.bkg-light-blue {
    background-color: var(--light-blue); 
}

.bkg-light-red {
    background-color: var(--light-red); 
}

.bkg-white {
    background-color: var(--white); 
}

.bkg-gray {
    background-color: var(--gray); 
}

.text-blue {
    color: var(--blue); 
}

.text-red {
    color: var(--red); 
}


/* HTML ELEMENTS *******************************/

html {
    scroll-behavior: smooth;
}

body {
    font-family: AcidGrotesk, Helvetica, Arial, sans-serif;
    font-size: var(--base-size);
    background-color: var(--gray);
    color: var(--black);
    margin: 0;
    min-width: 360px;
}

html, body, header, section, footer, main, div, img, nav,
h1, h2, h3, h4, h5, h6, p, ul, ol, li {
    position: relative;
    display: block;
    box-sizing: border-box;
}

p, ul, ol, li {
    line-height: 1.5
}

h1, h2, h3 {
    margin-top: 0;
}

h1, .h1 {
    font-size: var(--xxl-size);
    line-height: 1.05;
    letter-spacing: -0.015em;
}

h2, .h2 {
    font-size: var(--xl-size);
    line-height: 1.35;
}

h3, .h3 {
    font-size: var(--l-size);
    line-height: 1.35;
}

h4, .h4 {
    font-size: var(--base-size);
}

h5, .h5 {
    font-size: var(--s-size);
}

h6, .h6 {
    font-size: var(--xs-size);
}

p {
    max-width: var(--max-text-line-length);
}

h1 > small, h2 > small, h3 > small,
.h1 > small, .h2 > small, .h3 > small,
.lead > small {
    font-size: .8em;
    display: block;
}

@media only screen and (min-width: 65rem) {
    h1 > small, h2 > small, h3 > small,
    .h1 > small, .h2 > small, .h3 > small,
    .lead > small {
        display: inline;
    }
}

.text-serif {
    font-family: "Playfair Display", "Times New Roman", Times, serif;
}

.text-sans {
    font-family: AcidGrotesk, Helvetica, Arial, sans-serif;
}

.text-normal {
    font-weight: normal;
}


/* IMAGES ******************************/

img {
    max-width: 100%;
}

.img-cover {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;    
}


/* HEADER ******************************/

header {
    display: none;
}

@media only screen and (min-width: 55rem) {
    header {
        display: block;
        margin-top: var(--base-gap);
    }
}

nav > ul {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width), 1fr));
    gap: var(--s-gap);
    align-items: baseline;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.nav-options {
    justify-self: end;
    display: flex;
    gap: var(--s-gap);
}


/* SECTIONS ****************************/

section {
    padding-top: var(--xxl-gap);
    padding-bottom: var(--xxl-gap);
}

.section-inner {
    max-width: var(--max-width);
    margin-inline: var(--s-gap);
}

@media only screen and (min-width: 55rem) {
    .section-inner {
        margin-inline: var(--l-gap);
    }
}

@media only screen and (min-width: 65rem) {
    .section-inner {
        padding-inline: var(--l-gap);
        margin-inline: auto;
    }
}


/* FOOTER ******************************/

footer {
    padding-top: var(--xl-gap);
    padding-bottom: var(--xl-gap);
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(../img/footer-bg.png);
    background-position: right ;
    background-repeat: no-repeat;
    background-size: auto 120%;
    opacity: 0.5;
}

@media only screen and (min-width: 55rem) {
    .footer-options {
        display: flex;
        gap: var(--l-gap);
    }

    .footer-options > *::after {
        content: '';
        position: absolute;
        -webkit-transform: translateX(calc(var(--l-gap) / 2));
        transform: translateX(calc(var(--l-gap) / 2));
        width: 2px;
        height: 100%;
        gap: var(--l-gap);
        background-color: var(--red);
    }

    .footer-options > *:last-child::after {
        content: none;
    }
}


/* BUTTONS *******************************/

.button {
    display: inline-block;
    padding: 1em 3em;
    line-height: 1;
    color: var(--gray);
    text-decoration: none;
    letter-spacing: 0.025em;
    border-radius: var(--full-radius);
    font-weight: 500;
    border: none;
}

.button:hover {
    transition: all 0.25s ease;
}

.button-blue {
    background-color: var(--blue);
}

.button-blue:hover {
    background-color: var(--dark-blue);
}

.button-red {
    background-color: var(--red);
}

.button-red:hover {
    background-color: var(--dark-red);
}

.button.outline {
    background-color: var(--gray);
}

.button-blue.outline {
    color: var(--blue);
}

.button-blue.outline:hover {
    outline-color: var(--dark-blue);
    color: var(--gray);
    background-color: var(--dark-blue); 
}

.button-red.outline {
    color: var(--red);
}

.button-red.outline:hover {
    outline-color: var(--dark-red);
    color: var(--gray);
    background-color: var(--dark-red); 
}

.button > .icon {
    vertical-align: middle;
    transition: -webkit-transform 0.25s ease;
    transition: transform 0.25s ease;
    transition: transform 0.25s ease, -webkit-transform 0.25s ease;
}

.button:hover > .icon {
    -webkit-transform: translateX(.5em);
    transform: translateX(.5em);
}

.button-small {
    font-size: 85%;
}

.button-goup {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-gap);
}


/* LISTS *******************************/

.list {
    list-style: none;
    margin: 0 0 var(--base-gap) 0;
    padding: 0;
}

.list > li {
    position: relative;
    padding-inline: var(--l-gap) 0;
    margin-bottom: var(--xs-gap);
}

.list > li.flushed {
    padding-inline: 0;
} 

li.bullet::before {
    position: absolute;
    left: 0;
    top: 0;
    font-family: "Material Symbols Rounded";
    font-size: 24px;
    -webkit-transform: translateY(-0.3em);
    transform: translateY(-0.3em);
}

li.blue::before {
    color: var(--blue);
}

li.check::before    { content: "\e86c"; }
li.location::before { content: "\e0c8"; }
li.phone::before    { content: "\e0b0"; }


/* GRIDS *******************************/

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--column-min-width), 1fr));
    gap: var(--s-gap);
}

@media only screen and (min-width: 55rem) {
    .grid {
        gap: var(--l-gap);
    }
}

.grid-a-center {
    align-items: center;
}

.grid-simple {
    grid-template-columns: 1fr;
}


/* COVER *******************************/

.cover-title {
    grid-area: coverTitle;
    align-self: end;
}

@media only screen and (min-width: 480px) {
    .cover-title br {
        display: none;
    }
}

.cover-info {
    grid-area: coverInfo;
    padding-bottom: var(--s-gap);
    max-width: 60ch;
}

@media only screen and (min-width: 55rem) {
    .cover-info {
       padding-bottom: var(--l-gap);
    }
}

.cover-img {
    grid-area: coverImg;
    align-self: end;
}

.cover-img > img {
    max-height: clamp(20rem, 100vw, 35rem);
}

@media only screen and (max-width: 54.999rem) {
    .cover-img > img {
        aspect-ratio: 1 / 1;
        -o-object-fit: cover;
        object-fit: cover;
        -o-object-position: top;
        object-position: top;
    }
}

@media only screen and (min-width: 55rem) {
    .cover-img {
        justify-self: center;
    }
}

@media only screen and (min-width: 55rem) {
    .cover-img > img {
        margin-top: -25%;
    }
}

.grid-cover {
    background-image: url(../img/banner-circles1-v.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding: var(--l-gap) var(--l-gap) 0;
    grid-template-columns: 1fr;
    grid-template-areas: 
        "coverTitle"
        "coverInfo"
        "coverImg";
    justify-items: center;
    text-align: center;
}

@media only screen and (min-width: 55rem) {
    .grid-cover {
        background-image: url(../img/banner-circles1.png);
        background-position: right center;
        grid-template-columns: 6fr 4fr;
        grid-template-areas: 
            "coverTitle coverImg"
            "coverInfo coverImg";
        justify-items: start;
        text-align: left;
    }
}

@media only screen and (max-width: 54.999rem) {
    .cover {
        padding-top: 0;
        padding-bottom: 0;
    }

    .cover > .section-inner {
        margin-inline: 0;
    }

    .grid-cover {
        border-radius: 0 !important;
    }
}


/* CONSULTATION ************************/

.grid-consultation {
    text-align: center;
}

@media only screen and (min-width: 55rem) {
    .grid-consultation {
        text-align: left;
    }
}

@media only screen and (max-width: 54.999rem) {
    .grid-consultation .button-goup {
        justify-content: center;
    }
}


/* BIOGRAPHY ***************************/

.bio-title {
    grid-area: bioTitle;
    text-align: center;
}

@media only screen and (min-width: 55rem) {
    .bio-title {
        text-align: left;
    }
}

.bio-info {
    grid-area: bioInfo;
}

.bio-img {
    grid-area: bioImg;
}

.grid-bio {
    grid-template-columns: 1fr;
    grid-template-areas:
        "bioTitle"
        "bioImg"
        "bioInfo";
}

@media only screen and (min-width: 55rem) {
    .grid-bio {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: 
            "bioTitle bioImg"
            "bioInfo bioImg";
    }
}


/* PHD *********************************/

.grid-phd img {
    max-width: 8em;
}

.grid-phd {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
}

@media only screen and (min-width: 55rem) {
    .grid-phd {
        grid-template-columns: 8em auto;
        justify-items: start;
        text-align: left;
    }
}


/* UTILITIES ***************************/

/* BORDER RADIUS */

/*
.r-base, .r-l, .r-xl {
    overflow: hidden;
}
*/

.r-base {
    border-radius: var(--base-radius);
}

.r-l {
    border-radius: var(--l-radius);
}

.r-xl {
    border-radius: var(--xl-radius);
}


/* PADDING */

.p-0 {
    padding: 0;
}

.p-t-0 {
    padding-top: 0;
}

.p-b-0 {
    padding-bottom: 0;
}

.p-base {
    padding: var(--base-gap);
}

.p-l {
    padding: var(--l-gap);
}

.p-xl {
    padding: var(--xl-gap);
}

.p-xxl {
    padding: var(--xxl-gap);
}

.p-t-base {
    padding-top: var(--base-gap);
}

.p-b-base {
    padding-bottom: var(--base-gap);
}

.p-t-l {
    padding-top: var(--l-gap);
}

.p-b-l {
    padding-bottom: var(--l-gap);
}

.p-t-xl {
    padding-top: var(--xl-gap);
}

.p-b-xl {
    padding-bottom: var(--xl-gap);
}

.p-t-xxl {
    padding-top: var(--xxl-gap);
}

.p-b-xxl {
    padding-bottom: var(--xxl-gap);
}


/* MARIGIN */

.m-0 {
    margin: 0;
}

.m-t-0 {
    margin-top: 0;
}

.m-b-0 {
    margin-bottom: 0;
}

.m-base {
    margin: var(--base-gap);
}

.m-l {
    margin: var(--l-gap);
}

.m-xl {
    margin: var(--xl-gap);
}

.m-xxl {
    margin: var(--xxl-gap);
}

.m-t-s {
    margin-top: var(--s-gap);
}

.m-b-s {
    margin-bottom: var(--s-gap);
}

.m-t-base {
    margin-top: var(--base-gap);
}

.m-b-base {
    margin-bottom: var(--base-gap);
}

.m-t-l {
    margin-top: var(--l-gap);
}

.m-b-l {
    margin-bottom: var(--l-gap);
}

.m-t-xl {
    margin-top: var(--xl-gap);
}

.m-b-xl {
    margin-bottom: var(--xl-gap);
}

.m-t-xxl {
    margin-top: var(--xxl-gap);
}

.m-b-xxl {
    margin-bottom: var(--xxl-gap);
}


/* GAP */

.g-base {
    gap: var(--base-gap);
}

.g-l {
    gap: var(--l-gap);
}

.g-xl {
    gap: var(--xl-gap);
}

.g-xxl {
    gap: var(--xxl-gap);
}


/* OUTLINE */

.outline {
    outline-style: solid;
    outline-offset: calc(var(--outline-width) * -1);
    outline-width: var(--outline-width);
}

.outline-blue {
    outline-color: var(--blue);
}

.outline-red {
    outline-color: var(--red);
}


/* WIDTH */

.width40 {
    max-width: 40em;
}

.width50 {
    max-width: 50em;
}

.width60 {
    max-width: 60em;
}