/* iDeate Solutions Web Kit | Permanent component styles
   Loaded after theme.css and before branding.css.
   This file replaces historical v2/v3/v4 override stylesheets.
   Order is preserved so the approved appearance stays unchanged. */

/* ============================================================
   BRAND COLOR UTILITIES AND CARD VARIANTS
   Consolidated, approved design rules. Maintain selectors here.
   ============================================================ */
/* Enterprise Web Kit v2: color customizations based on supplied site CSS declarations.
   Keep this file loaded after theme.css. No third-party brand assets required. */

/* V2 COLOR CUSTOM PROPERTIES: Brand aliases and role values. */
:root {
   --cta-text: #111923;
}

/* Gold for prominent header CTA only */
.main-header .header-action.btn-neutral {
   background: var(--accent-gold);
   border-color: var(--accent-gold);
   color: #111923;
}

.main-header .header-action.btn-neutral:hover {
   background: #eb8d20;
   border-color: #eb8d20;
   color: #111923;
}

/* Teal on section labels and feature highlights */
.hero .kicker,
.section.dark .kicker {
   color: var(--accent-teal);
}

.section .kicker {
   color: #007e60;
}

.hero h1 span {
   color: var(--accent-gold);
}

.hero.light h1 span {
   color: #a45600;
}

.feature-list li::before {
   color: #008b68;
}

/* Primary red buttons - dark text ensures contrast on bright red */
.btn-primary {
   background: var(--accent-red);
   border-color: var(--accent-red);
   color: var(--cta-text);
}

.btn-primary:hover {
   background: #ad1049;
   border-color: #ad1049;
   color: #111923;
}

.btn-primary:active {
   background: #920d3d;
   color: white;
}

/* Secondary non-featured pricing CTAs in teal */
#pricing .card:not(.is-featured) .btn-neutral,
.pricing-grid .card:not(.is-featured) .btn-neutral {
   background: var(--accent-teal);
   border-color: var(--accent-teal);
   color: #082c24;
}

#pricing .card:not(.is-featured) .btn-neutral:hover,
.pricing-grid .card:not(.is-featured) .btn-neutral:hover {
   background: #02ac7b;
   color: #082c24;
}

/* Keep the pink / violet / blue outer-glow composition. */
.card.is-featured,
.card:hover,
.card:focus-within,
.card:focus-visible {
   border-color: #d9c2e8;
}

.card .badge {
   color: #875100;
}

/* Call-to-action band and buttons are independent themes */
.cta-band {
   background: var(--accent-teal);
   color: #082c24;
}

.cta-band h2,
.cta-band p {
   color: #082c24;
}

.cta-band .btn-primary {
   background: var(--accent-red);
   color: #111923;
}

.cta-band .btn-primary:hover {
   background: #ad1049;
}

/* Pink footer, with dark text for legibility */
.site-footer {
   background: var(--accent-pink);
   color: #111923;
}

.site-footer h3,
.site-footer a,
.site-footer .footer-bottom {
   color: #111923;
}

.site-footer a:hover {
   text-decoration: underline;
}

.site-footer .footer-bottom {
   border-top-color: rgba(17, 25, 35, .35);
}

/* Standalone colored service tile utilities: useful on pricing catalogs. */
.service-tile {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   justify-content: center;
   min-height: 340px;
   padding: 38px 24px;
   border-radius: 0;
   color: #fff;
   box-shadow: var(--shadow-md);
}

.service-tile h3,
.service-tile p {
   color: #fff;
}

.service-tile--blue {
   background: var(--accent-blue);
}

.service-tile--teal {
   background: var(--accent-teal);
}

.service-tile--gold {
   background: var(--accent-gold);
}

.service-tile--pink {
   background: var(--ideate-pink-deep);
}

.service-tile .btn {
   border: 2px solid #fff;
   color: #fff;
   background: transparent;
   border-radius: var(--radius-pill);
   min-width: 150px;
   margin-top: auto;
}

.service-tile .btn:hover {
   background: #fff;
   color: #161e2d;
}

@media(prefers-reduced-motion:reduce) {
   .service-tile .btn {
      transition: none;
   }
}

.palette-dot {
   display: block;
   width: 100%;
   height: 64px;
   border-radius: 10px;
   border: 1px solid #0001;
   margin-bottom: 12px;
}

/* Site-source palette utilities (not required for component styling) */
.text-white {
   color: var(--ideate-white)
}

.text-pink {
   color: var(--ideate-pink)
}

.text-black {
   color: var(--ideate-black)
}

.text-purple {
   color: var(--ideate-purple)
}

.text-green {
   color: var(--ideate-green)
}

.text-blue {
   color: var(--ideate-blue)
}

.text-teal {
   color: var(--ideate-teal)
}

.text-orange {
   color: var(--ideate-orange)
}

.text-magenta {
   color: var(--ideate-magenta)
}

.bg-transparent {
   background: transparent
}

.bg-pink {
   background: var(--ideate-pink)
}

.bg-purple {
   background: var(--ideate-purple)
}

.bg-green {
   background: var(--ideate-green)
}

.bg-blue {
   background: var(--ideate-blue)
}

.bg-teal {
   background: var(--ideate-teal-dark)
}

.bg-violet {
   background: var(--ideate-violet)
}

.bg-ideate-pink {
   background: var(--ideate-pink-deep)
}

.bg-ideate-orange {
   background: var(--ideate-orange-deep)
}

.bg-ideate-gold {
   background: var(--ideate-gold)
}

.bg-ideate-yellow {
   background: var(--ideate-yellow)
}

.bg-ideate-teal {
   background: var(--ideate-teal-light)
}

.bg-ideate-lightblue {
   background: var(--ideate-light-blue)
}

.bg-ideate-blue {
   background: var(--ideate-blue-muted)
}

.bg-ideate-gray {
   background: var(--ideate-gray)
}

.bg-ideate-green {
   background: var(--ideate-green)
}

/* ============================================================
   APPROVED BUTTON, PRICING, CTA AND FOOTER TREATMENTS
   Consolidated, approved design rules. Maintain selectors here.
   ============================================================ */
/* Enterprise Web Kit v3 - component role overrides. Load after tokens.css, theme.css and v2.css. */
:root {
   --v3-teal-blue: var(--ideate-teal);
   /* #36C5D8 */
   --v3-gold: var(--ideate-gold);
   /* #FE9F32 */
   --v3-light-blue: var(--ideate-light-blue);
   /* #609FF7 */
   --v3-dark-text: #111923;
}

/* Global demonstration button roles */

/* PRIMARY BUTTONS: Component-level color assignments; v4 may override. */
.btn-primary {
   background: var(--v3-gold);
   border-color: var(--v3-gold);
   color: var(--v3-dark-text);
}

.btn-primary:hover {
   background: #f3a735;
   border-color: #f3a735;
   color: var(--v3-dark-text);
}

.btn-primary:active {
   background: #dc821c;
   border-color: #dc821c;
   color: var(--v3-dark-text);
}

.btn-neutral {
   background: var(--v3-teal-blue);
   border-color: var(--v3-teal-blue);
   color: var(--v3-dark-text);
}

.btn-neutral:hover {
   background: #25b4c8;
   border-color: #25b4c8;
   color: var(--v3-dark-text);
}

/* Site navigation CTA stays gold. Hero CTA is teal blue. */
.main-header .header-action.btn-neutral {
   background: var(--v3-gold);
   border-color: var(--v3-gold);
   color: var(--v3-dark-text);
}

.main-header .header-action.btn-neutral:hover {
   background: #f3a735;
   border-color: #f3a735;
}

.hero .actions .btn-primary {
   background: var(--v3-teal-blue);
   border-color: var(--v3-teal-blue);
   color: var(--v3-dark-text);
}

.hero .actions .btn-primary:hover {
   background: #25b4c8;
   border-color: #25b4c8;
}

/* Standard pricing buttons teal; featured pricing buttons gold. */
#pricing .card:not(.is-featured) .btn,
.pricing-grid .card:not(.is-featured) .btn {
   background: var(--v3-teal-blue);
   border-color: var(--v3-teal-blue);
   color: var(--v3-dark-text);
}

#pricing .card:not(.is-featured) .btn:hover,
.pricing-grid .card:not(.is-featured) .btn:hover {
   background: #25b4c8;
   border-color: #25b4c8;
   color: var(--v3-dark-text);
}

#pricing .card.is-featured .btn,
.pricing-grid .card.is-featured .btn {
   background: var(--v3-gold);
   border-color: var(--v3-gold);
   color: var(--v3-dark-text);
}

#pricing .card.is-featured .btn:hover,
.pricing-grid .card.is-featured .btn:hover {
   background: #f3a735;
   border-color: #f3a735;
   color: var(--v3-dark-text);
}

/* First column of comparison body only; top header stays navy. */
.comparison tbody th[scope="row"] {
   background: var(--v3-light-blue);
   color: var(--v3-dark-text);
}

/* Teal-blue CTA band + gold action. */
.cta-band {
   background: var(--v3-teal-blue);
   color: var(--v3-dark-text);
}

.cta-band h2,
.cta-band p {
   color: var(--v3-dark-text);
}

.cta-band .btn-primary {
   background: var(--v3-gold);
   border-color: var(--v3-gold);
   color: var(--v3-dark-text);
}

.cta-band .btn-primary:hover {
   background: #f3a735;
   border-color: #f3a735;
   color: var(--v3-dark-text);
}

/* Ensure all footer text, links, and copyright are legible. */
.site-footer {
   background: var(--navy-800);
   color: #fff;
}

.site-footer h3,
.site-footer p,
.site-footer a,
.site-footer .footer-bottom,
.site-footer strong,
.site-footer span {
   color: #fff;
}

.site-footer .footer-bottom {
   border-top-color: rgba(255, 255, 255, .25);
}

.site-footer a:hover {
   text-decoration: underline;
}

/* ============================================================
   COMPARISON TABLES AND NAVIGATION REFINEMENTS
   Consolidated, approved design rules. Maintain selectors here.
   ============================================================ */
/* Enterprise Web Kit v4: visual updates using the supplied color references.
   Existing component names are retained; no AI-specific classes required. */

/* V4 TABLE TOKENS: Column header and border colors. */
:root {
   --v4-table-navy: #27364d;
   --v4-table-purple: #7629f2;
   --v4-table-green: #04b981;
   --v4-table-blue: #078cf2;
   --v4-table-ink: #253858;
   --v4-table-border: #e6ebf2;
}

/* Uppermost utility navigation, not the white main navigation bar. */

/* UTILITY BAR: Navy background override. */
.utility-bar {
   background: var(--navy-800);
}

/* A clear plus indicator, while keeping the accessible dropdown button behavior. */
.primary-nav .menu-button {
   display: inline-flex;
   align-items: center;
   gap: .4rem;
   cursor: pointer;
}

.primary-nav .menu-button .menu-indicator {
   font-size: 1.1rem;
   line-height: 1;
   font-weight: 750;
}

/* Comparison table: color palette from the supplied reference, using the kit's names. */

/* TABLE WRAPPER: Horizontal scrolling, rounded corners and shadow. */
.table-scroll {
   overflow-x: auto;
   border-radius: 14px;
   box-shadow: 0 8px 30px rgba(23, 48, 90, .08);
   border: 0;
}

/* COMPARISON CELLS: Column colors and readable text; table labels remain content-specific. */
.comparison {
   width: 100%;
   min-width: 760px;
   margin: 0;
   background: #fff;
   border-collapse: collapse;
}

.comparison th,
.comparison td {
   padding: 13px 16px;
   border: 1px solid var(--v4-table-border);
   text-align: center;
}

.comparison thead th {
   color: #fff;
   font-weight: 700;
}

.comparison thead th:first-child {
   background: var(--v4-table-navy);
   text-align: left;
}

.comparison thead th:nth-child(2) {
   background: var(--v4-table-purple);
}

.comparison thead th:nth-child(3) {
   background: var(--v4-table-green);
}

.comparison thead th:nth-child(4) {
   background: var(--v4-table-blue);
}

.comparison tbody tr,
.comparison tbody tr:nth-child(even) {
   background: #fff;
}

.comparison tbody td {
   color: var(--v4-table-ink);
   background: #fff;
}

.comparison tbody th[scope="row"] {
   background: #fff;
   color: var(--v4-table-ink);
   font-weight: 600;
   text-align: left;
}

.comparison tbody td .yes {
   font-size: 22px;
   font-weight: 700;
}

.comparison tbody td:nth-child(2) .yes {
   color: var(--v4-table-purple);
}

.comparison tbody td:nth-child(3) .yes {
   color: var(--v4-table-green);
}

.comparison tbody td:nth-child(4) .yes {
   color: var(--v4-table-blue);
}

@media (max-width:760px) {
   .table-scroll {
      scrollbar-width: thin;
   }
}

/* iDeate Solutions brand wordmark */
.wordmark {
   white-space: nowrap;
}