/* variables */
:root {
    /* Color vars usage example:  color: rgb(var(--light-bg)); */

    /* --light-bg: 248, 249, 250; */
    --light-accent: 243, 237, 226; /* nav (and bkgd at low opacity) */
    --medium-accent: 138, 134, 61;
    --main-accent: 59, 95, 134; /* remember to also change in images/diamond.svg */
    --dark-accent-main: 31, 51, 71;
    --light-splash-accent: 184, 189, 201, .6;
    --link-color: 7, 77, 182;

    /* rgb() unnecessary; uses bootstrap body color */
    --text-body: var(--bs-body-color);

    /* default variable behavior (used with breakpoints) */
    --wrap: auto; /* used in wrap css element */
    --overlay-w: fit-content; /* width */
    --brand-flex: inherit; /* flex */
    --splash-h: 75vh; /* height */
    --splash-attach: fixed; /* background-attachment */
    --ferry-pos: right: /* background-position */
    --vert-pos: bottom;
}

/* Custom breakpoints */
@media (min-width: 1700px) {
    html:root {
        --splash-h: 40vh;
        --splash-attach: local;
    }
}

@media (min-width: 3000px) {
    html:root {
        --splash-h: 10vh;
        --splash-attach: local;
        --vert-pos: center;
    }
}

@media (max-width: 1700px) {
    html:root {
        --overlay-w: 50vw;
        --ferry-pos: 85%;
    }
}

/* goes with bootstrap xl breakpoint */
@media (max-width: 1200px) {
    html:root {
        --splash-h: 60vh;
        --splash-attach: local;
    }
}
/* goes with bootstrap lg breakpoint */
@media (max-width: 992px) {
    html:root{
        --brand-flex: auto;
        --ferry-pos: 75%;
    }
}
/* goes with bootstrap md breakpoint */
@media (max-width: 768px) {
    html:root {
        --overlay-w: inherit;
        --splash-h: 35vh;
        --splash-attach: local;
        --ferry-pos: 20%;
    }
}

@media (min-width: 430px) {
    html:root {
        --wrap: nowrap;
    }
}
/* end of custom breakpoints */

body {
    padding-top: 3rem;
    font-family: 'Book Antigua', Georgia, 'Times New Roman', Times, serif;
    background-color: rgba(var(--light-accent), .3);
    color: var(--text-body);
}

body a {
    color: rgb(var(--link-color));
}

.page-heading {
    padding-top: 1.5rem;
    line-height: 1.8;
}

/* svg bulletpoint */
.diamond-header img {
    height: 1.5em;
    padding-bottom: .3em;
    padding-right: .15em; 

}

/* Override indentation so it works in lists */
.diamond-header {
    padding-left: 1.5em;
    text-indent: -1.5em;
}

body hr {
    color: rgb(var(--main-accent));
}

/* Text wraps around pic; used for pics when screen gets smaller (bc at that point columns look strange) */
.wrap-pic {
    float:right; 
    margin-top: 8px; 
    margin-left: 20px; 
    width: 35%;
}

.wrap-pic-left {
    float:left; 
    margin-top: 8px; 
    margin-right: 20px; 
    width: 25%;
}


/* NAVBAR */

nav {
    background-color: rgb(var(--light-accent));
}

nav.navbar p#brand {
    font-size: medium;
    font-variant: small-caps;
    padding-left: 3px;
    
}

nav.navbar p#brand {
    flex: var(--brand-flex);
}


.navbar-nav li.nav-item:hover {
    border-bottom: solid;
    border-bottom-color: rgba(var(--medium-accent), .5);
    background-color: rgba(var(--medium-accent), .2);
}


nav ul.navbar-nav li.nav-item>a {
    padding-top: 23px;
    padding-bottom: 23px;
    color: rgb(var(--dark-accent-main));
}

nav .navbar-toggler {
    margin-top: 13px;
    margin-bottom: 13px;
}


ul.navbar-nav#navvy {
    flex: auto;
}

/* active nav tab for each page */

#index .navbar-nav li.nav-item.active-index {
    background-color: rgba(var(--medium-accent), .3);
    border-bottom: solid;
    border-bottom-color: rgba(var(--medium-accent), .6);
}

#about .navbar-nav li.nav-item.active-about {
    background-color: rgba(var(--medium-accent), .3);
    border-bottom: solid;
    border-bottom-color: rgba(var(--medium-accent), .6);
}

#practice-areas .navbar-nav li.nav-item.active-practice {
    background-color: rgba(var(--medium-accent), .3);
    border-bottom: solid;
    border-bottom-color: rgba(var(--medium-accent), .6);
}

#resources .navbar-nav li.nav-item.active-resources {
    background-color: rgba(var(--medium-accent), .3);
    border-bottom: solid;
    border-bottom-color: rgba(var(--medium-accent), .6);
}

#contact .navbar-nav li.nav-item.active-contact {
    background-color: rgba(var(--medium-accent), .3);
    border-bottom: solid;
    border-bottom-color: rgba(var(--medium-accent), .6);
}


/* Center align the text within the three columns below the splash screen */
.featurettes .col-lg-4 {
    margin-bottom: 1.5rem;
    text-align: center;
}

/* rtl:begin:ignore */
.featurettes .col-lg-4 p {
    margin-right: .75rem;
    margin-left: .75rem;
}

#splash-container {
    padding:0px;
}

#splash-screen {
    /* setting heights and image y-position based on screen size */
    min-height: var(--splash-h);

    /* fix the image to prevent scrolling for parallax effect */
    background-attachment: var(--splash-attach);

    /* adding background image */
    background-image: url(images/ferry-prog.jpg);

    /* Moves ferry out of the way of the text (to the right) as the screen gets smaller */
    background-position-x: var(--ferry-pos);

    /* prevent repeating or tiling of the image */
    background-repeat: no-repeat;

    /* resize image to take all the space */
    background-size: cover;

    /* adjust image height to show pic */
    background-position-y: var(--vert-pos);


}

#splash-overlay {

    /* overlay color */
    background-color: rgba(var(--light-splash-accent));

    /* match height of splash screen */
    min-height: inherit;


    /*set width of overlay wider or narrower for different screens*/
    width: var(--overlay-w);


    background-position: left;
    background-size: cover;

    h1 {
        font-variant: small-caps;
    }

    /* fix the image to prevent scrolling */
    background-attachment: fixed;

    /* make section flex */
    display:flex;

    /* vertically center elements */
    align-items: center;
}

/*about*/
  
  .about>a.collapsed:after  {
      content: 'Read More';
  }
  
  .about>a:not(.collapsed):after {
      content: 'Read Less';
  }
  .about .collapsing {
    -webkit-transition: none;
    transition: none;
}

  .bio>div>img {
    width: 100%;
    height: auto;
  }
  
/*footer*/

/* styling for ul list within footer */
.flexi-bull {
    padding: 0;
    list-style: none;
}

.flexi-bull>li {
    display: inline;
    /* 3 */

    text-wrap: var(--wrap);
}

.flexi-bull i {
    color: rgb(var(--dark-accent-main));
}

.flexi-bull>li::after {
    content: ' ';
    /* 4 */
    letter-spacing: 1.5rem;

    /* 5 */
    background: linear-gradient(90deg, transparent calc(50% - 0.03125em), currentColor 0, currentColor calc(50% + 0.03125em), transparent 0);
    /* 6 */
}

footer div.pull-left {
    float: none !important;
    text-align: center;
}