@import "fonts.css";
@import "base.css";
@import "header-footer.css";
@import "bricks.css";

/*------------------------*/
/* theme colors
/*------------------------*/

:root {
    --textDark: rgba(38, 50, 56, 1);
    --textMedium: rgba(38, 50, 56, 0.7);
    --borderMedium: rgba(38, 50, 56, 0.2);
    --borderLight: rgba(38, 50, 56, 0.075);
    --accent: #0B55B7;
    --textAccent: #0B55B7;
    --light: rgba(38, 50, 56, 0.035);
    --pleasantDark: #3188d5ff;
    --pleasantLight: #f2fefec5;
    --star-green: #00b67a;
}

/*------------------------*/
/* turn grayscale off
/*------------------------*/

img {
    filter: grayscale(0);
}

/*------------------------*/
/* colorize_image
/*------------------------*/

.colorize_image {
    filter: contrast(1) sepia(1) hue-rotate(160deg) grayscale(0.8) !important;
}

/*------------------------*/
/* black_2_textDark
/*------------------------*/

.map::after,
.black_2_textDark {
    filter: contrast(0.7) sepia(1) hue-rotate(160deg) !important;
}

/*------------------------*/
/* black_2_textMedium
/*------------------------*/

.black_2_textMedium {
    filter: contrast(0.3) sepia(0.3) hue-rotate(160deg) brightness(1.4) !important;
}

/*------------------------*/
/* black_2_accent
/*------------------------*/

.black_2_accent {
    filter: contrast(0.18) sepia(15) hue-rotate(180deg) contrast(13) !important
}

/*------------------------*/
/* my own customizations
/*------------------------*/

/* aligns the CV list to the left */
section.about .container h2+ul {
    text-align: left;
}

/* prevents the anchor from being obscured by the navbar */
.container>h2,
.container>h3 {
    scroll-margin-top: 110px;
}

h3 {
    padding-top: 0rem !important;
}

/* removes the padding from the h3 to allow # links to not be obscured by navbar */
.qs-and-as {
    padding-bottom: 2rem;
}

.toc-section1 {
    font-weight: bold;
}

.reviews {
    padding-bottom: 20px;
}

/* makes the first level of the TOC bold */

a {
    cursor: pointer;
}

/* changes the cursor to a pointer when hovering over a link */

/*------------------------*/
/* logo
/*------------------------*/

a.logo {
    font-size: 1.8rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--textDark);
}

body.mobilemenu a.logo img.inline {
    margin-top: 0px;
}

a.logo img.inline {
    margin-top: 5px;
    min-height: 50px;
    max-height: 100px;
}

a.logo>div {
    display: flex;
    gap: 0.8rem;
    align-items: start;
}

a.logo>div>div span {
    display: block;
}

a.logo>div.has_subtitle {
    gap: 1rem;
}

a.logo>div.has_subtitle>div span:nth-child(1) {
    line-height: 1;
    margin-bottom: 5px;
}

a.logo>div.has_subtitle>div span:nth-child(2) {
    font-size: 0.75rem;
    font-weight: normal;
}

.intro img {
    max-width: 75%;
}

.intro .text {
    text-align: left;
}

section.image .twocols .image img {
    width: auto;
    display: block;
    max-width: 70%;
    width: 100%;
    margin: auto;
}

.cta img {
    max-width: 60%;
}

.service-buttons p {
    display: inline;
    margin-right: 20px;
}

.posts h3 a {
    text-decoration-line: none;
}

.toc {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin: 20px 0;
    max-width: 500px;
    overflow: hidden;
}

.toc li {
    margin-left: 20px;
}

.toc ul {
    margin: 0;
    padding: 0;
}

.toc ul li a {
    text-decoration: none;
}

.toc ul li a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/*------------------------*/
/* brick_cards
/*------------------------*/

ul.features li.card {
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.24);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

ul.features li.card>p.image {
    border: none;
}

ul.features li.card {
    padding: 15px;
}

.card h2 {
    margin-top: 0rem;
}

ul.features li.card p.image img {
    width: 15rem;
}

.card>ul>li {
    list-style-type: disc;
    text-align: left;
    margin-left: 30px;
}

section.post .container .featuredimage {
    max-height: 400px;
    margin: auto;
    margin-bottom: 30px;
}

section.posts .container .img img {
    max-height: 300px;
    margin: auto;
    margin-bottom: 2rem;
}

section.posts .filter {
    margin-bottom: 3rem;
}

a.horizontal {
    margin-left: 10px;
    margin-right: 10px;
}

/* Prevents h2s in brick_image and brick_image2 from being obscured by navbar */
div.twocols h2 {
    scroll-margin-top: 110px;
}

section.intro {
    padding-bottom: 0rem;
}

/*------------------------*/
/* brick about
/*------------------------*/

section.about .container.small {
    text-align: justify;
}

section.about .container p img {
    display: inline-block;
    border-radius: 100%;
    overflow: hidden;
    aspect-ratio: 1;
    width: 20rem;
    object-fit: cover;
}

section.about .container h1 {
    margin: -0.75rem auto 1.5rem;
    font-size: 2.6rem;
    text-align: left;
}

section.about .container h1+p {
    padding-top: 0;
}

section.about .container .buttons {
    justify-content: center;
}

section.about li {
    text-align: left;
}

section.about div.image {
    display: block;
    padding-top: 50px;
    filter: grayscale(50%);
}

section.intro img {
    margin-top: 0px;
}

section.intro h1 {
    margin-bottom: 15px;
}

/* Remove second ul bullet points from Global Mobility page */
h2#what-we-offer~ul ul,
h2#what-we-offer~ul {
    list-style-type: none;
}

section.contact .container {
    direction: rtl;
}

section.contact .container>div {
    direction: ltr;
}

section {
    padding-bottom: 0px
}

body.mobilemenu .twocols {
    row-gap: 1rem;
}

.social-proof {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

section.intro .social-proof div {
    align-self: center;
}

section.intro .social-proof img {
    height: 50px;
    max-width: 100%;
    margin-right: 15px;
    padding-right: 10%;
}

body.mobilemenu .desktop-only {
    display: none;
}

.review-links li {
    margin-bottom: 15px;
}

.review-links img {
    max-width: 50%
}

/*------------------------*/
/* Language switcher
/*------------------------*/

.language-switcher {
    display: inline;
    vertical-align: -4px;
    margin-left: -3px;
    margin-right: 2px;
}

body.mobilemenu.menushown .language-switcher img,
body.mobilemenu.menushown .language-switcher > a::after {
    filter: invert(1);
}

body.mobilemenu .language-switcher .language-options {
  display: none;
}
body.mobilemenu .language-switcher .language-options.show {
  display: block;
}
header nav > ul > li.language-switcher > a:not(.language-toggle)::after {
    content: none;
}