/* SPF Checker Vue Helper CSS - Targeting Only Search Card */

/* ============================================ */
/* GLOBAL FONT FAMILY - EXCLUDING ICONS */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker {
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

.spf-checker-search-block #vue-spf-checker *:not(.pi):not([class*="p-button-icon"]):not([class*="icon"]) {
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

/* Preserve icon fonts */
.spf-checker-search-block #vue-spf-checker .pi,
.spf-checker-search-block #vue-spf-checker [class*="p-button-icon"],
.spf-checker-search-block #vue-spf-checker [class*="icon"] {
    font-family: 'primeicons' !important;
}

/* ============================================ */
/* SEARCH CARD - "REAL-TIME SPF CHECKER" TITLE */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .p-card-header {
    display: block !important;
    padding: 0 !important;
    margin-left: 20px;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .p-card-header::before {
    content: "Real-Time SPF Checker";
    display: block;
    color: #000;
    font-size: 22px !important;
    padding: 10px;
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
    font-weight: lighter;
    text-transform: none;
}

/* ============================================ */
/* SEARCH CARD CONTAINER */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! {
    border-radius: 6.2rem !important;
    box-shadow: 0px 4px 25px 0px #1538771a !important;
    padding: 3rem 3rem !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .p-card-body {
    padding-top: 0px !important;
}

/* ============================================ */
/* SEARCH CARD - HIDE DESCRIPTION BOX */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:border-slate-200.tw\:rounded-lg {
    display: none !important;
}

/* ============================================ */
/* SEARCH CARD - INPUT & BUTTON LAYOUT */
/* ============================================ */

/* Make search box full width */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:grid.tw\:gap-4.tw\:grid-cols-2 {
    grid-template-columns: 1fr !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:col-span-1 {
    width: 100% !important;
}

/* Input field styling */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! input[type="text"].p-inputtext {
    width: 100% !important;
    height: auto !important;
    border-radius: 28px !important;
    padding: 1.5rem 230px 1.5rem 1.5rem !important;
    border: 1px solid rgba(20, 20, 20, 0.2) !important;
    font-size: 18px !important;
    background: #fff !important;
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

/* Button container */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:flex.tw\:gap-2 {
    display: block !important;
    position: relative !important;
    width: 100% !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:h-\[41px\].tw\:mt-10 {
    margin-top: 0 !important;
    height: auto !important;
}

/* ============================================ */
/* SEARCH CARD - CHECK SPF BUTTON */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button {
    background: #4875f4 !important;
    width: 218px !important;
    border-radius: 20px !important;
    font-size: 18px !important;
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    padding: 1.1rem 16px !important;
    border: none !important;
    cursor: pointer !important;
    z-index: 10 !important;
    color: #fff !important;
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button:hover {
    background-color: #3864e0 !important;
}

/* Hide search icon */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button .p-button-icon {
    display: none !important;
}


/* Hide original Vue label */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button .p-button-label {
    font-size: 0;
}

/* Show translated label via ::before (injected by functions.php) */
.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button .p-button-label::before {
    font-family: 'muli', Helvetica, Arial, sans-serif !important;
    font-size: 18px;
}

/* Fix input full width - WordPress only */
.spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:gap-4.tw\:lg\:grid-cols-2 {
    display: block !important;
}

/* ============================================ */
/* SEARCH CARD - MISC */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:flex.tw\:flex-col.tw\:gap-2.tw\:grow {
    flex-grow: 1 !important;
    width: 100% !important;
}

.spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! label[for="analyzer-domain-lookup"] {
    display: none !important;
}

/* ============================================ */
/* STATUS CARDS - COLOR FIXES */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker .tw\:text-green-600 {
    color: #16a34a !important;
    font-weight: 500 !important;
}

.spf-checker-search-block #vue-spf-checker .tw\:text-orange-500 {
    color: #f97316 !important;
    font-weight: 500 !important;
}

.spf-checker-search-block #vue-spf-checker .tw\:text-red-600 {
    color: #dc2626 !important;
    font-weight: 500 !important;
}

/* ============================================ */
/* SPF RESULTS DETAILS - BORDER COLOR FIX */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker .p-card:not(.tw\:mb-6) {
    border-radius: 4vw !important;
}

/* Force correct border color #e2e8f0 (override Avia's #c2c2c2) */
.spf-checker-search-block #vue-spf-checker .p-panel {
    border-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-panel-header {
    border-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-r,
.spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-gray-200 {
    border-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-divider {
    background-color: #e2e8f0 !important;
}

.spf-checker-search-block #vue-spf-checker .p-datatable-table th,
.spf-checker-search-block #vue-spf-checker .p-datatable-table td {
    border-color: #e2e8f0 !important;
}

/* Fix tab list border color */
.spf-checker-search-block #vue-spf-checker .p-tablist-tab-list {
    border-color: #e2e8f0 !important;
    border-bottom-color: #e2e8f0 !important;
}

/* ============================================ */
/* SPF RESULTS DETAILS - GRID LAYOUT */
/* ============================================ */

.spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 1.25rem !important;
}

/* ============================================ */
/* TAGS DETECTED TABLE - RESPONSIVE */
/* ============================================ */

/* Force word breaking for all table cells */
.spf-checker-search-block #vue-spf-checker .p-datatable-table-container {
    overflow: visible !important;
    width: 100% !important;
}

.spf-checker-search-block #vue-spf-checker .p-datatable-table {
    width: 100% !important;
    table-layout: fixed !important;
}

.spf-checker-search-block #vue-spf-checker .p-datatable-table th,
.spf-checker-search-block #vue-spf-checker .p-datatable-table td {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    hyphens: auto !important;
}

/* ============================================ */
/* RESPONSIVE - TABLET (max-width: 1024px) */
/* ============================================ */

@media (max-width: 1024px) {
    /* Status cards - 2 columns */
    .spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 1rem !important;
    }
    
    /* SPF Results Details - 2 columns */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* Make divider span full width */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:col-span-3 {
        grid-column: 1 / -1 !important;
    }
    
    /* Lookup Tree - Reduce branch margin */
    .spf-checker-search-block #vue-spf-checker .tw\:ml-10\!.spf-node {
        margin-left: 2.74rem !important;
    }
}

/* ============================================ */
/* RESPONSIVE - MOBILE (max-width: 768px) */
/* ============================================ */

@media (max-width: 768px) {
    /* Status cards - Single column */
    .spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .tw\:grid.tw\:grid-cols-3 > div {
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* SPF Results Details - Single column */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:grid.tw\:grid-cols-3 {
        grid-template-columns: 1fr !important;
    }
    
    /* Remove right borders, add bottom borders */
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-r {
        border-right: none !important;
        padding-bottom: 1rem !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .p-tabpanel .tw\:border-r:last-of-type {
        border-bottom: none !important;
    }
    
    /* Font size adjustments */
    .spf-checker-search-block #vue-spf-checker .p-panel-header h4.tw\:font-bold {
        font-size: 20px !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .p-tabpanel h5.tw\:tracking-wide {
        font-size: 16px !important;
    }
    
    /* Tags Detected Table - Mobile optimizations */
    .spf-checker-search-block #vue-spf-checker .p-datatable-header-cell,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table tbody td {
        padding: 0.5rem 0.375rem !important;
        font-size: 13px !important;
    }
}

/* ============================================ */
/* RESPONSIVE - MOBILE (max-width: 720px) */
/* ============================================ */

@media (max-width: 720px) {
    /* Search card input */
    .spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! input[type="text"].p-inputtext {
        padding-right: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Search card button - stack below input */
    .spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! button.p-button {
        position: static !important;
        width: 100% !important;
        max-width: 313px !important;
        display: block !important;
        margin: 0 auto !important;
        transform: none !important;
    }
    
    .spf-checker-search-block #vue-spf-checker > .p-card.tw\:mb-6.tw\:shadow-none\! .tw\:flex.tw\:gap-2 {
        display: block !important;
    }
}

/* ============================================ */
/* RESPONSIVE - SMALL MOBILE (max-width: 480px) */
/* ============================================ */

@media (max-width: 480px) {
    /* Reduce padding on result card body */
    .spf-checker-search-block #vue-spf-checker .p-card-body.tw\:items-center\!.tw\:py-16\!.tw\:px-12\! {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
    
    /* Tags Detected Table - Extra small screens */
    .spf-checker-search-block #vue-spf-checker .p-datatable-table {
        width: 100% !important;
        table-layout: fixed !important;
    }
    
    .spf-checker-search-block #vue-spf-checker .p-datatable-header-cell,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table tbody td {
        padding: 0.375rem 0.25rem !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }
    
    /* Force equal column widths for better space distribution */
    .spf-checker-search-block #vue-spf-checker .p-datatable-table th,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table td {
        width: 33.333% !important;
        max-width: 33.333% !important;
        min-width: 0 !important;
    }
    
    /* Extra aggressive word breaking */
    .spf-checker-search-block #vue-spf-checker .p-datatable-table th,
    .spf-checker-search-block #vue-spf-checker .p-datatable-table td {
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
    }
    
    /* Lookup Tree - Branch title font size */
    .spf-checker-search-block #vue-spf-checker .spf-tree .tw\:font-semibold.tw\:leading-none span {
        font-size: 14px !important;
    }
}

/* ============================================ */
/* COPY BUTTON FUNCTIONALITY */
/* ============================================ */

/* Copy button cursor */
.spf-checker-search-block #vue-spf-checker .pi-clone {
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

.spf-checker-search-block #vue-spf-checker .pi-clone:hover {
    color: #4875f4 !important;
}

/* Success checkmark */
.spf-checker-search-block #vue-spf-checker .pi-check {
    color: #10b981 !important;
    transition: color 0.2s ease !important;
}

/* Tooltip positioning */
.spf-checker-search-block #vue-spf-checker .popper {
    position: absolute !important;
    z-index: 9999 !important;
    margin-top: 8px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.spf-checker-search-block #vue-spf-checker .popper .tw\:bg-surface-700 {
    background-color: #374151 !important;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    white-space: nowrap !important;
}

/* ============================================================
   Hero standardisation (a-record spec): tighter top gap + title/desc
   colours. The .spf-hero-block section holds only the title + description;
   the tool is in the separate .spf-checker-search-block, so these rules
   never touch the tool UI. The 'large' Enfold section padding (90px) is
   trimmed to 70px on top to match every other tool's nav→hero gap.
   ============================================================ */
#top .spf-hero-block .content,
#top .spf-hero-block .av-content-full { padding-top: 40px !important; }
#top .spf-hero-block { padding-bottom: 0px !important; }
/* Gray curved hero band — match the other tools (DKIM/whois). */
#top #wrap_all .spf-hero-block { background-color: rgb(243, 243, 246) !important; background-image: none !important; border-radius: 0px 0px 50% 50% !important; }
#top #wrap_all .spf-hero-block h1 {
  font-size: 2.4rem !important; font-weight: 800 !important; color: #0f172a !important;
  line-height: 1.18 !important; margin: 0 0 1rem !important; letter-spacing: -.025em !important;
  font-family: 'Muli','Open Sans',sans-serif !important; text-transform: none !important;
}
#top .spf-hero-block .content p,
#top .spf-hero-block .av-content-full p,
#top .spf-hero-block .avia_textblock p {
  font-size: 1.05rem !important; color: #64748b !important; line-height: 1.7 !important;
  font-family: 'Muli','Open Sans',sans-serif !important; font-weight: 400 !important;
}
@media (max-width: 480px) {
  #top #wrap_all .spf-hero-block h1 { font-size: 1.8rem !important; }
  #top .spf-hero-block .content p,
  #top .spf-hero-block .av-content-full p,
  #top .spf-hero-block .avia_textblock p { font-size: 15px !important; }
}
@media (max-width: 767px) {
    #top .spf-hero-block .content,
    #top .spf-hero-block .av-content-full { padding-top: 28px !important; }
}

/* NOTE: the .spf-hero-block rules above are LEGACY — the rebuilt hero is now
   #spf-checker.checker-tool-title-section and gets its band + H1/description from the
   shared checker_tool_title.css (enqueued for spf-record-lookup in custom-function.php)
   and its height from #spf-checker there. Kept only until confirmed safe to delete. */

/* SPF tool pull (desktop) — tuck the search tool up under the curved hero, like the
   other tools. Keyed on the code-block wrapper class (env-stable, no page-id). */
@media (min-width: 769px) {
  #top .spf-checker-search-block { margin-top: -9rem !important; }
}

/* Mobile layout (reviewed values): constrain container width + pull the tool
   section up so the hero and tool sit tight on phones. */
@media (max-width: 767px) {
  .responsive #top #wrap_all .container {
    width: 100%; max-width: 90%; margin: 0 auto;
    padding-left: 0; padding-right: 0; float: none;
  }
}