/*
Theme Name: Violares Law LLC - Starkers Modernized
Theme URI: https://github.com/JoeyButler/starkers
Author: Joey Butler (Modernized by Gemini)
Author URI:
Description: A modernized, bare-bones WordPress theme with a modular file structure.
Version: 2.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: classic-theme, accessibility-ready, custom-logo, post-formats
Text Domain: starkers-modernized
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
*/

/* The below is necessary if you use wordpress-cleanup plugin */
.screen-reader-text {
  border: 0;
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

:root {
  --content-width: 85.375rem;
  --gutter: clamp(1.6rem, calc(4.206500956vw + 0.2539196941rem), 6rem);
  --accent: #a8996e;
  --black: #000;
  --white: #fff;
  --section-color-1: #202020;
  --section-color-2: #262626;
  --footer: #232226;
  --space-xs: calc(1.3506752532rem + (-0.0173419199 * ((100vw - 32rem) / 104.6)));
  --space-s: calc(1.8004501125rem + (0.1995498875 * ((100vw - 32rem) / 104.6)));
  --space-m: calc(2.4rem + (0.6 * ((100vw - 32rem) / 104.6)));
  --space-l: calc(3.1992rem + (1.3008 * ((100vw - 32rem) / 104.6)));
  --space-xl: calc(4.2645336rem + (2.4854664 * ((100vw - 32rem) / 104.6)));
  --space-xxl: calc(5.6846232888rem + (4.4403767112 * ((100vw - 32rem) / 104.6)));
  --text-xs: 0.8225rem;
  --text-s: 1rem;
  --text-m: 1.125rem;
  --text-l: clamp(1.2147rem, calc(1.2147rem + (0.45588 * ((100vw - 20rem) / 104.6))), 1.4996rem);
  --text-xl: clamp(1.4576rem, calc(1.4576rem + (0.86618 * ((100vw - 20rem) / 104.6))), 1.999rem);
  --text-xxl: clamp(1.7492rem, calc(1.7492rem + (1.46473 * ((100vw - 20rem) / 104.6))), 2.6646rem);
  /* Grid */
  /* Grid Columns */
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-5: repeat(5, minmax(0, 1fr));
  --grid-6: repeat(6, minmax(0, 1fr));
  --grid-7: repeat(7, minmax(0, 1fr));
  --grid-8: repeat(8, minmax(0, 1fr));
  --grid-9: repeat(9, minmax(0, 1fr));
  --grid-10: repeat(10, minmax(0, 1fr));
  --grid-11: repeat(11, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));

  /* Grid Rows */
  --grid-rows-1: repeat(1, minmax(0, 1fr));
  --grid-rows-2: repeat(2, minmax(0, 1fr));
  --grid-rows-3: repeat(3, minmax(0, 1fr));
  --grid-rows-4: repeat(4, minmax(0, 1fr));
  --grid-rows-5: repeat(5, minmax(0, 1fr));
  --grid-rows-6: repeat(6, minmax(0, 1fr));

  /* Auto-fit Grid Columns */
  --grid-auto-2: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7,
          (100% - (2 - 1) * var(--grid-gap)) / 2
        )
      ),
      1fr
    )
  );

  --grid-auto-3: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7,
          (100% - (3 - 1) * var(--grid-gap)) / 3
        )
      ),
      1fr
    )
  );

  --grid-auto-4: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7,
          (100% - (4 - 1) * var(--grid-gap)) / 4
        )
      ),
      1fr
    )
  );

  --grid-auto-5: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7,
          (100% - (5 - 1) * var(--grid-gap)) / 5
        )
      ),
      1fr
    )
  );
  --grid-auto-6: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7,
          (100% - (6 - 1) * var(--grid-gap)) / 6
        )
      ),
      1fr
    )
  );
  --grid-auto-7: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7,
          (100% - (7 - 1) * var(--grid-gap)) / 7
        )
      ),
      1fr
    )
  );
  --grid-auto-8: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7,
          (100% - (8 - 1) * var(--grid-gap)) / 8
        )
      ),
      1fr
    )
  );
  --grid-auto-9: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7,
          (100% - (9 - 1) * var(--grid-gap)) / 9
        )
      ),
      1fr
    )
  );
  --grid-auto-10: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7,
          (100% - (10 - 1) * var(--grid-gap)) / 10
        )
      ),
      1fr
    )
  );
  --grid-auto-11: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7,
          (100% - (11 - 1) * var(--grid-gap)) / 11
        )
      ),
      1fr
    )
  );
  --grid-auto-12: repeat(
    auto-fit,
    minmax(
      min(
        100%,
        max(
          calc((var(--content-max-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7,
          (100% - (12 - 1) * var(--grid-gap)) / 12
        )
      ),
      1fr
    )
  );
}

body {
  font-family: "Montserrat", sans-serif;
}

/* body:not(.home) header {
  background-color: var(--section-color-1);
} */

h1,
h2,
h3,
h4 {
  color: var(--accent);
}

p {
  color: var(--white);
  margin-bottom: var(--space-xs);
  font-size: var(--text-s);
  opacity: 0.8;
}

figure {
  width: 100%;
  height: 100%;
}

.grid {
  display: grid;
  grid-gap: var(--space-m);
  grid-template-columns: var(--grid-2);
  /* Equal height */
  grid-auto-flow: column;
}

.grid > * {
  height: 100%;
}

@media (max-width: 992px) {
  .grid {
    grid-template-columns: var(--grid-1);
    grid-auto-flow: initial;
  }
}

.heading_text {
  position: relative;
  width: max-content;
  font-size: var(--text-m);
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: calc(var(--space-l) - var(--space-xs));
}

.heading_text::before,
.heading_text::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 40px;
  height: 1px;
  background-color: var(--accent);
}

.heading_text::before {
  left: -4rem;
}

.heading_text::after {
  right: -4rem;
}

.last-p-m0,
.heading-mb-0 {
  margin-bottom: 0;
}

.section_headline {
  margin-block-start: 88px;
  padding-block: var(--space-xs);
}

.button {
  padding: 0.4em 1em;
  align-self: center;
  color: var(--black);
  font-weight: 500;
  background-color: var(--accent);
  transition: background-color 0.3s ease-in-out;
}

.button_extra {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: 0.6rem;
}

.btn-icon {
  width: 14px;
  margin-inline-start: 0.5rem;
}

.btn-icon img {
  height: 100%;
  width: 100%;
}

.btn-text {
  line-height: 16px;
}

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

section {
  padding-inline: var(--gutter);
  padding-block: var(--space-l);
}

.section-color-1 {
  background-color: var(--section-color-1);
}

.section-color-2 {
  background-color: var(--section-color-2);
}

.container {
  width: var(--content-width);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.wrapper,
.wrapper_center {
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  gap: var(--space-xs);
}

.wrapper_center {
  justify-content: center;
  align-items: center;
}

/* ===== Intro Hero Image on Front Page ===== */
.intro-image-section {
  padding: 0;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}
.intro-image-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Tagline */
#main_hero_tagline1 {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  left: 57%;
  flex-direction: column;
  gap: var(--space-xs);
}

#main_hero_tagline1 h3 {
  white-space: nowrap;
  color: var(--white);
  font-family: "Montserrat";
  font-weight: 300;
  font-size: var(--text-xl);
  text-shadow: -4px -4px 10px black;
}

@media (max-width: 968px) {
  #main_hero_tagline1 {
    top: calc(100% - 14em);
    left: 60%;
    transform: translate(-50%, -50%);
  }
}

@media (max-width: 478px) {
  #main_hero_tagline1 {
    top: calc(100% - 5em);
    left: 50%;
  }

  #main_hero_tagline1 h3 {
    font-size: 1.5em;
    text-align: center;
  }
}

/* ===== Welcome Section ===== */

.section_welcome p {
  text-align: center;
  align-self: center;
  max-width: 80ch;
}

.numbers {
  width: 100%;
}

.numbers-grid {
  display: grid;
  grid-template-columns: var(--grid-3);
}

.numbers-grid li p:first-child {
  line-height: 1;
  font-size: 6em;
  font-weight: 700;
  opacity: 0.1;
  margin-top: 0;
  margin-bottom: 0;
}

.numbers-grid li p:last-child {
  line-height: 1.15;
  font-size: 1.5em;
  font-weight: 400;
  margin-block-start: 0.5rem;
}

@media (max-width: 834px) {
  .numbers-grid {
    grid-template-columns: var(--grid-1);
    gap: var(--space-m);
  }
}

/* ===== Expertise Section ===== */

.expertise_wrapper ul {
  display: grid;
  grid-template-columns: var(--grid-4);
  grid-gap: var(--space-s);
}

.expertise_item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-s);
  border: 1px solid var(--accent);
  padding-block: var(--space-s);
}

.expertise_wrapper ul li {
  display: flex;
  flex-direction: column;
}

.expertise_image img {
  width: 6rem;
  max-width: 100%;
}

.expertise_item h4 {
  width: 100%;
  font-weight: 400;
  font-size: 1.125rem;
  border-top: 1px solid rgba(169, 155, 112, 0.25);
  border-bottom: 1px solid rgba(169, 155, 112, 0.25);
  line-height: 2;
  text-align: center;
}

.expertise-text {
  text-align: center;
  padding-inline: var(--space-s);
}

@media (max-width: 996px) {
  .expertise_wrapper ul {
    grid-template-columns: var(--grid-2);
  }
}

@media (max-width: 478px) {
  .expertise_wrapper ul {
    grid-template-columns: var(--grid-1);
  }
}

/* ===== Case Victories ===== */

.section_case_victories .container {
  position: relative;
}

@media (min-width: 835px) {
  .section_case_victories .wrapper_center {
    width: calc(94% - 45px);
    margin-inline: auto;
  }
}

/* ===== Get In Touch ===== */

.get_in_touch {
  display: grid;
  grid-gap: 2rem;
  grid-template-columns: var(--grid-2);
}

.get_in_touch > * {
  height: auto;
}

.map {
  height: 780px;
}

.get_in_touch h3 {
  margin-block-end: 2rem;
  font-size: var(--text-s);
  font-weight: 400;
  text-transform: uppercase;
}

.fluentform {
  margin-top: 2rem;
}

.form .ff-default .ff-el-input--label label {
  color: var(--white);
  font-weight: 400;
}

.contact_map form.fluent_form_3 .ff-btn-submit:not(.ff_btn_no_style) {
  background-color: var(--accent);
  font-weight: normal;
}

.fluentform .ff-message-success {
  border-color: var(--accent);
  color: var(--white);
}
@media (max-width: 768px) {
  .get_in_touch {
    grid-template-columns: var(--grid-1);
  }

  .get_in_touch h3,
  .get_in_touch .form p {
    text-align: center;
  }

  .map {
    height: 600px;
  }
}

/* Page About Us */
/* --- CARD COMPONENT --- */
.card-image-overflow {
  padding-inline: var(--space-l);
  padding-block: 0;
  display: flex;
  align-items: stretch;
  position: relative;
  border-radius: 4px;
  margin-top: var(--space-l);
  margin-bottom: var(--space-l);
}

/* Left Side: Image (50%) */
.card-image-overflow .image-wrapper {
  flex: 1; /* Takes exactly 50% */
  position: relative;
  z-index: 10;

  /* Equal vertical breakout */
  margin-top: calc(var(--space-s) * -1);
  margin-bottom: calc(var(--space-s) * -1);

  /* Equal horizontal offset from the edge */
  margin-left: 0;
}

.card-image-overflow .card-hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
  border-radius: 4px;
}

/* Right Side: Text (50%) */
.card-image-overflow .content-wrapper {
  flex: 1; /* Takes exactly 50% */
  /* Padding matches the image's offset and spacing for symmetry */
  padding: var(--space-l);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main-heading {
  color: var(--accent);
  font-size: var(--text-xl);
  font-weight: 400;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

/* --- RESPONSIVE MOBILE VIEW --- */
@media (max-width: 992px) {
  .main-heading {
    font-size: 1.8rem;
  }

  .card-image-overflow {
    flex-direction: column;
    padding-inline: var(--space-s);
    margin-bottom: 0;
  }

  .card-image-overflow .about-card {
    padding-inline: var(--gutter);
    flex-direction: column;
    margin-top: calc(var(--space-l) * 2);
  }

  .card-image-overflow .image-wrapper {
    /* Center image and overlap only the top */
    /* margin: calc(var(--space-xs) * -2) var(--space-xs) var(--space-xs) var(--space-xs); */
    /* height: 350px; */
    flex: none;
    margin-bottom: var(--space-l);
  }

  .card-image-overflow .content-wrapper {
    padding: 0 0 var(--space-xs) 0;
    flex: none;
  }

  .main-heading {
    text-align: center;
  }
}

/* ===== Page: Corporate And Business Law ===== */

.corporate-business-law {
  background-color: var(--white);
}

/* ===== Footer ===== */

footer {
  background-color: var(--footer);
}

footer .site-info {
  display: grid;
  grid-template-columns: var(--grid-3);
  grid-gap: var(--space-xl);
  font-size: 0.875rem;
}

.site-info > div:not(:first-child) h4 {
  font-weight: 400;
  font-size: 1rem;
  padding-top: 1.875rem;
}

footer ul {
  margin-top: 38px;
  display: flex;
  flex-direction: column;
  gap: calc(var(--space-xs) / 2);
}

footer ul li {
  color: var(--white);
}

/* footer left */
.footer_left .logo_text {
  display: flex;
  align-items: center;
}

.footer_left .footer_logo {
  width: 3rem;
}

.footer_left .footer_bloginfo {
  margin-left: 0.5rem;
}

.footer_left .footer_bloginfo p {
  color: var(--accent);
  font-weight: normal;
  margin-bottom: 0;
}

.footer_left .footer_bloginfo h4 {
  color: var(--white);
  font-weight: normal;
}

.footer_left .summary_lede {
  margin-top: var(--space-s);
  display: flex;
  flex-direction: column;
}

/* footer center */

.footer_center .list-with-images {
  list-style: none;
  padding: 0;
}

.footer_center .list-with-images li {
  position: relative;
  padding-left: 44px;
  height: 42px;
}

/* Common pseudo-element styling */
.footer_center .list-with-images li:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 32px; /* image width */
  height: 32px; /* image height */
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Example: Image for 1st item */
.footer_center .list-with-images li:nth-child(1):after {
  background-image: url("img/address-icon.svg");
}

/* Example: Image for 2nd item */
.footer_center .list-with-images li:nth-child(2):after {
  background-image: url("img/phone-icon.svg");
}

/* Example: Image for 3rd item */
.footer_center .list-with-images li:nth-child(3):after {
  background-image: url("img/envelope-icon.svg");
}

.footer_center .list-with-images li a {
  position: relative;
  top: 6px;
}

/* footer right */

.footer_copyright {
  text-align: center;
  width: 100%;
  margin-top: var(--space-l);
}

.footer_copyright p {
  color: var(--accent);
}

@media (max-width: 768px) {
  footer .site-info {
    grid-template-columns: var(--grid-1);
    gap: 1rem;
  }
}