/* 
Object-Oriented CSS: Separate content from container,
    so define a reusable class/skin 
*/

/* 
To combine stylesheets into one stylesheet
./ represents the current folder

@import './normalize.css';
*/

:root{
    /* GLOBAL VARIABLES / Custom properties */
    --color-primary: #2584ff;
    --color-secondary: #00d9ff;
    --color-accent: #ff3400;

    --color-headings: #1b0760;
    --color-body: #918ca4;

    --color-body-darker: #5c5577;

    --color-border: #ccc;
    --border-radius: 30px;
}

*, *::after, *::before{ 
    /* all elements, including elements that are inserted dynamically after, before them */
    box-sizing: border-box; /* buttons have this by default, but 'a' items do not. */
    /* if no box-sizing: border-box, the horizontal padding that we have set is adding on top of 100%,
    that's why 'a' button is wider than the screen  */
}

/* TYPOGRAPHY */
::selection{
    /* color of selected text */
    background: var(--color-primary);
    color: #fff;
}

html{
    /* default font size: 16px
    62% of 16px = 10px */
    font-size: 62.5%;
}

body{
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 2.4rem;
    line-height: 1.5; /* 1.5 x font size */
    color: var(--color-body);
}

h1, h2, h3{
    color: var(--color-headings);
    margin-bottom: 1rem;
    line-height: 1.1; /* to override line-height in body. don't want headers to have 1.5 line height, want it to be more compact */
}

h1{
    /*  1 x font size of the html element */
    /* font-size: 1rem; 10 px */
    font-size: 7rem;
}

h2{
    font-size: 4rem;
}

h3{
    font-size: 3rem;
    font-weight: 500;
}

p{
    /* To solve margin collapsing (between h3 and p) */
    margin-top: 0; /* this way we let heading decide the margin above the paragraph */
}

@media screen and (min-width: 1024px) {
    body{
        font-size: 1.8rem;
    }
    h1{
       font-size: 8rem; 
    }
    h2{
        font-size: 4rem;
    }
    h3{
        font-size: 2.4rem;
    }
}


/* LINKS */
a{
    text-decoration: none;
}

.link-arrow{
    color: var(--color-accent);
    text-transform: uppercase;
    font-size: 2rem;
    font-weight: bold;
}
.link-arrow::after{
    content: '-->';
    margin-left: 5px; /* using px because we want this space to always be the same, no matter the font size */
    transition: margin 0.15s;
}
.link-arrow:hover::after{
    margin-left: 10px;
}

@media screen and (min-width: 1024px) {
    .link-arrow{
        font-size: 1.5rem;
    }
}


/* BADGES */
.badge{
    border-radius: 20px; /* using an absolute value because we don't want radius to be dependent on font size */
    font-size: 2rem;
    font-weight: 600;
    padding: 0.5rem 2rem; /* vertical, horizontal */
    white-space: nowrap; /* prevents badge from wrapping into second line */
}

.badge--primary{
    background: var(--color-primary);
    color: #fff;
}

.badge--secondary{
    background: var(--color-secondary);
    color: #fff;
}

.badge--small{
    font-size: 1.6rem;
    padding: 0.5rem 1.5rem; /* y,x */
}

@media screen and (min-width: 1024px) {
    .badge{
        font-size: 1.5rem;
    }
    .badge--small{
        font-size: 1.2rem;
    }
}


/* LISTS */
.list{
    /* To remove default styling from lists */
    list-style: none;
    padding-left: 0;
}

.list--inline .list__item{ /* targeting items with a class of .list__item */
    display: inline-block; /* inline won't allow setting margins, so inline-block will be better */
    margin-right: 2rem;
}

.list--tick{
    list-style-image: url(../images/tick.svg); /* going one level up */
    padding-left: 3rem;
    color: var(--color-headings);
}

.list--tick .list__item{
    padding-left: 0.5rem;
    margin-bottom: 1rem;
}

@media screen and (min-width: 1024px) {
    .list--tick .list__item{
        padding-left: 0;
    }
}


/* ICONS */
.icon{
    width: 40px;
    height: 40px;
}

.icon--small{
    width: 30px;
    height: 30px;
}

.icon--primary{
    fill: var(--color-primary);
}

.icon--white{
    fill: #fff;
}

.icon-container{
    background: #f3f9fa;
    width: 64px; /* always stay the same size, does not change relative to screen or font size */
    height: 64px;
    border-radius: 100%;
    display: inline-flex; /* instead of inline-block, because we want it to be use flexbox to center */
    justify-content: center;
    align-items: center;
}

.icon-container--accent{
    background: var(--color-accent);
}


/* BUTTONS */
.btn{
    font-size: 1.8rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2rem 4vw; /* 4% of viewport width (the wider the viewport, the more horizontal padding we will have) */
    border: 0;
    border-radius: 40px;
    cursor: pointer;
    white-space: nowrap; /* do not want text and button to wrap onto second line */
    text-align: center;
    margin: 1rem 0; /* y, x: for vertical margin to separate these from other elements */
    outline: 0; /* get rid of the outline of button that appears when the button is clicked */
}

.btn .icon{
    /* In the button, if we have an icon... */
    width: 2rem;
    height: 2rem;
    margin-right: 1rem;
    vertical-align: middle;
}

.btn--outline{
    background: #fff;
    color: var(--color-headings);
    border: 2px solid var(--color-headings);
}

.btn--outline:hover{
    background: var(--color-headings);
    color: #fff;
}

.btn--primary{
    background: var(--color-primary);
    color: #fff;
}

.btn--primary:hover{
    background: #3a8ffd;
}

.btn--secondary{
    background: var(--color-secondary);
    color: #fff;
}

.btn--secondary:hover{
    background: #00c8eb;
}

.btn--accent{
    background: var(--color-accent);
    color: #fff;
}

.btn--accent:hover{
    background: #ec3000;
}

.btn--block{
    width: 100%;
    display: inline-block; /* because 'a' elements are inline by default, and by changing to inline-line block we can add a width to it */
}

.btn--stretched{
    padding-left: 6rem;
    padding-right: 6rem;
}

@media screen and (min-width: 1024px) {
    .btn{
        font-size: 1.5rem;
    }
}


/* INPUTS */
.input{
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius);
    width: 100%;
    padding: 1.5rem 3.5rem;
    outline: 0; /* get rid of default blue border when input box is activated */
    color: var(--color-headings);
    font-size: 2rem;
}

::placeholder{
    color: #cdcbd7;
}

.input-group{
    border: 1px solid var(--color-border); 
    border-radius: var(--border-radius);   
    display: flex; /* div is block level ele, so input group has stretched to fill all available space
    need to push button to the right...flex-grow below */
}

.input-group .input{
    /* Nesting: when we are in an input group, if we have an input, that input shouldn't have a border  */
    border: 0;
    flex-grow: 1; /* will make input field grow to take up all available space */
    padding: 1.5rem 2rem;
    width: 0; /* to let flex-glow take care of growing the input field */
}

.input-group .btn{
    margin: 4px;
}

@media screen and (min-width: 1024px) {
    .input{
        font-size: 1.5rem;
    }
}


/* CARDS */
/* we should not apply width to card because we want it to be flexible
so we can put it in any container and the size to be determined by container.
so to make responsive, we will let the card stretch and take up all available space */
.card{
    border-radius: 7px;
    box-shadow: 0 0 20px 10px #f3f3f3; /* x offset, y offset, blur, spreading shadow the larger the value the bigger shadow will be */
    overflow: hidden; /* once we gave header a bg color, the header has grown larger than its parent/container (card ele). 
    so there's overflow where the header does not have a border-radius anymore. to bring the round corners back, overflow:hidden */
}

.card__header, .card__body{
    /* adding padding to both so that elements will align properly */
    padding: 2rem 3rem;
}

.card--primary .card__header{
    /* if we have an ele called card--primary, the header in this ele... */
    background: var(--color-primary);
    color: #fff;
}
.card--secondary .card__header{
    background: var(--color-secondary);
    color: #fff;
}

.card--primary .badge--primary{
    background: #126de4;;
}
.card--secondary .badge--secondary{
    /* if we have a secondary badge inside a secondary card */
    background: #02cdf1;
}


/* PLANS */
.plan{
    transition: transform 0.2s ease-out;
}

.plan__name{
    color: #fff;
    margin: 0; /* removing the default margin that is applied to h3 */
    font-weight: 500; /* we're using a variable font, so we can use any weight that we want */
    font-size: 2.4rem;
}

.plan__price{
    font-size: 6rem;
}

.plan__billing-cycle{
    font-size: 2.4rem;
    font-weight: 300;
    opacity: 0.8;
    margin-right: 1rem; /* add spacing btwn $14/month and badge */
}

.plan__description{
    font-size: 2rem;
    font-weight: 300;
    letter-spacing: 1px;
    display: block; /* description is a span ele, so by default it's inline */ 
}

.plan .list__item{
    margin-bottom: 2rem; /* add spacing btwn list items */
}

.plan--popular{
    transform: scale(1.1); /* make 10% larger */
}

.plan--popular .card__header{
    position: relative;
}

.plan--popular .card__header::before{
    /* if we have a plan that is popular, we want to insert something before the content of the card header */
    content: url(../images/popular.svg); /* ../ going one level up */
    width: 40px;
    display: inline-block; /* by default, this is an inline ele. setting this to inline-block so the width works. */
    /* moving the popular.svg to the right of card */
    position: absolute; /* so we should make parent ele or container a relatively positioned ele. card__header is the parent. */
    top: -6px; /* want to move it a little further up */
    right: 5%; /* whatever the width of the card, we're going to take 5% of that and use it as the right offset */
}

.plan:hover{
    transform: scale(1.05); /* 5% larger */
}
.plan--popular:hover{
    transform: scale(1.15); 
}

@media screen and (min-width: 1024px) {
    .plan__name{
        font-size: 1.4rem;
    }
    .plan__price{
        font-size: 5rem;
    }
    .plan__billing-cycle{
        font-size: 1.6rem;
    }
    .plan__description{
        font-size: 1.7rem;
    }
}


/* MEDIA */
.media{ 
    /* on the container: so we can lay elements horizontally */
    display: flex;
    margin-bottom: 4rem; /* add space btwn media objects */
}

.media__title{
    margin-top: 0; /* get rid of default h3 margin */
}

.media__body{
    margin: 0 2rem; /* y,x add space btwn img and text */
}

.media__image{
    margin-top: 1rem; /* to make img slightly below top of h3 */
}


/* QUOTES */
.quote{
    font-size: 3rem;
    font-style: italic;
    color: var(--color-body-darker);
    line-height: 1.3;
}
.quote__text::before{
    content: open-quote;
}
.quote__text::after{
    content: close-quote;
}

.quote__author{
    font-size: 3rem;
    font-weight: 500;
    font-style: normal; /* parent/container level has font set to italic, so for author we need to reset the style */
    margin-bottom: 0; /* removing the bottom margin of author because it is causing a gap between author and organization */
}
.quote__organization{
    color: var(--color-headings);
    opacity: 0.4;
    font-size: 2rem;
    font-style: normal;
}
.quote__line{ /* to position the line in the middle of header. currently it's below. */
    position: relative; /* positioning this element relative to itself without affecting other elements */
    bottom: 10px;
}

@media screen and (min-width: 1024px) {
    .quote{
        font-size: 2rem;
    }
    .quote__author{
        font-size: 2.4rem;
    }
    .quote__organization{
        font-size: 1.6rem;
    }
}


/* GRIDS */
.grid{
    display: grid;
}

@media screen and (min-width: 768px) {
    .grid--1x2{
        grid-template-columns: 1fr 1fr; /* going to take all available space,
        divide it by 2 and then give each column 1 slice.
        can also have it as repeat(2, 1fr) */
    }
}
@media screen and (min-width: 1024px) {
    .grid--1x3{
        /* 3 column grid */
        grid-template-columns: repeat(3,1fr);
    }
}


/* TESTIMONIALS */
.testimonial{
    padding: 3rem; /* there's some padding around content of the grid */
}

.testimonial__image{
    /* need to apply relative positioning to container */
    position: relative;
}

.testimonial__image > img{
    /* Target the img that is directly inside this container (testimonial__image)
    > is the direct child selector
    Most of the time, should avoid this because we don't want css to know about html because if html changes, then we'll have to update css as well
    but in this case, it is unlikely that we'll change the structure of this container */
    width: 100%; /* to make img responsive (resize with browser) and have equal distribution of columns */
}

.testimonial__image > .icon-container{
    /* In our testimonial__image, we are going to target the icon-container */
    position: absolute;
    top: 3rem;
    right: -32px; /* To guarantee that the right edge of our img is always exactly in the middle of the icon?
    For sizing icons, we used px which are absolute values.
    icon-container width/height: 64px
    so 64/2=32. used neg val to move it to the right 
    It is not dependent on the size of the screen. The icon will always be in the right location. */
}

@media screen and (min-width: 768px) {
    .testimonial .quote,
    .testimonial .quote__author{
        /* BEM Convention allows us to clearly see the components and their elements */
        font-size: 2.4rem;
    }

    .testimonial .quote{
        margin-left: 6rem; /* adding more space btwn quote and img */
    }
}


/* CALLOUTS */
.callout{
    padding: 4rem;
    border-radius: 5px;
}

.callout--primary{
    background: var(--color-primary);
    color: #fff;
}

.callout__heading{
    color: #fff;
    margin-top: 0;
    font-size: 3rem;
}

.callout .btn{
    /* Defining new rule for buttons in a callout component */
    /* need to change alignment of button 
    because by default, grid's x,y alignment is set to stretch. so button is stretched horizontally and vertically. */
    justify-self: center; /* x property applied to grid item. (justify-items is for grid) */
    align-self: center; /* y property applied to grid item */
}

.callout__content{
    text-align: center;
}

@media screen and (min-width: 768px) {
    .callout .grid--1x2{
        /* currently columns take equal amount of space (1fr 1fr)
        here, we want content column to stretch and take up remaining extra space */
        grid-template-columns: 1fr auto; /* auto allows column to get wide enough to fit button. all the extra space will be allocated to first column */
    }
    .callout__content{
        text-align: left;
    }
    .callout .btn{
        justify-self: start;
        margin: 0 2rem; /* x margin of 2rem*/
    }
}


/* COLLAPSIBLES */
/* not applying width to collapsible because we want it to be responsive so we can put it in any container
and the width will be determined by the container instead */
.collapsible__header{
    display: flex; /* to get icon on the right of header. using flex, we can lay out items horizontally/vertically */
    justify-content: space-between; /* this will push items to edge of the container and add space between them (to push icon to right side of container) */
}
.collapsible__heading{
    margin-top: 0;
    font-size: 3rem;
}

.collapsible__chevron{
    transform: rotate(-90deg); /* originally it's facing down. we want to rotate it so chevron is facing right */
    transition: transform 0.3s;
}

.collapsible__content{
    /* To hide the content area */
    max-height: 0; /* with this being 0, there will be overflow and so content will still be visible */
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s; /* all, includes max-height and opacity */
    /* Alternative way- but we can't add animation to this
        display: none; */
}

/* Implementing the expanded state */
.collapsible--expanded .collapsible__chevron{
    /* If we have a collapsible that is expanded, the chevron should point down */
    transform: rotate(0); /* 0 is its original position */
}
.collapsible--expanded .collapsible__content{
    max-height: 100vh; /* max-height won't allow height of content area to stretch more than its content */
    opacity: 1;
    /* Alternative way- but we can't add animation to this
        display: block; */
}


/* BLOCKS */
.block{
    --padding-vertical: 6rem; /* CUSTOM PROPERTY is available to an element with the CLASS of block and ALL of its children
    defining this variable because if someday we change the padding value, we don't have to change it for block--skewed-right as well */
    padding: var(--padding-vertical) 2rem; /* y,x */
    /* border: 2px solid red; */
}

.block__header{
    text-align: center;
    margin-bottom: 4rem;
}
.block__heading{
    margin-top: 0; /* get rid of browser's default extra margin for h2 */
}

.block--dark{
    background: #000;
    color: #7b858b;
}
.block--dark h1,
.block--dark h2,
.block--dark h3{
/* .block--dark .block__heading{ */
    /* In block--dark elements, if we have a heading the heading should be... */
    color: #fff;
}

.block--skewed-right{
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 90%); /* from clip path generator: each two combinations represents a point (x,y) */
    /* adding padding-bottom because we clipped this block, we lost some padding. 
    to fix this problem, we need to add extra padding to skewed blocks. 
    using calc function and custom variable so that our code is more maintainable (we don't have to remember to update bottom padding for skewed blocks) */
    padding-bottom: calc(var(--padding-vertical) + 4rem); 
}
.block--skewed-left{
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%); /* top left, tr, br, bl */
    padding-bottom: calc(var(--padding-vertical) + 4rem); 
}

.container{
    /* This is a reusable class that can be used anywhere we want to apply this constraint */
    max-width: 1140px;
    margin: 0 auto; /* y,x. auto: if we have extra space, the space will be equally distributed to the sides of this block 
    setting this margin to make the block centered, so that as the screen gets wider we'll have extra space on the sides of the block */
}


/* NAVIGATION */
.navigation{
    background: #000;
    display: flex; /* by default, flex direction is horizontal */
    justify-content: space-between;/* so first and last items are pushed to the side and remaining space is distributed btwn other items */
    /* Currently: logo, icon, and list appear on same line.
    For list of items to appear on next line, need to enable wrapping on nav bar 
    and give list width:100% */
    flex-wrap: wrap;
    padding: 0 1rem; /* if one value: horizontal and vertical */
    align-items: center; /* y-axis */ 
}
.nav__list{
    width: 100%;
    margin: 0; /* by inspecting browser, we see that extra space is caused by margin here. so setting it to 0 will get rid of it. */
}
.nav__item{
    padding: 0.5rem 2rem;
    border-bottom: 1px solid #222;
}
.nav__item > a{
    /* using direct child selector to target the anchor inside this ele */
    /* don't need to create a new individual class for anchor for this because it is highly unlikely that we'll replace this anchor with another ele */
    color: #d2d0db;
    transition: color 0.3s;
}
.nav__item > a:hover{
    color: #fff;
}

.nav__toggler{
    opacity: 0.5;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.nav.collapsible--expanded .nav__toggler{
    /* if we have collapsible--expanded class, the nav__toggler should... */
    /* Double Class Selector: 
    to make sure this style is ONLY applied to a nav bar that is expanded (because collapsible--expanded is a generic class that can be reused elsewhere)
    .nav.collapsible--expanded (having both classes, nav and collapsible--expanded, w/o space) */
    opacity: 1;
    box-shadow: 0 0 0 3px #666;
    border-radius: 5px;
}

.nav__logo{
    /* defining this new class to move logo */
    transform: translateY(5px);
}

@media screen and (min-width: 768px) {
    /* Desktop: hide toggler, nav list remove width to auto so it'll stretch enough to fit content.
    appear on first line, not second line */
    .nav__toggler{
        display: none;
    }
    .nav__list{
        width: auto;
        display: flex; /* to lay items horizontally */
        font-size: 1.6rem;
        /* nav list always needs to be visible, collapsed/expanded.
        to make collapsible content visible, need max-height and opacity */
        max-height: 100%; /* 100% of the height of its container */
        opacity: 1;
    }    
    .nav__item{
        border: 0;
    }
}


/* HERO */
/*
.hero{
     making this specific class to override generic block class (block--skewed-left) by adding it as the last class in section tag for hero 
    clip-path: polygon(0% 0%, 100% 0%, 100% 90%, 0% 100%);
}
*/

.hero__tagline{
    /* tagline element belongs to hero component
    if in the future of building website, there seems to be other instances where p needs the exact same style, put these styles in a separate reusable class. 
    Object-Oriented principles- separate content from container. */
    font-size: 2rem;
    color: #b9c3cf;
    letter-spacing: 1px;
    margin: 2rem 0 5rem;
}

.hero__image{
    width: 100%; /* responsive img that stretches to fill its container */
}

@media screen and (min-width: 768px) {
    .hero{
        padding-top: 0;
    }
    .hero__content{
        text-align: left;
        align-self: center; /* to change vertical alignment of this item. using this property because content element is inside a grid. */
    }
}


/* Domain Block */
.block-domain .input-group{
    /* In this block, the input group... */
    box-shadow: 0 0 30px 20px #e6ebee;
    border: 0;
    margin: 4rem auto; /* setting horizontal margin to auto so that list will be centered */
    max-width: 670px; /* approximately measured the width of list with ruler tool in photoshop. */
}

.block-domain__prices{
    color: var(--color-headings);
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* going to divide 2 spaces into 2 parts and give each column 1 part */
    grid-template-rows: repeat(2, 6rem); /* 6rem is setting the height of each row. if we don't set this, items will be very close to each other */
    font-size: 2rem;
    font-weight: 600;
    justify-items: center; /* horizontal alignment */
    max-width: 700px; /* approximately measured the width of list with ruler tool in photoshop. because list isn't taking up all available space in the container (it's smaller and in the middle) */
    margin: 0 auto; /* setting horizontal margin to auto so that list will be centered (all available space will be equally distributed to left and right margins) */
}

@media screen and (min-width: 768px) {
    .block-domain__prices{
        /* want to lay list items horizontally in one line (instead of original 3x2 grid) */
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); /* auto-fit: grid will create as many columns needed to fit all items 
        minmax function: min 10rem and max 1fr. so if there's extra space available, that extra space will be equally distributed to these columns */
    }
}


/* PLANS BLOCK */
.block-plans .grid{
    /* In the block that is called plans, our grid should have... */
    gap: 8rem 4rem; /* rows (small screens), columns (wide screens). separating the plans cards */
}

.block-plan .card{
    /* In this block, our card should... */
    max-width: 500px; /* changes dynamically, but not more than 500px */ 
    margin: 0 auto; /* to center */
}


/* FEATURES BLOCK */
.feature{
    gap: 4rem 2rem;
    margin: 12rem 0; /* separate features */
}

.feature:first-of-type{
    margin-top: 6rem; /* override margin. 12 (from value set above) / 2 = 6 */
}

.feature__heading{
    margin: 1rem 0;
}

.feature__image{
    width: 100%; /* to make image responsive */
}

@media screen and (min-width: 768px) {
    .feature:nth-of-type(even) .feature__content{
        /* Select 2nd, 4th, etc features, then target feature__content */
        order: 2; /* swap the order and set it to 2. 
        by default, order of content is 1 because in html we added content first and then img.
        so now by setting order: 2, img will take up the position of the first item in grid */
    }
}


/* SHOWCASE BLOCK */
.block-showcase__picture > img{
    width: 100%;
}
@media screen and (min-width: 768px) {
    .block-showcase .grid{ /* if we have a block called showcase and in this block we have a grid... */
        /* 2 columns- each column is taking up exactly 50% of its parent */
        grid-template-columns: 50% 50%; /* redefining column template for our grid (originally 1fr 1fr, so the available space will be divided in 2 and each column will take 1 slice) 
        50% 50% means 50% of the width of the container. so width of column will not be determined by its content, like the img */
    }
    .block-showcase__picture{
        justify-self: end; /* align img to the right side of its column */
    }
    .block-showcase__picture > img{
        /* the properties below should be applied to the img, not picture ele */
        width: auto; /* img will be displayed in its actual size */
        max-width: 700px;
    }
}


/* FOOTER */
.footer{
    background: #232323;
}

.footer a{
    color: #777;
    transition: color 0.3s;
}
.footer a:hover{
    color: #fff;
}

.footer__section{
    padding: 2rem;
    border-bottom: 1px solid #393939;
}
.footer__section .list{
    /* in footer__section, if we have a list... */
    margin: 0;
}

.footer__heading{
    text-transform: uppercase;
    font-weight: 600;
}

.footer__brand{
    margin-top: 5rem;
    text-align: center;
}

.footer__brand img{
    /* in the brand section, the img we have... */
    width: 100%;
    max-width: 230px; /* it's too big because width is set to 100%. so setting max-width to the width of the img */
}

.footer__copyright{
    font-size: 2.1rem;
    color: #fff;
    opacity: 0.3;
}

@media screen and (min-width: 768px) {
    /* Redefine template of our grid */
    .footer__sections{
        grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); /* auto-fit: so grid can fit as many items possible. auto-fit can only use minmax */
    }
    .footer .collapsible__chevron{
        /* in our footer, if we have a collapsible__chevron... */
        display: none; /* get rid of chevron */
    }
    .footer .collapsible__content{
        opacity: 1; /* to display content */ 
        max-height: 100%; /* 100% of its container */
        /* cannot use display: block, because earlier we used animation to expand object */
    }
    .footer__brand{ 
        /* move footer__brand before all footer__section */
        order: -1; /* by default, order: 0. -1 will let it move before 1st item */        
        margin-top: 1rem;
    }
    .footer__copyright{
        font-size: 1.5rem;
    }
    .footer__section{
        border: 0;
    }
    .footer__heading{
        font-size: 1.6rem;
    }
}