/* Milligram overrides */
:root {
    /*
     * Logo height, and the bar height that follows from it.
     *
     * 80px on a phone, 95px on a monitor, sliding between the two rather than
     * snapping at a breakpoint. Remember the root is 62.5%, so 1rem is 10px
     * here: 8rem and 9.5rem are those two numbers.
     *
     * The middle term is the ramp. 1.4vw is the slope and 7.5rem the offset,
     * which puts it at 80px around a 375px handset and 95px around a 1440px
     * monitor, with the clamp holding it steady outside that range. Tablets
     * land in between instead of picking one of the two extremes.
     *
     * These two live together because they have to agree. The hero on the
     * landing page sizes itself as "the viewport minus the nav", and that
     * subtraction used to be a hardcoded 8rem written when the logo was a
     * fixed 5.5rem. Changing one without the other pushed the hero past the
     * bottom of the screen and put a scrollbar on a page designed not to have
     * one. The bar height is derived now: logo, plus the 1rem padding top and
     * bottom, plus the 1px border.
     */
    --brand-logo-height: clamp(8rem, 7.5rem + 1.4vw, 9.5rem);
    --top-nav-height: calc(var(--brand-logo-height) + 2rem + 1px);

    /* The following are official CakePHP colors */
    --color-cakephp-red: #d33c43;
    --color-cakephp-gray: #404041;
    --color-cakephp-blue: #2f85ae;
    --color-cakephp-lightblue: #34bdd7;

    /* These are additional colors */
    --color-lightgray: #606c76;
    --color-white: #fff;

    --color-main-bg: #f5f7fa;
    --color-links: var(--color-cakephp-blue);
    --color-links-active: #2a6496;
    --color-headings: #363637;

    --color-message-success-bg: #e3fcec;
    --color-message-success-text: #1f9d55;
    --color-message-success-border: #51d88a;

    --color-message-warning-bg: #fffabc;
    --color-message-warning-text: #8d7b00;
    --color-message-warning-border: #d3b800;

    --color-message-error-bg: #fcebea;
    --color-message-error-text: #cc1f1a;
    --color-message-error-border: #ef5753;

    --color-message-info-bg: #eff8ff;
    --color-message-info-text: #2779bd;
    --color-message-info-border: #6cb2eb;

    /* Clean Flow brand colors, used site-wide for buttons */
    --color-brand-navy: #12466f;
    --color-brand-navy-mid: #1b5e96;
    --color-brand-navy-pale: #eaf2f8;
    --color-brand-yellow: #f2c230;
}

.button, button, input[type='button'], input[type='reset'], input[type='submit'] {
    background-color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}
.button:hover, button:hover, input[type='button']:hover, input[type='reset']:hover, input[type='submit']:hover,
.button:focus, button:focus, input[type='button']:focus, input[type='reset']:focus, input[type='submit']:focus {
    background-color: var(--color-brand-navy-mid);
    border-color: var(--color-brand-navy-mid);
}
.button:focus-visible, button:focus-visible, input[type='button']:focus-visible, input[type='reset']:focus-visible, input[type='submit']:focus-visible {
    outline: 3px solid var(--color-brand-yellow);
    outline-offset: 2px;
}
.button.button-outline {
    background-color: transparent;
    color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}
.button.button-outline:hover,
.button.button-outline:focus {
    background-color: var(--color-brand-navy-pale);
    color: var(--color-brand-navy);
    border-color: var(--color-brand-navy);
}

/* The nav is sticky, so an in-page jump like #services used to land with the
   heading tucked underneath it. That was already true and a taller logo makes
   it worse, so stop the scroll one bar height short of the target. */
html {
    scroll-padding-top: var(--top-nav-height);
}

body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 400;
    background: var(--color-main-bg);
}

.top-nav-links,
.side-nav,
h1, h2, h3, h4, h5, h6 {
    font-family: "Raleway", sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    color: var(--color-headings);
}

a {
    color: var(--color-links);
    transition: color 0.2s linear;
}

a:hover,
a:focus,
a:active {
    color: var(--color-links-active);
    transition: color 0.2s ease-out;
}

.side-nav a,
.top-nav-links a,
th a,
.actions a {
    color: var(--color-lightgray);
}

.side-nav a:hover,
.side-nav a:focus,
.actions a:hover,
.actions a:focus {
    color: var(--color-links-active);
}

/* Utility */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Main */
.content {
    padding: 2rem;
    background: var(--color-white);
    border-radius: 0.4rem;
    /* Thanks Stripe */
    box-shadow: 0 7px 14px 0 rgba(60, 66, 87, 0.1),
        0 3px 6px 0 rgba(0, 0, 0, 0.07);
}
.content form {
    margin: 0;
}
.actions a {
    font-weight: bold;
    padding: 0 0.4rem;
}
.actions a:first-child {
    padding-left: 0;
}
th {
    white-space: nowrap;
}

/* Nav bar */
.top-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 2rem;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.92);
    border-bottom: 1px solid rgba(18, 70, 111, 0.10);
    box-shadow: 0 8px 24px rgba(6, 28, 44, 0.10);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.top-nav-title {
    flex-shrink: 0;
    text-align: left;
}
.top-nav-title a {
    font-size: 2.4rem;
    color: var(--color-cakephp-red);
}
.top-nav-title span {
    color: var(--color-cakephp-gray);
}
/* The logo was a flat 5.5rem, which read as small on anything above a laptop
   because the bar around it grows with the viewport and the mark did not.

   The sizing is on --brand-logo-height at the top of this file, next to the
   nav height that depends on it. */
.top-nav-title .brand-logo {
    display: block;
    height: var(--brand-logo-height);
    width: auto;
}
.top-nav-links {
    display: flex;
    align-items: center;
}
.top-nav-links a {
    margin: 0 0 0 1.6rem;
}
.top-nav-links a.button {
    color: var(--color-white);
    margin-left: 2rem;
}
.top-nav-title a {
    font-weight: bold;
}

/* Every plain nav item - including the "Customer" menu trigger, which is a
   <summary> element rather than an <a> and so never matched the shared
   a{color:...} rule - gets the same colour, weight and hover treatment.
   Without this the summary fell back to the browser's default black text
   while the real links used the blue link colour, so "Customer" looked like
   it belonged to a different menu. */
.top-nav-links a:not(.button),
.top-nav-links .customer-menu summary {
    position: relative;
    color: var(--color-lightgray);
    font-weight: 600;
    transition: color 0.2s ease;
}
.top-nav-links a:not(.button):hover,
.top-nav-links a:not(.button):focus,
.top-nav-links .customer-menu summary:hover,
.top-nav-links .customer-menu[open] summary {
    color: var(--color-brand-navy);
}

/* An animated underline on hover for the plain links - the button and the
   dropdown trigger opt out, since a sliding underline under a CTA or a
   toggle control reads as broken rather than polished. */
.top-nav-links a:not(.button)::after {
    content: '';
    position: absolute;
    left: 0;
    right: 100%;
    bottom: -0.4rem;
    height: 0.2rem;
    background: var(--color-brand-navy);
    border-radius: 0.2rem;
    transition: right 0.25s ease;
}
.top-nav-links a:not(.button):hover::after,
.top-nav-links a:not(.button):focus::after {
    right: 0;
}

/* Everything above tried to make <summary> match the <a> tags by copying
   flexbox tricks onto it (display:flex, align-items:center, a manually
   centered inner span). None of it held up - <summary>/<details> carry
   enough browser-specific internal box behaviour that fighting it with more
   flex layers kept producing a slightly-off result somewhere.

   This instead removes every element-specific centering rule from summary
   and its wrapper, so there is exactly ONE thing centering every item in
   this row: .top-nav-links's own align-items:center, acting on plain
   inline-level boxes with the page's ordinary line-height - the same as
   every <a> tag next to it. No competing centering logic left to disagree. */
.top-nav-links .customer-menu,
.top-nav-links .customer-menu summary,
.top-nav-links .customer-menu__label {
    display: inline;
}
.top-nav-links .customer-menu summary {
    padding: 0.8rem 1rem;
    border-radius: 0.6rem;
    transition: color 0.2s ease, background-color 0.2s ease;
}
/* Measured as aligned to sub-pixel precision in both testing browsers used
   while building this, but it still reads as sitting a little high in
   practice - so a direct, deliberate nudge rather than more box-model
   archaeology. Adjust this value first if it still looks off. */
.top-nav-links .customer-menu__label {
    position: relative;
    top: 0.5px;
}
.top-nav-links .customer-menu summary:hover {
    background: var(--color-brand-navy-pale);
}

.top-nav-links a.button {
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.top-nav-links a.button:hover,
.top-nav-links a.button:focus {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 1.8rem rgba(18, 70, 111, 0.28);
}
.side-nav-item {
    display: block;
    padding: 0.5rem 0;
}

@media (max-width: 64rem) {
    .top-nav {
        position: relative;
        flex-direction: column;
        gap: 1rem;
    }
    .top-nav-title {
        text-align: center;
    }
    .top-nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.8rem 1.4rem;
    }
    .top-nav-links a,
    .top-nav-links a.button {
        margin-left: 0;
    }
}

/* View action */
.view.content .text {
    margin-top: 1.2rem;
}
.related {
    margin-top: 2rem;
}

/* Flash messages */
.message {
    padding: .5rem 1rem;
    background: var(--color-message-info-bg);
    color: var(--color-message-info-text);
    border-color: var(--color-message-info-border);
    border-width: 1px;
    border-style: solid;
    border-radius: 4px;
    margin-bottom: 1rem;
    cursor: pointer;
}
.message.hidden {
    display: none;
}
.message.success {
    background: var(--color-message-success-bg);
    color: var(--color-message-success-text);
    border-color: var(--color-message-success-border);
}
.message.warning {
    background: var(--color-message-warning-bg);
    color: var(--color-message-warning-text);
    border-color: var(--color-message-warning-border);
}
.message.error {
    background: var(--color-message-error-bg);
    color: var(--color-message-error-text);
    border-color: var(--color-message-error-border);
}

/* Forms */
.input {
    margin-bottom: 1.5rem;
}
.input input,
.input select,
.input textarea {
    margin-bottom: 0;
}
.input label:has(input[type='checkbox']),
.input label:has(input[type='radio']) {
    display: flex;
    align-items: center;
}
.input label:has(~ label),
.input label:has(input[type='radio']) {
    margin-bottom: 0;
}
.input label > input[type='checkbox'],
.input label > input[type='radio'] {
    margin-right: 1.0rem;
}
input[type='color'] {
    max-width: 4rem;
    padding: 0.3rem .5rem 0.3rem;
}
.error-message {
    color: var(--color-message-error-text);
}

/* Paginator */
.paginator {
    text-align: right;
}
.paginator p {
    margin-bottom: 0;
}
.pagination {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 0 1rem 0;
    padding: 0;
}
.pagination li {
    display: inline-block;
    margin: 0.25em;
    text-align: center;
}
.pagination a {
    color: var(--color-cakephp-blue);
    display: inline-block;
    font-size: 1.25rem;
    line-height: 3rem;
    min-width: 3rem;
    padding: 0;
    position: relative;
    text-decoration: none;
    transition: background .3s,color .3s;
}
.pagination li.active a,
.pagination a:hover {
    text-decoration: underline;
}
.pagination .disabled a {
    cursor: not-allowed;
    color: var(--color-lightgray);
    text-decoration: none;
}
.first a,
.prev a,
.next a,
.last a {
    padding: 0 .75rem;
}
.disabled a:hover {
    background: initial;
    color: initial;
}
.asc:after {
    content: " \2193";
}
.desc:after {
    content: " \2191";
}

/* Error in non debug mode */
.error-container {
    align-items: center;
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: center;
}

@media screen and (max-width: 640px) {
    /* Fix milligram not having a responsive column system */
    .row .column[class*='column-'] {
        flex: 0 0 100%;
        max-width: 100%
    }
    .top-nav {
        margin: 0 auto;
    }
    .side-nav {
        margin-bottom: 1rem;
    }
    .heading {
        margin-bottom: 1rem;
    }
    .side-nav-item {
        display: inline;
        margin: 0 1.5rem 0 0;
    }
    .asc:after {
        content: " \2192";
    }
    .desc:after {
        content: " \2190";
    }
}