/* ══════════════════════════════════════════════════════════════════════════
   AI Takeaways CC — Frontend Stylesheet v1.8.5

   Design principles:
   1. Inherit everything from the active theme by default — font, colour,
      spacing. The box looks native to any theme out of the box.
   2. CSS custom properties are the only way values are set. No raw
      property declarations in layout variants — only variable overrides.
      This guarantees admin-set values always win.
   3. No automatic dark mode. Dark mode is the theme's responsibility.
      If a site needs dark mode styling for the box, the admin uses the
      Appearance > Custom CSS field or sets colours that work in both modes.
   4. The inline style block from wp_add_inline_style() is appended by
      WordPress directly after this <link> tag — it always loads last
      and always wins over these defaults.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── CSS custom property defaults ───────────────────────────────────────── */
.kta-box {
    /* Accent — border, bullets, icon, title colour */
    --kta-accent:       #0073aa;

    /* Backgrounds & borders — inherit from theme by default */
    --kta-bg:           transparent;
    --kta-border-color: rgba(0, 115, 170, 0.25);

    /* Typography — 100% theme-inherited */
    --kta-font-family:  inherit;
    --kta-font-size:    inherit;
    --kta-font-weight:  inherit;
    --kta-line-height:  inherit;
    --kta-text-color:   inherit;

    /* Title — slightly larger, bold, accent colour */
    --kta-title-size:   1.05em;
    --kta-title-weight: 700;
    --kta-title-color:  var(--kta-accent);

    /* Layout */
    --kta-radius:      6px;
    --kta-padding:     1.25em 1.5em;
    --kta-margin:      1.75em 0;
    --kta-gap:         0.55em;

    /* Border structure — overridden per layout variant */
    --kta-box-border:   1px solid var(--kta-border-color);
    --kta-border-left:  4px solid var(--kta-accent);
    --kta-item-border:  1px solid var(--kta-border-color);
    --kta-box-shadow:   none;
}

/* ── Base box ────────────────────────────────────────────────────────────── */
.kta-box {
    background:    var(--kta-bg);
    border:        var(--kta-box-border);
    border-left:   var(--kta-border-left);
    border-radius: var(--kta-radius);
    padding:       var(--kta-padding);
    margin:        var(--kta-margin);
    font-family:   var(--kta-font-family);
    font-size:     var(--kta-font-size);
    font-weight:   var(--kta-font-weight);
    line-height:   var(--kta-line-height);
    color:         var(--kta-text-color);
    box-shadow:    var(--kta-box-shadow);
    box-sizing:    border-box;
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.kta-box__header {
    display:       flex;
    align-items:   center;
    gap:           0.5em;
    margin-bottom: 0.75em;
}

.kta-box__icon {
    color:       var(--kta-accent);
    flex-shrink: 0;
    line-height: 1;
    display:     flex;
    align-items: center;
}

.kta-box__title {
    margin:      0;
    padding:     0;
    border:      none;
    background:  none;
    font-family: inherit;
    font-size:   var(--kta-title-size);
    font-weight: var(--kta-title-weight);
    line-height: 1.2;
    color:       var(--kta-title-color);
}

/* ── List ────────────────────────────────────────────────────────────────── */
.kta-box__list {
    margin:     0;
    padding:    0;
    list-style: none;
}

.kta-box__item {
    position:      relative;
    padding:       var(--kta-gap) 0 var(--kta-gap) 1.5em;
    border-bottom: var(--kta-item-border);
    color:         var(--kta-text-color);
    line-height:   1.5;
}

.kta-box__item:last-child {
    border-bottom:  none;
    padding-bottom: 0;
}

/* ── Bullet styles ───────────────────────────────────────────────────────── */
.kta-bullet--checkmark .kta-box__item::before {
    content:     "✓";
    position:    absolute;
    left:        0;
    top:         var(--kta-gap);
    color:       var(--kta-accent);
    font-weight: 700;
    font-size:   0.85em;
    line-height: 1.5;
}

.kta-bullet--dot .kta-box__item::before {
    content:       "";
    position:      absolute;
    left:          0.3em;
    top:           calc(var(--kta-gap) + 0.5em);
    width:         0.45em;
    height:        0.45em;
    border-radius: 50%;
    background:    var(--kta-accent);
}

.kta-bullet--arrow .kta-box__item::before {
    content:     "→";
    position:    absolute;
    left:        0;
    top:         var(--kta-gap);
    color:       var(--kta-accent);
    font-weight: 700;
    line-height: 1.5;
}

.kta-bullet--none .kta-box__item {
    padding-left: 0;
}

ol.kta-box__list {
    list-style:   decimal;
    padding-left: 1.4em;
}
ol.kta-box__list .kta-box__item {
    padding-left: 0.3em;
}
ol.kta-box__list .kta-box__item::before {
    display: none;
}

/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT VARIANTS
   Rule: variable overrides ONLY — never raw property declarations.
   Admin-set colours from Appearance page always cascade on top of these
   because wp_add_inline_style() output appears after this file.
   ════════════════════════════════════════════════════════════════════════════ */

/* Bordered — left accent bar, light background */
.kta-layout--bordered {
    --kta-bg: #f7fbff;
}

/* Card — full uniform border, soft shadow, white background */
.kta-layout--card {
    --kta-bg:          #ffffff;
    --kta-border-left: 1px solid var(--kta-border-color);
    --kta-box-shadow:  0 1px 6px rgba(0,0,0,0.08);
}

/* Minimal — top rule only, fully transparent, no separators */
.kta-layout--minimal {
    --kta-bg:          transparent;
    --kta-box-border:  none;
    --kta-border-left: none;
    --kta-item-border: none;
    --kta-radius:      0;
    --kta-box-shadow:  none;
    border-top: 3px solid var(--kta-accent);
    padding-left:  0;
    padding-right: 0;
}

/* Highlighted — coloured header band, white body */
.kta-layout--highlighted {
    --kta-bg:          #ffffff;
    --kta-box-border:  none;
    --kta-border-left: none;
    overflow:  hidden;
    padding:   0;
}
.kta-layout--highlighted .kta-box__header {
    background:    var(--kta-accent);
    padding:       0.75em 1.5em;
    margin-bottom: 0;
}
.kta-layout--highlighted .kta-box__title,
.kta-layout--highlighted .kta-box__icon {
    color:             #ffffff;
    --kta-title-color: #ffffff;
}
.kta-layout--highlighted .kta-box__list {
    padding: 0.875em 1.5em 1.125em;
}

/* ── Print ───────────────────────────────────────────────────────────────── */
@media print {
    .kta-box {
        background:  #fff !important;
        color:       #000 !important;
        border:      1pt solid #000 !important;
        box-shadow:  none !important;
        break-inside: avoid;
    }
    .kta-box__title { color: #000 !important; }
    .kta-box__item  { color: #000 !important; border-bottom-color: #ccc !important; }
}