/* Google review look: white pages, Google blue for actions, and Google red, yellow and green as accents.
   It overrides the teal and dark theme classes, so the pages keep their layout and only the colours change. */

:root {
    --g-blue: #4285f4;
    --g-red: #ea4335;
    --g-yellow: #fbbc05;
    --g-green: #34a853;
    --g-text: #202124;
    --g-muted: #5f6368;
    --g-line: #dadce0;
}

html,
body {
    background: #ffffff !important;
    color: var(--g-text) !important;
    font-family: Roboto, "Google Sans", Arial, sans-serif !important;
}

/* Dark surfaces become white */
.bg-slate-900,
.bg-slate-900\/30,
.bg-slate-900\/50,
.bg-slate-900\/60 {
    background-color: #ffffff !important;
}
.bg-slate-900\/70,
.bg-slate-900\/80,
.bg-slate-900\/90,
.bg-slate-950,
.bg-slate-950\/50,
.bg-slate-950\/80 {
    background-color: #ffffff !important;
}
/* The top bar: white and slightly see-through, with a light edge */
.glass-nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid var(--g-line) !important;
}
.bg-slate-800,
.bg-slate-800\/50 {
    background-color: #f8f9fa !important;
}
.border-slate-500,
.border-slate-600,
.border-slate-700,
.border-slate-800 {
    border-color: var(--g-line) !important;
}

/* Light text on dark becomes dark text; grey text stays grey */
.text-white,
.text-slate-100,
.text-slate-200,
.text-slate-300 {
    color: var(--g-text) !important;
}
.text-slate-400,
.text-slate-500 {
    color: var(--g-muted) !important;
}

/* Teal brand becomes Google blue. Listed one by one, so the body and the selection colours are not caught. */
.bg-brand-500,
.bg-brand-400,
.bg-brand-600 {
    background-color: var(--g-blue) !important;
    color: #ffffff !important;
}
.bg-brand-500\/10,
.bg-brand-500\/20,
.bg-brand-400\/10,
.bg-brand-400\/20 {
    background-color: rgba(66, 133, 244, 0.12) !important;
}
.bg-brand-dark,
.bg-brand-card,
.bg-brand-900 {
    background-color: #ffffff !important;
}
.text-brand-300,
.text-brand-400,
.text-brand-500,
.text-brand-600 {
    color: var(--g-blue) !important;
}
.text-brand-dark {
    color: var(--g-text) !important;
}
.border-brand-300,
.border-brand-400,
.border-brand-500 {
    border-color: var(--g-blue) !important;
}

/* The gradient headline becomes solid Google blue, so it can be read on white */
.text-gradient {
    background: none !important;
    -webkit-text-fill-color: var(--g-blue) !important;
    color: var(--g-blue) !important;
}

/* Emerald accents become Google green */
[class*="text-emerald-"] {
    color: var(--g-green) !important;
}
[class*="bg-emerald-"]:not([class*="/"]) {
    background-color: var(--g-green) !important;
    color: #ffffff !important;
}
[class*="border-emerald-"] {
    border-color: rgba(52, 168, 83, 0.4) !important;
}

/* No dark gradients */
[class*="bg-gradient-"],
[class*="from-"],
[class*="to-"] {
    background-image: none !important;
}

/* Cards: white, thin grey border, soft shadow, like a Google review card */
.rounded-2xl,
.rounded-3xl {
    border: 1px solid var(--g-line);
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15), 0 1px 3px 1px rgba(60, 64, 67, 0.08);
}

/* Form fields */
input,
select,
textarea {
    background-color: #ffffff !important;
    color: var(--g-text) !important;
    border: 1px solid var(--g-line) !important;
}
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--g-blue);
    outline-offset: 1px;
}

/* A four-colour Google bar along the top of the page */
header:first-of-type,
body > header {
    border-bottom: 4px solid transparent;
    border-image: linear-gradient(90deg, var(--g-blue) 0 25%, var(--g-red) 25% 50%, var(--g-yellow) 50% 75%, var(--g-green) 75% 100%) 1;
}

/* Dark gradient cards from the site stylesheet become white cards */
.step-card,
.glass,
.glass-card,
.feature-card,
.product-card {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--g-line) !important;
}

/* Teal and cyan accents become Google blue, so small labels and icons stay readable on white */
.text-teal-200,
.text-teal-300,
.text-teal-400,
.text-teal-500,
.text-cyan-300,
.text-cyan-400 {
    color: var(--g-blue) !important;
}
.border-teal-400,
.border-teal-500,
.border-teal-500\/30,
.border-cyan-400\/30 {
    border-color: rgba(66, 133, 244, 0.45) !important;
}
.bg-teal-500\/10,
.bg-teal-500\/20,
.bg-cyan-500\/10,
.bg-cyan-500\/20 {
    background-color: rgba(66, 133, 244, 0.12) !important;
}

/* Light text colours that are too faint on white become readable greys and Google blue */
.text-slate-400,
.text-slate-500,
.text-slate-600,
[class*="text-slate-4"],
[class*="text-slate-5"] {
    color: var(--g-muted) !important;
}
[class*="text-blue-"],
[class*="text-purple-"],
[class*="text-violet-"],
[class*="text-pink-"],
[class*="text-teal-"],
[class*="text-cyan-"],
[class*="text-indigo-"] {
    color: #1a73e8 !important;
}
.step-card h2,
.step-card h3,
.step-card h4,
.step-card .text-white {
    color: var(--g-text) !important;
}

/* Labels, paragraphs and step tags set by the site stylesheet */
label,
.label,
.wizard-progress,
p {
    color: var(--g-muted) !important;
}
.step-tag {
    color: #1a73e8 !important;
}
.step-card p {
    color: var(--g-muted) !important;
}

/* The business card tool's panels were dark gradients */
.panel {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--g-line) !important;
}

/* Grey buttons, the wizard's Next button, table headers, footer links and the accessibility panel */
.bg-slate-700,
.bg-slate-700\/50 {
    background-color: #f1f3f4 !important;
    color: var(--g-text) !important;
}
.bg-slate-700:hover,
.hover\:bg-brand-500:hover {
    background-color: #e8eaed !important;
}
.wizard-next,
.wizard-next:hover {
    background-color: var(--g-blue) !important;
    color: #ffffff !important;
}
thead,
thead th {
    background-color: #f8f9fa !important;
}
footer a,
footer span {
    color: var(--g-muted) !important;
}
.a11y-panel {
    background: #ffffff !important;
    color: var(--g-text) !important;
    border: 1px solid var(--g-line) !important;
}
.a11y-title,
.a11y-panel p {
    color: var(--g-text) !important;
}

/* The logo's accent word */
.font-display.font-bold.tracking-wider span {
    color: var(--g-blue) !important;
}

/* Pale accent words (amber, orange, rose, sky and the NFC brand colour) become darker versions that read on white */
.text-amber-300,
.text-amber-400,
.text-yellow-300,
.text-yellow-400,
.text-orange-300,
.text-orange-400 {
    color: #b06000 !important;
}
.text-rose-300,
.text-rose-400,
.text-red-300,
.text-red-400 {
    color: #d93025 !important;
}
.text-sky-300,
.text-sky-400,
.text-brand-nfc {
    color: #1a73e8 !important;
}
.bg-brand-nfc\/1,
.bg-brand-nfc\/10,
.bg-brand-nfc\/20 {
    background-color: rgba(66, 133, 244, 0.12) !important;
}

/* Gradient headline words were transparent once their gradient was removed; they become solid Google blue */
.text-transparent.bg-clip-text,
.bg-clip-text {
    background: none !important;
    -webkit-text-fill-color: var(--g-blue) !important;
    color: var(--g-blue) !important;
}

/* Buttons are solid colours, not gradients */
button,
[role="button"],
.wizard-btn {
    background-image: none !important;
}

/* The menu button: light grey with a dark icon, so it shows on white */
#mobile-menu-btn,
.icon-btn {
    background-color: #f1f3f4 !important;
    border: 1px solid var(--g-line) !important;
    color: var(--g-text) !important;
}
#mobile-menu-btn:hover,
.icon-btn:hover {
    background-color: #e8eaed !important;
    color: var(--g-blue) !important;
}

/* Pop-up boxes in the business card tool: white boxes on a light overlay, with solid Google blue buttons */
.modal {
    background-color: #ffffff !important;
    border: 1px solid var(--g-line) !important;
    box-shadow: 0 12px 32px rgba(60, 64, 67, 0.25) !important;
    color: var(--g-text) !important;
}
.modalBack {
    background-color: rgba(32, 33, 36, 0.45) !important;
}
.primary {
    background-color: var(--g-blue) !important;
    border-color: var(--g-blue) !important;
    color: #ffffff !important;
}
.primary:hover {
    filter: brightness(0.95);
}

/* Small share, view and note buttons in the card tool */
.shareBtn,
.noteBtn {
    background-color: #f1f3f4 !important;
    border: 1px solid var(--g-line) !important;
    color: var(--g-blue) !important;
}
.shareBtn:hover,
.noteBtn:hover {
    background-color: #e8eaed !important;
}

/* Keep the hub preview (the phone mockup) and the Instagram card as they were in the original dark theme */
.phone-mockup .bg-slate-900,
.phone-mockup .bg-slate-900\/50,
.phone-mockup .bg-slate-900\/60,
.phone-mockup .bg-slate-900\/70,
.phone-mockup .bg-slate-900\/80,
.phone-mockup .bg-slate-900\/90 {
    background-color: rgba(15, 23, 42, 0.9) !important;
}
.phone-mockup .bg-slate-800,
.phone-mockup .bg-slate-800\/50 {
    background-color: #1e293b !important;
}
.phone-mockup .bg-slate-950,
.phone-mockup .bg-slate-950\/50 {
    background-color: #020617 !important;
}
.phone-mockup .text-white,
.phone-mockup .text-slate-100,
.phone-mockup .text-slate-200,
.phone-mockup .text-slate-300 {
    color: #ffffff !important;
}
.phone-mockup .text-slate-400,
.phone-mockup .text-slate-500 {
    color: #94a3b8 !important;
}
.phone-mockup [class*="text-brand-"] {
    color: #2dd4bf !important;
}
.phone-mockup [class*="bg-brand-"]:not([class*="/"]) {
    background-color: #2dd4bf !important;
    color: #0f172a !important;
}
.phone-mockup [class*="border-slate-"] {
    border-color: #334155 !important;
}

/* The Instagram card keeps its Instagram gradient */
div[class*="from-[#833ab4]"] {
    background-image: linear-gradient(to top right, #833ab4, #fd1d1d, #fcb045) !important;
}

/* The Instagram card's text and icons stay white on its gradient */
div[class*="from-[#833ab4]"],
div[class*="from-[#833ab4]"] * {
    color: #ffffff !important;
}
div[class*="from-[#833ab4]"] svg,
div[class*="from-[#833ab4]"] svg *,
div[class*="from-[#833ab4]"] i {
    color: #ffffff !important;
    fill: #ffffff !important;
    stroke: #ffffff !important;
}

/* Service cards are clickable: the whole card links to its own page */
.service-card {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.service-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(60, 64, 67, 0.18) !important;
}
.service-card:focus-within {
    outline: 2px solid var(--g-blue);
    outline-offset: 3px;
}
.service-link {
    color: inherit !important;
    text-decoration: none !important;
}
.service-link:focus {
    outline: none;
}
.service-link::after {
    content: "";
    position: absolute;
    inset: 0;
}

/* City map pages: the service links are nice clickable cards */
ul.grid > li > a.glass-card {
    display: flex;
    flex-direction: column;
    gap: 6px;
    height: 100%;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid var(--g-line) !important;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.15), 0 1px 3px 1px rgba(60, 64, 67, 0.08);
    text-decoration: none !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
ul.grid > li > a.glass-card:hover,
ul.grid > li > a.glass-card:focus-visible {
    transform: translateY(-3px);
    border-color: var(--g-blue) !important;
    box-shadow: 0 10px 24px rgba(60, 64, 67, 0.18);
    outline: none;
}
ul.grid > li > a.glass-card .font-display {
    color: var(--g-text) !important;
    font-size: 18px;
}
ul.grid > li > a.glass-card::after {
    content: "Learn more \2192";
    margin-top: 6px;
    color: var(--g-blue);
    font-size: 14px;
    font-weight: 600;
}

/* City map pages: an odd last service card sits centred across the grid */
@media (min-width: 640px) {
    ul.grid > li:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - 8px);
    }
}

/* Service area index: every town as a neat link */
.city-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 10px;
}
.city-link {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--g-line);
    border-radius: 12px;
    background: #ffffff;
    color: var(--g-text) !important;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(60, 64, 67, 0.12);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.city-link:hover,
.city-link:focus-visible {
    border-color: var(--g-blue);
    box-shadow: 0 6px 16px rgba(60, 64, 67, 0.16);
    transform: translateY(-2px);
    outline: none;
}

/* Link hub cards on phones: the next card shows about 15% more of its width */
@media (max-width: 767.98px) {
    #digital-hub ul.overflow-x-auto > li {
        flex: 0 0 auto;
        width: 58%;
        min-width: 58%;
    }
}

/* Tech stack icons on phones: equal cells, so the nine icons fit on two lines */
@media (max-width: 639px) {
    .stack-icons {
        gap: 8px;
    }
    .stack-icons > * {
        width: 36px;
        height: 36px;
        margin: 0 !important;
        padding: 0 !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
    }
    .stack-icons .stack-svg {
        width: 22px;
        height: 22px;
    }
}

/* Tech stack on phones: icons only, no text labels under them, so the grid stays tidy */
@media (max-width: 639px) {
    .stack-icons [data-tip]::after,
    .stack-icons .stack-tip::after {
        content: none !important;
        display: none !important;
    }
}

/* Link hub cards on phones: titles and text fit inside each card */
@media (max-width: 767.98px) {
    #digital-hub ul.overflow-x-auto > li {
        padding: 16px;
        gap: 12px;
    }
    #digital-hub ul.overflow-x-auto > li > div:last-child {
        min-width: 0;
        flex: 1 1 0;
    }
    #digital-hub ul.overflow-x-auto > li h5 {
        font-size: 15px;
        line-height: 1.3;
    }
    #digital-hub ul.overflow-x-auto > li > div:first-child {
        width: 32px;
        flex: 0 0 32px;
    }
}

/* Link hub cards on phones: the icon sits on top, and the title and description go under it */
@media (max-width: 767.98px) {
    #digital-hub ul.overflow-x-auto > li {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    #digital-hub ul.overflow-x-auto > li > div:first-child {
        width: 32px;
        flex: 0 0 32px;
    }
    #digital-hub ul.overflow-x-auto > li > div:last-child {
        width: 100%;
        flex: 0 0 auto;
    }
}

/* Link hub cards on phones: icon and title side by side on one line, the description under both */
@media (max-width: 767.98px) {
    #digital-hub ul.overflow-x-auto > li {
        display: grid;
        grid-template-columns: 32px 1fr;
        column-gap: 12px;
        row-gap: 8px;
        align-items: center;
    }
    #digital-hub ul.overflow-x-auto > li > div:first-child {
        grid-column: 1;
        grid-row: 1;
    }
    #digital-hub ul.overflow-x-auto > li > div:last-child {
        display: contents;
    }
    #digital-hub ul.overflow-x-auto > li h5 {
        grid-column: 2;
        grid-row: 1;
        margin: 0;
    }
    #digital-hub ul.overflow-x-auto > li p {
        grid-column: 1 / -1;
        grid-row: 2;
        margin: 0;
    }
}

/* Tech stack on phones: smaller equal cells so five icons fit per row, and the MySQL logo is large enough to see */
@media (max-width: 639px) {
    .stack-icons {
        gap: 6px;
    }
    .stack-icons > * {
        width: 32px;
        height: 32px;
        font-size: 20px;
    }
    .stack-icons .stack-svg {
        width: 24px;
        height: 24px;
    }
    .stack-icons .stack-mysql,
    .stack-icons .stack-phpmyadmin {
        width: 26px;
        height: 26px;
    }
}

/* Card previews fill the card: the picture covers the whole card face, with no white edges */
.hc-face img {
    object-fit: cover !important;
}