/* ==========================================================================
   DAP Feature Comparison — Frontend Styles
   ========================================================================== */

/* Base — scoped to DAP content (theme provides body-level resets) */
.dap-page {
    color: #282828;
    line-height: 1.6;
    font-family: 'Roboto', sans-serif;
}

/* Ensure DAP sections use Roboto, overriding theme fonts */
.dap-hero,
.dap-hero *,
.dap-section,
.dap-section *,
.dap-section--table,
.dap-section--table * {
    font-family: 'Roboto', sans-serif;
}

.dap-page *,
.dap-page *::before,
.dap-page *::after {
    box-sizing: border-box;
}

/* Container */
.dap-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.dap-hero {
    background: #fff;
    padding: 60px 0 80px;
    text-align: center;
}

.dap-hero__title {
    font-size: 70px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #282828;
    line-height: 1.3;
    letter-spacing: -1.4px;
}

.dap-hero__subtitle {
    font-size: 22px;
    font-weight: 400;
    color: #282828;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    letter-spacing: -0.44px;
}

/* ==========================================================================
   Sections
   ========================================================================== */
.dap-section {
    padding: 60px 0;
}

.dap-section--table {
    background: #fff;
    padding-top: 60px;
}

.dap-section--chart {
    background: #f8f9f8;
    padding: 100px 0;
}

.dap-section--comparison {
    background: #f8f9f8;
    padding: 80px 0;
}

.dap-section--methodology {
    background: #fff;
}

.dap-section--cta {
    background: var(--dap-cta-bg, #4eaa08);
    background-image: url('../images/cta-background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    padding: 80px 40px 100px;
    overflow: hidden;
    position: relative;
    border-radius: 10px;
    max-width: 1120px;
    margin: 0 auto;
}

/* CTA — undo full-bleed for Gutenberg (boxed layout, frontend only) */
body.dap-page .dap-section--cta.wp-block-group {
    width: auto;
    left: auto;
    margin-left: auto;
    margin-right: auto;
    position: static;
    padding: 80px 40px 100px;
}

.dap-section--faq {
    background: #fff;
    padding: 80px 0 0;
}

.dap-section--faq .dap-section__title {
    font-size: 45px;
    margin-bottom: 50px;
}

.dap-section--faq .dap-container {
    padding-bottom: 0;
}

.dap-section--scores {
    background: #fff;
    padding: 40px 0;
}

.dap-section--selectors {
    background: #f8f9f8;
    padding: 30px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dap-section--summary {
    background: #fff;
}

.dap-section--back {
    background: #f8f9f8;
    padding: 30px 0;
}

.dap-section__title {
    font-size: 45px;
    font-weight: 700;
    margin: 0 0 15px;
    color: #282828;
    letter-spacing: -0.9px;
    line-height: 1.2;
}

.dap-section__subtitle {
    font-size: 18px;
    color: #282828;
    margin: 0 0 40px;
    letter-spacing: -0.36px;
    line-height: 1.5;
}

/* ==========================================================================
   Lobby — Market Stats Section
   ========================================================================== */
.dap-section--stats {
    background: #fff;
}

.dap-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.dap-stat {
    background: #f8f9f8;
    border-radius: 10px;
    padding: 20px !important;
    text-align: center;
}

.dap-stat p {
    margin: 0 !important;
}

.dap-stat p.dap-stat__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--dap-primary, #4eaa08) !important;
    margin-bottom: 6px !important;
    line-height: 1.2;
}

p.dap-stat__label {
    font-size: 13px;
    color: rgba(40, 40, 40, 0.7);
    line-height: 1.4;
}

.dap-market-image img {
    border-radius: 10px;
}

/* ==========================================================================
   Lobby — Technology Area Cards
   ========================================================================== */
.dap-section--cards {
    background: #f8f9f8;
}

.dap-card-row {
    margin-bottom: 20px !important;
}

.dap-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px !important;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.dap-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dap-card__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px !important;
    color: #282828;
}

.dap-card__text {
    font-size: 14px;
    color: rgba(40, 40, 40, 0.75);
    line-height: 1.6;
    margin: 0 !important;
}

/* ==========================================================================
   Ranked Table (Lobby) — 3 columns: Rank, Provider, Score
   ========================================================================== */
.dap-table-wrap {
    border-radius: 0;
    overflow: visible;
    border: none;
}

.dap-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px 10px;
    font-size: 18px;
    font-weight: 600;
    color: rgba(40, 40, 40, 0.7);
    letter-spacing: -0.36px;
}

.dap-table-row,
.dap-table-row:hover,
.dap-table-row:focus,
.dap-table-row:visited {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 30px;
    text-decoration: none !important;
    color: inherit;
    transition: background 0.15s;
    border-radius: 10px;
    border: none;
}

.dap-table-row:hover {
    background: #f0f4f5;
}

.dap-table-row--even {
    background: #fff;
}

.dap-table-row--odd {
    background: #f8f9f8;
}

.dap-table-row--odd:hover {
    background: #eef2f3;
}

.dap-table-col--rank {
    font-size: 22px;
    font-weight: 500;
    color: #000;
    text-transform: uppercase;
    letter-spacing: 0.66px;
    width: 50px;
    flex-shrink: 0;
}

.dap-table-col--provider {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 22px;
    font-weight: 600;
    flex: 1;
    margin-left: 50px;
    letter-spacing: -0.44px;
}

.dap-provider-logo {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    object-fit: contain;
    flex-shrink: 0;
}

.dap-provider-logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dap-primary, #4eaa08);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 5px;
    width: 40px;
    height: 40px;
}

.dap-provider-name {
    color: #282828;
}

.dap-table-col--score {
    font-size: 22px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.66px;
    width: 95px;
    text-align: center;
}

.dap-table-col--arrow {
    width: 15px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #757575;
    font-size: 18px;
}

/* Score Colors */
.dap-score--high {
    color: var(--dap-score-high, #4aa701);
}

.dap-score--mid {
    color: var(--dap-score-mid, #eea502);
}

.dap-score--low {
    color: var(--dap-score-low, #f6593e);
}

/* ==========================================================================
   Bar Chart
   ========================================================================== */
.dap-chart-container {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    margin-bottom: 20px;
    overflow-x: auto;
}

.dap-chart-container canvas {
    display: block;
    max-width: 100%;
    height: auto;
}

.dap-chart-legend {
    display: flex;
    justify-content: flex-start;
    gap: 32px;
    flex-wrap: wrap;
    padding: 10px 0;
}

.dap-chart-legend__item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 400;
    color: #18191c;
}

.dap-chart-legend__color {
    width: 12px;
    height: 12px;
    border-radius: 0;
}

/* ==========================================================================
   Rating Badges
   ========================================================================== */
.dap-rating {
    display: inline-block;
    padding: 10px 12px;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.5;
    text-transform: uppercase;
    letter-spacing: 0.39px;
}

.dap-rating--full {
    background: var(--dap-rating-full-bg, #4aa701);
    color: #fff;
}

.dap-rating--partial {
    background: var(--dap-rating-partial-bg, #eba503);
    color: #fff;
}

.dap-rating--minimal {
    background: var(--dap-rating-minimal-bg, #000);
    color: #fff;
}

.dap-rating--none {
    background: var(--dap-rating-none-bg, #c62828);
    color: #fff;
}

/* Rating Tooltip */
.dap-has-tooltip {
    position: relative;
    cursor: help;
}

.dap-has-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #282828;
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 6px;
    white-space: normal;
    width: 280px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dap-has-tooltip::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: #282828;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
    pointer-events: none;
    z-index: 10;
}

.dap-has-tooltip:hover::after,
.dap-has-tooltip:hover::before {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Scores Row (Comparison Page)
   ========================================================================== */
.dap-scores-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.dap-scores-card {
    text-align: center;
    padding: 30px 40px;
    background: #f8f9f8;
    border-radius: 10px;
    min-width: 200px;
}

.dap-scores-card__name {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 10px;
}

.dap-scores-card__score {
    font-size: 48px;
    font-weight: 700;
    display: block;
}

.dap-scores-vs {
    font-size: 24px;
    font-weight: 500;
    color: #757575;
}

/* ==========================================================================
   Platform Selectors
   ========================================================================== */
.dap-selectors {
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: flex-end;
}

.dap-selector {
    flex: 1;
    max-width: 300px;
}

.dap-selector__label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #757575;
    margin-bottom: 6px;
}

.dap-selector__select {
    width: 100%;
    padding: 12px 16px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: #fff;
    color: #282828 !important;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23757575' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.dap-selector__select:focus {
    outline: none;
    border-color: var(--dap-primary, #4eaa08);
    box-shadow: 0 0 0 3px rgba(78, 170, 8, 0.15);
}

/* ==========================================================================
   Feature Comparison — Sticky Column Header
   ========================================================================== */
.dap-comparison-sticky-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: none;
    align-items: center;
    background: #fff;
    border-bottom: 2px solid #e9e9e9;
    padding: 12px 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.dap-comparison-sticky-header--selectors-active {
    display: flex;
}

.dap-comparison-sticky-header__label {
    flex: 0 0 50%;
    max-width: 50%;
}

.dap-comparison-sticky-header__platforms {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
}

.dap-sticky-selectors {
    display: flex;
    gap: 10px;
    align-items: center;
    width: 100%;
}

.dap-sticky-selectors__select {
    flex: 1;
    padding: 7px 30px 7px 10px;
    font-size: 13px;
    border-radius: 6px;
    min-width: 0;
    background-position: right 10px center;
}

/* ==========================================================================
   Area Summary Table (Comparison Page)
   ========================================================================== */
.dap-area-summary {
    margin-bottom: 50px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

.dap-area-summary__header {
    display: flex;
    background: #f8f9f8;
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    padding: 12px 20px;
}

.dap-area-summary__col-info {
    flex: 0 0 50%;
    max-width: 50%;
    font-size: 17px;
    font-weight: 700;
    color: #000000;
}

.dap-area-summary__col-score {
    flex: 0 0 25%;
    max-width: 25%;
    text-align: center;
    font-size: 17px;
    font-weight: 700;
    color: #000000;
}

.dap-area-summary__row {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.dap-area-summary__row:last-child {
    border-bottom: none;
}

.dap-area-summary__row:nth-child(odd) {
    background: #fff;
}

.dap-area-summary__row:nth-child(even) {
    background: #fafafa;
}

.dap-area-summary__area-link {
    font-size: 15px;
    font-weight: 700;
    color: #282828;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}

.dap-area-summary__area-link:hover {
    color: var(--dap-accent, #4aa701);
    border-bottom-color: var(--dap-accent, #4aa701);
}

.dap-area-summary__score {
    display: block;
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    line-height: 1;
}

/* ==========================================================================
   Feature Comparison — Area Group (matches Figma layout)
   ========================================================================== */
.dap-area-group {
    margin-bottom: 50px;
    border-radius: 0;
    overflow: visible;
}

.dap-area-group + .dap-area-group {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding-top: 50px;
}

/* Section header: area title */
.dap-area-group__header {
    display: flex;
    align-items: center;
    padding: 0 30px 18px;
    background: transparent;
    border-bottom: none;
}

.dap-area-group__title {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    color: #282828;
    letter-spacing: -0.48px;
    line-height: 45px;
}

.dap-area-group__platform-name {
    display: none;
}

/* Feature row: 3-column flex matching Figma */
.dap-feature {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 30px;
    border-radius: 10px;
    border-bottom: none;
}

.dap-feature:last-child {
    border-bottom: none;
}

/* Alternating row backgrounds */
.dap-feature--even {
    background: #fff;
}

.dap-feature--odd {
    background: #f8f9f8;
}

/* Feature title column */
.dap-feature__header {
    padding-right: 20px;
    flex: 0 0 50%;
    max-width: 50%;
}

.dap-feature__name {
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    color: #282828;
    letter-spacing: -0.36px;
    line-height: 1.4;
}

.dap-feature__desc {
    font-size: 14px;
    color: rgba(40, 40, 40, 0.7);
    margin: 0;
    line-height: 1.5;
}

/* Vendor comparison column */
.dap-feature__col {
    padding: 0;
    margin: 0;
    background: transparent;
    border-radius: 0;
    min-height: auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    flex: 0 0 25%;
    max-width: 25%;
}

.dap-feature--odd .dap-feature__col {
    background: transparent;
}

.dap-feature__details {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: 1.5;
    text-align: center;
    letter-spacing: -0.28px;
}

/* ==========================================================================
   Summary Section
   ========================================================================== */
.dap-section--summary {
    padding: 100px 0;
}

.dap-section--summary .dap-container {
    display: flex;
    align-items: center;
    gap: 95px;
}

.dap-summary-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 475px;
    flex-shrink: 0;
}

.dap-summary-content > p {
    font-size: 18px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
    letter-spacing: -0.36px;
}

.dap-summary-block {
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.dap-summary-block h3 {
    font-size: 45px;
    font-weight: 700;
    margin: 0 0 10px;
    letter-spacing: -0.9px;
    line-height: 1.2;
}

.dap-summary-block p {
    font-size: 18px;
    color: rgba(0, 0, 0, 0.7);
    margin: 0;
    line-height: 1.5;
    letter-spacing: -0.36px;
}

/* Summary — Illustration Image */
.dap-summary-image {
    width: 550px;
    flex-shrink: 0;
    background: #d9d9d9;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dap-summary-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */
.dap-cta__title {
    font-size: 40px;
    font-weight: 500;
    color: var(--dap-cta-text, #fff);
    margin: 0 0 25px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 45px;
}

.dap-cta__text {
    font-size: 18px;
    color: var(--dap-cta-text, #fff);
    opacity: 0.85;
    margin: 0 0 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Highlight text — green for headings, yellow in CTA */
.dap-highlight {
    color: var(--dap-primary, #4eaa08);
}

.dap-section--cta .dap-highlight {
    color: var(--dap-cta-highlight, #f5c518);
}

/* CTA button — standalone <a> (comparison template) */
a.dap-cta__button,
a.dap-cta__button:hover,
a.dap-cta__button:focus,
a.dap-cta__button:visited,
a.dap-cta__button:active {
    display: inline-block;
    padding: 15px 20px;
    background: #fff !important;
    color: #000 !important;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none !important;
    border-radius: 5px;
    transition: transform 0.15s, box-shadow 0.15s;
}

a.dap-cta__button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* CTA button — Gutenberg wp:button block (lobby page) */
.dap-section--cta .wp-block-button__link,
.dap-section--cta .wp-block-button__link:hover,
.dap-section--cta .wp-block-button__link:focus,
.dap-section--cta .wp-block-button__link:visited {
    background: #fff !important;
    color: #000 !important;
    font-size: 18px;
    font-weight: 500;
    padding: 15px 20px;
    border-radius: 5px;
    border: none;
    text-decoration: none !important;
    transition: transform 0.15s, box-shadow 0.15s;
}

.dap-section--cta .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   Accordion (Methodology & FAQ)
   ========================================================================== */
.dap-accordion {
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0;
    margin-bottom: 0;
    overflow: visible;
}

.dap-accordion:last-child {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.dap-accordion__trigger,
.dap-accordion__trigger:hover,
.dap-accordion__trigger:focus,
.dap-accordion__trigger:active,
.dap-accordion__trigger:visited {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding: 30px 0;
    border: none;
    background: transparent !important;
    background-color: transparent !important;
    cursor: pointer;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    gap: 15px;
    color: inherit;
    outline: none;
}

.dap-accordion__trigger:hover .dap-accordion__title {
    color: var(--dap-primary, #4eaa08);
}

.dap-accordion__title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: #282828;
    letter-spacing: -0.44px;
    line-height: 1.4;
    transition: color 0.2s;
}

h2.dap-accordion__title {
    font-size: 22px;
}

.dap-accordion__trigger[aria-expanded="true"] .dap-accordion__title {
    color: var(--dap-primary, #4eaa08);
}

.dap-accordion__icon {
    font-size: 24px;
    font-weight: 300;
    color: #757575;
    flex-shrink: 0;
    transition: transform 0.2s;
    line-height: 1;
    margin-top: 4px;
}

.dap-accordion__trigger[aria-expanded="true"] .dap-accordion__icon {
    transform: rotate(45deg);
}

.dap-accordion__content {
    padding: 0 0 30px;
    font-size: 16px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.7);
    max-width: 835px;
    letter-spacing: -0.32px;
}

.dap-accordion__content ul {
    padding-left: 20px;
}

.dap-accordion__content li {
    margin-bottom: 8px;
}

/* ==========================================================================
   Back Link
   ========================================================================== */
.dap-back-link {
    font-size: 16px;
    font-weight: 500;
    color: var(--dap-primary, #4eaa08);
    text-decoration: none;
}

.dap-back-link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   Gutenberg Core Block Overrides
   Ensures core WP blocks (headings, paragraphs, groups) within DAP sections
   match the plugin's design system rather than inheriting theme styles.
   ========================================================================== */

/* Reset WP block margins and constrained layout within DAP sections */
.dap-page .wp-block-group,
.dap-hero .wp-block-group,
.dap-section .wp-block-group {
    margin-top: 0;
    margin-bottom: 0;
}

/* Remove Gutenberg's constrained layout max-width so DAP containers control width (frontend only) */
body.dap-page .dap-hero.is-layout-constrained > *,
body.dap-page .dap-section.is-layout-constrained > *,
body.dap-page .dap-hero.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body.dap-page .dap-section.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
    max-width: none;
}

/* Hero — Gutenberg group: full-width with centered content (frontend only) */
body.dap-page .dap-hero.wp-block-group {
    width: 100vw;
    max-width: none;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    box-sizing: border-box;
    padding-left: calc((100vw - 1120px) / 2);
    padding-right: calc((100vw - 1120px) / 2);
}

@media (max-width: 1160px) {
    body.dap-page .dap-hero.wp-block-group {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Hero — standalone (comparison template) */
.dap-comparison-page .dap-hero {
    max-width: 1120px;
    margin: 0 auto;
    padding: 60px 20px 80px;
    text-align: center;
}

/* Hero — ensure consistent styling regardless of theme */
.dap-hero .wp-block-heading.dap-hero__title,
.dap-hero h1.dap-hero__title {
    font-size: 70px;
    font-weight: 700;
    margin: 0 0 5px;
    color: #282828;
    line-height: 1.3;
    letter-spacing: -1.4px;
}

.dap-hero .dap-hero__subtitle,
.dap-hero p.dap-hero__subtitle {
    font-size: 22px;
    font-weight: 400;
    color: #282828;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.5;
    letter-spacing: -0.44px;
}

/* Sections — Gutenberg: break out of theme container for full-width backgrounds (frontend only) */
body.dap-page .dap-section.wp-block-group,
body.dap-page .wp-block-dap-ranked-table,
body.dap-page .wp-block-dap-area-chart {
    max-width: none;
    width: 100vw;
    position: relative;
    left: 50%;
    margin-left: -50vw;
    padding-left: calc((100vw - 1120px) / 2);
    padding-right: calc((100vw - 1120px) / 2);
    box-sizing: border-box;
}

@media (max-width: 1160px) {
    body.dap-page .dap-section.wp-block-group,
    body.dap-page .wp-block-dap-ranked-table,
    body.dap-page .wp-block-dap-area-chart {
        padding-left: 20px;
        padding-right: 20px;
    }
}

/* Section titles — override theme heading styles */
.dap-section .wp-block-heading.dap-section__title {
    font-size: 45px;
    font-weight: 700;
    margin: 0 0 15px;
    color: #282828;
    letter-spacing: -0.9px;
    line-height: 1.2;
}

/* CTA title — override theme heading styles */
.dap-section--cta .wp-block-heading.dap-cta__title {
    font-size: 40px;
    font-weight: 500;
    color: var(--dap-cta-text, #fff);
    margin: 0 0 25px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 45px;
}

/* CTA text — override theme paragraph styles */
.dap-section--cta .dap-cta__text {
    font-size: 18px;
    color: var(--dap-cta-text, #fff);
    opacity: 0.85;
    margin: 0 0 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* Methodology section — layout and image */
.dap-methodology-layout {
    gap: 60px;
}

.dap-methodology-image img {
    border-radius: 10px;
}

/* Methodology section — constrained text */
.dap-section--methodology p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    max-width: 835px;
    letter-spacing: -0.32px;
}

.dap-section--methodology .wp-block-list {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
    max-width: 835px;
    padding-left: 20px;
}

.dap-section--methodology .wp-block-list li {
    margin-bottom: 8px;
}

/* Stats section — override Gutenberg column gap */
.dap-section--stats .wp-block-columns {
    gap: 40px;
}

.dap-section--stats p {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.7);
}

/* Cards section — override Gutenberg column defaults */
.dap-section--cards .wp-block-columns.dap-card-row {
    gap: 20px;
}

.dap-section--cards .wp-block-column.dap-card {
    background: #fff;
    border-radius: 10px;
    padding: 30px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.2s;
}

.dap-section--cards .wp-block-column.dap-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.dap-section--cards .dap-card__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 12px;
    color: #282828;
}

.dap-section--cards .dap-card__text {
    font-size: 14px;
    color: rgba(40, 40, 40, 0.75);
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Responsive — Tablet (769px – 1024px)
   ========================================================================== */
@media (max-width: 1024px) {
    /* Hero — both standalone and Gutenberg */
    .dap-hero__title,
    .dap-hero .wp-block-heading.dap-hero__title,
    .dap-hero h1.dap-hero__title {
        font-size: 50px;
        letter-spacing: -1px;
    }

    .dap-hero {
        padding: 50px 20px 60px;
    }

    /* Section titles — both standalone and Gutenberg */
    .dap-section__title,
    .dap-section .wp-block-heading.dap-section__title {
        font-size: 32px;
        letter-spacing: -0.64px;
    }

    .dap-table-row {
        padding: 20px;
    }

    .dap-table-col--provider {
        margin-left: 20px;
    }

    /* Comparison: narrower feature title */
    .dap-feature__header {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .dap-feature__col {
        flex: 1;
        max-width: none;
    }

    .dap-comparison-sticky-header__label {
        flex: 0 0 45%;
        max-width: 45%;
    }

    .dap-comparison-sticky-header__platforms {
        flex: 1;
        max-width: none;
    }

    /* Summary section */
    .dap-section--summary .dap-container {
        gap: 40px;
    }

    .dap-summary-content {
        width: auto;
        flex: 1;
    }

    .dap-summary-image {
        width: 350px;
    }

    /* Stats section */
    .dap-section--stats .wp-block-columns {
        gap: 25px;
    }

    /* Cards section */
    .dap-section--cards .wp-block-column.dap-card {
        padding: 20px;
    }

    /* CTA title */
    .dap-cta__title,
    .dap-section--cta .wp-block-heading.dap-cta__title {
        font-size: 32px;
        line-height: 1.2;
    }
}

/* ==========================================================================
   Responsive — Mobile (max 768px)
   ========================================================================== */
@media (max-width: 768px) {

    .dap-comparison-sticky-header {
        display: none;
    }

    .dap-section--selectors {
        position: sticky;
        top: 0;
        z-index: 100;
    }

    /* --- Area Summary Table --- */
    .dap-area-summary__header {
        display: none;
    }

    .dap-area-summary__row {
        flex-wrap: wrap;
        padding: 16px 15px;
    }

    .dap-area-summary__col-info {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 12px;
    }

    .dap-area-summary__col-score {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .dap-area-summary__col-score::before {
        display: block;
        font-size: 14px;
        font-weight: 700;
        color: #000000;
        margin-bottom: 4px;
        content: attr(data-platform);
    }

    /* --- Hero --- */
    .dap-hero {
        padding: 30px 20px 30px;
    }

    .dap-hero__title,
    .dap-hero .wp-block-heading.dap-hero__title,
    .dap-hero h1.dap-hero__title {
        font-size: 32px;
        letter-spacing: -0.64px;
        line-height: 1.2;
    }

    .dap-hero__subtitle,
    .dap-hero .dap-hero__subtitle,
    .dap-hero p.dap-hero__subtitle {
        font-size: 16px;
        letter-spacing: -0.32px;
    }

    /* Reduce spacer above hero on mobile */
    .dap-page .wp-block-spacer {
        height: 40px !important;
    }

    /* --- Sections --- */
    .dap-section {
        padding: 40px 0;
    }

    .dap-section__title,
    .dap-section .wp-block-heading.dap-section__title {
        font-size: 24px;
        letter-spacing: -0.48px;
    }

    .dap-section__subtitle {
        font-size: 16px;
    }

    /* --- Stats Section --- */
    .dap-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px;
    }

    .dap-stat__value {
        font-size: 22px;
    }

    .dap-stat__label {
        font-size: 12px;
    }

    .dap-section--stats .wp-block-columns {
        flex-direction: column !important;
        gap: 20px;
    }

    .dap-section--stats .wp-block-column {
        flex-basis: 100% !important;
        width: 100%;
    }

    /* --- Cards Section --- */
    .dap-section--cards .wp-block-columns.dap-card-row {
        flex-direction: column !important;
        gap: 15px;
    }

    .dap-section--cards .wp-block-column.dap-card {
        flex-basis: 100% !important;
        padding: 20px;
    }

    .dap-card {
        padding: 20px !important;
    }

    .dap-section--cards .dap-card__title {
        font-size: 18px;
    }

    .dap-section--cards .dap-card__text {
        font-size: 13px;
    }

    /* --- Ranked Table --- */
    .dap-table-header {
        display: none;
    }

    .dap-table-row {
        flex-wrap: wrap;
        gap: 5px;
        padding: 15px 20px;
    }

    .dap-table-col--rank {
        font-size: 16px;
        width: 40px;
    }

    .dap-table-col--provider {
        font-size: 16px;
        margin-left: 10px;
        flex: 1;
    }

    .dap-provider-logo {
        width: 30px;
        height: 30px;
    }

    .dap-provider-logo--placeholder {
        width: 30px;
        height: 30px;
        font-size: 14px;
    }

    .dap-table-col--score {
        font-size: 16px;
        width: auto;
    }

    .dap-table-col--arrow {
        display: none;
    }

    /* --- Chart --- */
    .dap-chart-container {
        padding: 15px;
        margin: 0 -10px;
    }

    .dap-chart-legend {
        gap: 12px;
    }

    .dap-chart-legend__item {
        font-size: 14px;
    }

    /* --- Scores Row (Comparison) --- */
    .dap-scores-row {
        flex-direction: column;
        gap: 15px;
    }

    .dap-scores-card {
        min-width: auto;
        width: 100%;
        padding: 20px;
    }

    .dap-scores-card__name {
        font-size: 20px;
    }

    .dap-scores-card__score {
        font-size: 36px;
    }

    /* --- Platform Selectors --- */
    .dap-selectors {
        flex-direction: row;
        gap: 10px;
    }

    .dap-selector {
        max-width: none;
    }

    .dap-selector__select {
        padding: 10px 12px;
        font-size: 14px;
    }

    /* --- Feature Comparison --- */
    .dap-area-group__header {
        padding: 0 20px 15px;
    }

    .dap-area-group__title {
        font-size: 20px;
        color: var(--dap-primary, #4eaa08);
    }

    .dap-feature {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 20px;
    }

    .dap-feature__header {
        grid-column: 1 / -1;
        width: 100%;
        max-width: none;
        padding-right: 0;
    }

    .dap-feature__name {
        font-size: 16px;
        font-weight: 700;
    }

    .dap-feature__col {
        width: auto;
    }

    .dap-rating {
        font-size: 12px;
        padding: 6px 10px;
    }

    .dap-feature__details {
        font-size: 13px;
    }

    /* --- Summary Section --- */
    .dap-section--summary {
        padding: 50px 0;
    }

    .dap-section--summary .dap-container {
        flex-direction: column;
        gap: 30px;
    }

    .dap-summary-content {
        width: 100%;
    }

    .dap-summary-image {
        width: 100%;
    }

    .dap-summary-block h3 {
        font-size: 18px;
    }

    .dap-summary-block p,
    .dap-summary-content > p {
        font-size: 16px;
    }

    /* --- CTA Section --- */
    .dap-section--cta {
        padding: 50px 0;
    }

    .dap-cta__title,
    .dap-section--cta .wp-block-heading.dap-cta__title {
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: 0;
        margin: 0 0 15px;
    }

    .dap-cta__text,
    .dap-section--cta .dap-cta__text {
        font-size: 15px;
        margin: 0 0 20px;
    }

    .dap-section--cta .wp-block-button__link {
        font-size: 16px;
        padding: 12px 18px;
    }

    /* --- FAQ Section --- */
    .dap-section--faq {
        padding-top: 50px;
    }

    .dap-section--faq .dap-section__title,
    .dap-section--faq .wp-block-heading.dap-section__title {
        font-size: 24px;
        margin-bottom: 30px;
    }

    .dap-accordion__title {
        font-size: 18px;
    }

    .dap-accordion__trigger {
        padding: 20px 0;
    }

    .dap-accordion__content {
        font-size: 14px;
        padding: 0 0 20px;
    }

    /* --- Methodology Section --- */
    .dap-methodology-layout {
        flex-direction: column !important;
        gap: 30px;
    }

    .dap-methodology-layout .wp-block-column {
        flex-basis: 100% !important;
    }

    .dap-section--methodology p,
    .dap-section--methodology .wp-block-list {
        font-size: 14px;
    }

    .dap-section--methodology .wp-block-heading.dap-section__title {
        font-size: 24px;
    }

    /* --- Back Link --- */
    .dap-back-link {
        font-size: 14px;
    }
}