/* ==========================================================================
   Design tokens — values taken from the existing Morgan Hill Solicitors site
   ========================================================================== */

:root {
    /* --- Brand colours --- */
    --color-maroon-dark: #5C171F;   /* top contact bar background */
    --color-maroon-mid: #89212E;    /* off-canvas menu panel (tablet) */
    --color-maroon: #7C202A;        /* off-canvas menu panel (mobile) */
    --color-accent: #101010;        /* icon / submenu hover colour */
    --color-white: #FFFFFF;
    --color-text: #5F5F5F;
    --color-secondary: #0D1E1E;
    --color-grey-light: #F4F4F9;   /* section background */
    --color-grey-mid: #868080;     /* "why choose us" background */
    --color-card-bg: #F5F5F5;      /* team card background */
    --color-border: #E2E2E8;
    --color-dark-grey: #3C3C3C;    /* button hover */
    --color-text-light: #D3D3D3;   /* body copy on dark backgrounds */
    --color-button-text: #F8F8F8;

    /* --- Header specific --- */
    --color-header-divider: rgba(255, 255, 255, 0.19);  /* #FFFFFF30 */
    --color-header-border: rgba(255, 255, 255, 0.11);   /* #FFFFFF1C */
    --color-submenu-bg: #FFFFFF;
    --color-submenu-text: rgba(19, 17, 9, 0.5);         /* #13110980 */
    --color-overlay: rgba(0, 0, 0, 0.5);

    /* --- Hero --- */
    --color-hero-overlay: rgba(102, 22, 22, 0.76);  /* #661616C2 */
    --color-hero-text: #CBCBCB;
    --color-breadcrumb-text: #EAEAEA;   /* breadcrumb on an inner-page banner */
    --color-gold: #DFAE4F;   /* accent colour from the existing site's palette */
    --color-divider: #ECECEC;     /* hairline rules between grid cells */
    --color-faq-border: rgba(19, 16, 58, 0.12);   /* #13103A1F */
    --color-rule: rgba(19, 16, 58, 0.16);         /* #13103A29 */

    /* --- Typography --- */
    --font-primary: "Montserrat", "Helvetica Neue", Arial, sans-serif;
    --font-body: "Work Sans", "Helvetica Neue", Arial, sans-serif;
    --font-heading: "Cormorant Garamond", Georgia, "Times New Roman", serif;
    --font-card-title: "Marcellus", Georgia, "Times New Roman", serif;

    --font-size-nav: 12px;
    --letter-spacing-nav: 2px;
    --font-size-header-info: 13px;

    /* --- Layout --- */
    --container-width: 1200px;
    --header-nav-height: 70px;
    --logo-width: 104px;

    /* Height of the transparent logo/navigation row. The page hero is pulled
       up by exactly this amount so the row always sits over the hero and no
       page background is ever exposed behind it. Overridden per breakpoint
       in header.css. */
    --header-row-height: 90px;

    /* Right-hand inset applied to the main menu on the existing site
       (Elementor column padding of 251px + 15px widget margin). */
    --nav-inset-right: 251px;

    /* Breakpoint at which the menu collapses into the hamburger (1024px) */
}