/* Long-form SEO content on pages (.dbseo). Built by danceb-extras/scripts/keywords-content/insert-pages.php.
   Layout: ONE panel; each "##" section is a row (title column + text column) split by thin dividers;
   "###" sub-topics are small inner boxes in an equal-height grid.
   Colours are design-system tokens; !important beats the kit's heading/text-editor colours. */
.dbseo{
  --dbs-gold:var(--ui-accent,#f5b82e);
  --dbs-blue:var(--ui-primary,#2f7bff);
  --dbs-line:color-mix(in srgb,var(--ui-text-main,#fff) 10%,transparent);
  --dbs-card:color-mix(in srgb,var(--ui-surface,#0f2140) 92%,var(--ui-primary,#2f7bff));
  --dbs-sub:color-mix(in srgb,var(--ui-text-main,#fff) 4%,transparent);
  --dbs-text:var(--ui-text-paragraph,rgba(255,255,255,.78));
  --dbs-head:var(--ui-text-main,#fff);
}
.dbseo-wrap{max-width:1340px;margin:32px auto;padding:0 16px}

/* the one box */
.dbseo-panel{position:relative;background:var(--dbs-card)!important;border:1px solid var(--dbs-line);border-radius:14px;padding:30px 34px 10px!important;counter-reset:dbsec}
.dbseo-panel::before{content:"";position:absolute;inset-inline:0;top:0;height:3px;border-radius:14px 14px 0 0;background:linear-gradient(to left,var(--dbs-gold) 0 22%,var(--dbs-blue) 22% 60%,transparent)}
.dbseo-panel > .elementor-widget{width:100%;margin:0!important}
.dbseo .elementor-widget-container{padding:0;margin:0}

/* header: eyebrow + lead */
.dbseo-head{padding-bottom:22px}
.dbseo .dbseo-eyebrow,.dbseo .dbseo-eyebrow p{display:flex;align-items:center;gap:10px;margin:0 0 10px!important;color:var(--dbs-gold)!important;font-weight:800;font-size:clamp(18px,1.6vw,22px);line-height:1.7}
.dbseo .dbseo-eyebrow::before{content:"";flex:none;width:18px;height:5px;background:var(--dbs-gold);transform:skewX(-19deg)}
.dbseo .dbseo-lead,.dbseo .dbseo-lead p{color:var(--dbs-text)!important;font-size:15.5px;line-height:2.05;margin:0!important}

/* section rows */
.dbseo-sec{border-top:1px solid var(--dbs-line);counter-increment:dbsec}
.dbseo-sec-in{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;padding:26px 0}
.dbseo-side h2{margin:0!important;font-size:18px!important;line-height:1.75!important;font-weight:800!important;color:var(--dbs-head)!important}
.dbseo-side h2::before{content:counter(dbsec,persian);display:flex;align-items:center;justify-content:center;width:34px;height:34px;margin-bottom:10px;border-radius:8px;background:color-mix(in srgb,var(--dbs-gold) 15%,transparent);border:1px solid color-mix(in srgb,var(--dbs-gold) 35%,transparent);color:var(--dbs-gold);font-size:15px;font-weight:800;line-height:1}
.dbseo-main{min-width:0}

/* text */
.dbseo-sec p,.dbseo-sec li,.dbseo-sec td,.dbseo-sec th{color:var(--dbs-text)!important;font-size:15px;line-height:2.05}
.dbseo-sec p{margin:0 0 12px!important}
.dbseo-main > :last-child,.dbseo-sub > :last-child{margin-bottom:0!important}
.dbseo-sec strong{color:var(--dbs-head)!important;font-weight:700}
.dbseo-sec a{color:var(--dbs-gold)!important;font-weight:700;text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--dbs-gold) 45%,transparent)}
.dbseo-sec a:hover{border-bottom-color:var(--dbs-gold)}
.dbseo-sec ul,.dbseo-sec ol{margin:0 0 12px!important;padding-inline-start:0!important;list-style:none!important;counter-reset:dbs}
.dbseo-sec li{position:relative;padding-inline-start:22px;margin:0 0 6px}
.dbseo-sec ul li::before{content:"";position:absolute;inset-inline-start:2px;top:.85em;width:8px;height:3px;background:var(--dbs-gold);transform:skewX(-19deg)}
.dbseo-sec ol li{counter-increment:dbs;padding-inline-start:30px}
.dbseo-sec ol li::before{content:counter(dbs,persian);position:absolute;inset-inline-start:0;top:.35em;min-width:22px;height:22px;border-radius:4px;background:color-mix(in srgb,var(--dbs-gold) 18%,transparent);color:var(--dbs-gold);font-size:12px;font-weight:700;line-height:22px;text-align:center}

/* tables + notes */
.dbseo-table{overflow-x:auto;margin:4px 0 14px;border:1px solid var(--dbs-line);border-radius:8px}
.dbseo-sec table{width:100%;border-collapse:collapse;margin:0!important;border:0!important;background:transparent!important}
.dbseo-sec th{background:color-mix(in srgb,var(--dbs-blue) 16%,transparent)!important;color:var(--dbs-head)!important;font-weight:700;text-align:start;font-size:14px}
.dbseo-sec th,.dbseo-sec td{padding:9px 12px!important;border:0!important;border-bottom:1px solid var(--dbs-line)!important;vertical-align:top}
.dbseo-sec tr:last-child td{border-bottom:0!important}
.dbseo-sec tbody tr:nth-child(odd) td{background:transparent!important}
.dbseo-note{margin:12px 0!important;padding:10px 14px!important;border-inline-start:3px solid var(--dbs-gold);background:color-mix(in srgb,var(--dbs-gold) 9%,transparent);border-radius:6px}

/* small inner boxes for closely related sub-topics */
.dbseo-subs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.dbseo-main > .dbseo-subs:first-child{margin-top:0}
.dbseo-subs--one{grid-template-columns:minmax(0,1fr)}
.dbseo-sub{background:var(--dbs-sub);border:1px solid var(--dbs-line);border-radius:10px;padding:14px 16px;min-width:0}
.dbseo-subs:not(.dbseo-subs--one) .dbseo-sub:last-child:nth-child(odd){grid-column:1/-1}
.dbseo-sub h3{margin:0 0 6px!important;font-size:15.5px!important;line-height:1.8!important;font-weight:700!important;color:var(--dbs-gold)!important}
.dbseo-sub p,.dbseo-sub li{font-size:14.5px;line-height:2}

@media (max-width:1024px){
  .dbseo-sec-in{grid-template-columns:200px minmax(0,1fr);gap:24px}
}
@media (max-width:820px){
  .dbseo-wrap{padding:0}
  .dbseo-panel{padding:22px 14px 4px!important;border-radius:12px}
  .dbseo-panel::before{border-radius:12px 12px 0 0}
  .dbseo-head{padding-bottom:16px}
  .dbseo-sec-in{grid-template-columns:minmax(0,1fr);gap:12px;padding:20px 0}
  .dbseo-side h2{display:flex;align-items:center;gap:10px;font-size:17px!important}
  .dbseo-side h2::before{flex:none;margin:0;width:30px;height:30px;font-size:14px}
  .dbseo-sec p,.dbseo-sec li{font-size:14.5px}
  .dbseo-subs{grid-template-columns:minmax(0,1fr)}
  .dbseo-sub{padding:12px 14px}
}