/* icontop.css - icons on top (Mark's HARD RULE, 7 Oct 2026). Shared by auto-seo.co.uk and wordpress-seo.co.uk.
   On phones (<=767px) every icon, emoji, logo or number badge that STARTS a row sits on its own top row, centred,
   with the heading and text at full width BELOW it. Desktop is untouched.
   - Generic rules catch the usual Tailwind shapes: a horizontal flex row (gap-3 to gap-6) whose first child is an
     icon box (w-9..w-16 square), a round badge (w-6..w-8 rounded-full / .step-dot) or a big emoji (text-lg..text-4xl).
   - .ico-top forces the same on any row the generic rules miss (inline-styled icons, gap-2 rows).
   - .ico-row-act is for rows with a right-hand action (Remove / Edit / Connect): icon left + action right on the top
     row, then the .ico-text block full width underneath, never truncated.
   - .step (number + text cards on the service pages) stacks the same way. */
@media (max-width:767px){
  .flex:not(.flex-col):not(.ico-row-act):is(.gap-3,.gap-4,.gap-5,.gap-6):has(> :first-child:is(.w-9.h-9,.w-10.h-10,.w-11.h-11,.w-12.h-12,.w-14.h-14,.w-16.h-16,.w-6.h-6.rounded-full,.w-7.h-7.rounded-full,.w-8.h-8.rounded-full,.step-dot,.text-xl:not([class*="font-"]),.text-2xl:not([class*="font-"]),.text-3xl:not([class*="font-"]),.text-4xl:not([class*="font-"]),span.text-lg:not([class*="font-"])):not(.animate-spin)),
  .ico-top{
    flex-direction:column !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
  }
  .flex:not(.flex-col):not(.ico-row-act):is(.gap-3,.gap-4,.gap-5,.gap-6):has(> :first-child:is(.w-9.h-9,.w-10.h-10,.w-11.h-11,.w-12.h-12,.w-14.h-14,.w-16.h-16,.w-6.h-6.rounded-full,.w-7.h-7.rounded-full,.w-8.h-8.rounded-full,.step-dot,.text-xl:not([class*="font-"]),.text-2xl:not([class*="font-"]),.text-3xl:not([class*="font-"]),.text-4xl:not([class*="font-"]),span.text-lg:not([class*="font-"])):not(.animate-spin)) > :not(:first-child),
  .ico-top > :not(:first-child){
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
  }
  .flex:not(.flex-col):not(.ico-row-act):is(.gap-3,.gap-4,.gap-5,.gap-6):has(> :first-child:is(.w-9.h-9,.w-10.h-10,.w-11.h-11,.w-12.h-12,.w-14.h-14,.w-16.h-16,.w-6.h-6.rounded-full,.w-7.h-7.rounded-full,.w-8.h-8.rounded-full,.step-dot,.text-xl:not([class*="font-"]),.text-2xl:not([class*="font-"]),.text-3xl:not([class*="font-"]),.text-4xl:not([class*="font-"]),span.text-lg:not([class*="font-"])):not(.animate-spin)) > :first-child,
  .ico-top > :first-child{
    flex:none !important;
    align-self:center !important;
    margin:0 0 .4rem 0 !important;
    text-align:center;
  }
  /* rows with a right-hand action: icon left, action right, text full width underneath */
  .ico-row-act{ flex-wrap:wrap !important; justify-content:space-between !important; align-items:center !important; }
  .ico-row-act > :first-child{ flex:none !important; }
  .ico-row-act > .ico-text{ flex:1 1 100% !important; width:100% !important; min-width:0 !important; order:9; margin-left:0 !important; }
  .ico-row-act > .ico-text .truncate{ white-space:normal !important; overflow:visible !important; text-overflow:clip !important; overflow-wrap:anywhere; }
  /* number + text step cards (service pages: .step > .n + text) */
  .step:has(> .n:first-child){ flex-direction:column !important; align-items:center !important; }
  .step:has(> .n:first-child) > :not(.n){ width:100%; }
  .step:has(> .n:first-child) > .n{ margin-bottom:6px; }
}