/*
Client Styleguide
-----------------
Typography extracted from https://precisionairaz.com/

Fonts used:
    - Poppins (400, 500, 600, 700) — display + body
    - Open Sans (400, 500, 600, 700) — loaded as secondary
    - Inter kept in stack as final sans-serif fallback

Load the fonts (e.g. in header.php or functions.php wp_enqueue_scripts):
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Open+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
*/

:root {
    --cs-font-family-display: "Poppins", "Inter", Helvetica, Arial, sans-serif;
    --cs-font-family-body: "Poppins", "Inter", Helvetica, Arial, sans-serif;
    --cs-font-family-secondary: "Open Sans", Helvetica, Arial, sans-serif;

    /* Mobile-first sizes */
    --cs-font-size-h1: 2rem;        /* 32px */
    --cs-font-size-h2: 1.625rem;    /* 26px */
    --cs-font-size-h3: 1.5rem;      /* 24px */
    --cs-font-size-h4: 1.25rem;     /* 20px */
    --cs-font-size-body: 1rem;      /* 16px */
    --cs-font-size-small: 0.875rem; /* 14px */
    --cs-font-size-smaller: 0.625rem; /* 10px */
    --cs-font-size-bodyEmphasis: 1.25rem; /* 20px */
    --cs-font-size-extravagant: 3rem; /* 48px */
    --cs-font-size-button: 1rem;    /* 16px */

    --cs-font-weight-regular: 400;
    --cs-font-weight-medium: 500;
    --cs-font-weight-semibold: 600;
    --cs-font-weight-bold: 700;

    --cs-line-height-tight: 1.2;
    --cs-line-height-snug: 1.25;
    --cs-line-height-relaxed: 1.35;
    --cs-line-height-base: 1.5;
    --cs-line-height-button: 1;
}

/* Base
--------------------------------------------- */
body {
    font-family: var(--cs-font-family-body);
    font-size: var(--cs-font-size-body);
    font-weight: var(--cs-font-weight-regular);
    line-height: var(--cs-line-height-base);
}

p {
    font-family: var(--cs-font-family-body);
    font-size: var(--cs-font-size-body);
    font-weight: var(--cs-font-weight-regular);
    line-height: var(--cs-line-height-base);
}

small,
.text-small,
.text-caption {
    font-size: var(--cs-font-size-small);
    line-height: var(--cs-line-height-base);
}

.text-smaller {
    font-size: var(--cs-font-size-smaller);
}

.text-bodyEmphasis {
    font-size: var(--cs-font-size-bodyEmphasis);
    font-weight: var(--cs-font-weight-semibold);
    line-height: var(--cs-line-height-relaxed);
}

.text-extravagant {
    font-size: var(--cs-font-size-extravagant);
    line-height: var(--cs-line-height-tight);
    font-weight: var(--cs-font-weight-bold);
}

/* Headings
--------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--cs-font-family-display);
    font-weight: var(--cs-font-weight-bold);
    margin: 0 0 0.5em;
}

h1 {
    font-size: var(--cs-font-size-h1);
    line-height: var(--cs-line-height-tight);
    font-weight: var(--cs-font-weight-bold);
}

h2 {
    font-size: var(--cs-font-size-h2);
    line-height: var(--cs-line-height-tight);
    font-weight: var(--cs-font-weight-bold);
}

h3 {
    font-size: var(--cs-font-size-h3);
    line-height: var(--cs-line-height-snug);
    font-weight: var(--cs-font-weight-semibold);
}

h4 {
    font-size: var(--cs-font-size-h4);
    line-height: var(--cs-line-height-relaxed);
    font-weight: var(--cs-font-weight-semibold);
}

/* Responsive heading sizes — the client's site bumps up at ≥992px */
@media screen and (min-width: 992px) {
    h1 {
        font-size: 2.75rem; /* 44px */
    }

    h2 {
        font-size: 2.25rem; /* 36px */
    }

    h3 {
        font-size: 1.625rem; /* 26px */
    }
}

/* Buttons
--------------------------------------------- */
button,
.btn,
a.btn,
input[type="button"],
input[type="submit"] {
    font-family: var(--cs-font-family-body);
    font-size: var(--cs-font-size-button);
    font-weight: var(--cs-font-weight-semibold);
    line-height: var(--cs-line-height-button);
}

/* Responsive Menu Pro mobile items styled to match the Jobber client-login button
--------------------------------------------- */
#rmp-menu-item-708 > a,
#rmp-menu-item-708 > a:visited,
#rmp-menu-item-709 > a,
#rmp-menu-item-709 > a:visited,
.rmp-menu-item-708 > a,
.rmp-menu-item-708 > a:visited,
.rmp-menu-item-709 > a,
.rmp-menu-item-709 > a:visited {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 40px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background-color: #ffffff;
    color: rgb(0, 97, 255);
    font-family: var(--cs-font-family-body);
    font-size: 14px;
    font-weight: var(--cs-font-weight-semibold);
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.2s ease-out, color 0.2s ease-out;
    -webkit-appearance: none;
    appearance: none;
}

#rmp-menu-item-708 > a:hover,
#rmp-menu-item-709 > a:hover,
.rmp-menu-item-708 > a:hover,
.rmp-menu-item-709 > a:hover {
    background-color: #f1f0e9;
    color: rgb(51, 129, 255);
}

/* Primary nav sub-menu (styled to match the Jobber floating menu)
--------------------------------------------- */
#primary-menu .menu-item-has-children {
    position: relative;
}

/* Caret indicator on the Services dropdown parent */
#primary-menu #menu-item-707 > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

#primary-menu #menu-item-707 > a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.29297 9.29297C6.68349 8.90245 7.31651 8.90245 7.70703 9.29297L12 13.5859L16.293 9.29297C16.6835 8.90245 17.3165 8.90245 17.707 9.29297C18.0975 9.68349 18.0975 10.3165 17.707 10.707L12.707 15.707C12.3165 16.0975 11.6835 16.0975 11.293 15.707L6.29297 10.707C5.90245 10.3165 5.90245 9.68349 6.29297 9.29297Z'/></svg>");
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.29297 9.29297C6.68349 8.90245 7.31651 8.90245 7.70703 9.29297L12 13.5859L16.293 9.29297C16.6835 8.90245 17.3165 8.90245 17.707 9.29297C18.0975 9.68349 18.0975 10.3165 17.707 10.707L12.707 15.707C12.3165 16.0975 11.6835 16.0975 11.293 15.707L6.29297 10.707C5.90245 10.3165 5.90245 9.68349 6.29297 9.29297Z'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

#primary-menu #menu-item-707:hover > a::after,
#primary-menu #menu-item-707:focus-within > a::after {
    transform: rotate(180deg);
}

#primary-menu .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 240px;
    margin: 8px 0 0;
    padding: 8px;
    list-style: none;
    background-color: #ffffff;
    border: 1px solid hsl(200, 13%, 87%);
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 4px 12px rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s linear 0.2s;

    display: flex;
    flex-direction: column;
    visibility: visible;
}

#primary-menu .menu-item-has-children:hover > .sub-menu,
#primary-menu .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out, visibility 0s;
}

#primary-menu .sub-menu .menu-item {
    display: block;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

#primary-menu .sub-menu .menu-item:first-child,
#primary-menu .sub-menu .menu-item:last-child {
    border-radius: 0;
}

#primary-menu .sub-menu .menu-item a {
    display: block;
    padding: 8px;
    border-radius: 8px;
    font-family: var(--cs-font-family-body);
    font-size: var(--cs-font-size-body);
    font-weight: var(--cs-font-weight-semibold);
    line-height: 1.35;
    color: #233d48;
    text-align: left;
    text-decoration: none;
    transition: background-color 0.2s ease-out;
}

#primary-menu .sub-menu .menu-item a:hover,
#primary-menu .sub-menu .menu-item a:focus-visible {
    background-color: #f1f0e9;
    color: #233d48;
}