/* ==========================================================
   HOSTING MAGAZINE
   PAGE: METHODOLOGY

   POLICY:
   - page-specific composition only
   - shared cards/grid/CTA/notice remain in 20-hm-components.css
   - global primitives remain in 10-hm-core.css
   - global values remain in 00-hm-tokens.css
   ========================================================== */


/* ==========================================================
   01. PAGE ROOT
   ========================================================== */

.hm2026-methodology{
    background:var(--hm-bg);
    color:var(--hm-text-700);
}

body:has(.hm2026-methodology) h1.entry-title,
body:has(.hm2026-methodology) .page-title{
    display:none!important;
}


/* ==========================================================
   02. HERO
   ========================================================== */

.hm2026-methodology .method-hero{
    position:relative;

    overflow:hidden;

    padding:84px 0 78px;

    background:
        radial-gradient(
            circle at 84% 18%,
            rgba(37,99,235,.28),
            transparent 31%
        ),
        radial-gradient(
            circle at 72% 96%,
            rgba(5,150,105,.12),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--hm-navy-950) 0%,
            var(--hm-navy-900) 58%,
            #172554 100%
        );

    color:#cbd5e1;
}

.hm2026-methodology .method-hero::before{
    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    opacity:.11;

    background-image:
        linear-gradient(
            rgba(255,255,255,.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.05) 1px,
            transparent 1px
        );

    background-size:58px 58px;
}

.hm2026-methodology .method-hero-grid{
    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1.15fr)
        minmax(340px,.85fr);

    gap:64px;

    align-items:center;
}

.hm2026-methodology .method-hero h1{
    max-width:790px!important;

    margin:0 0 20px!important;

    color:#fff!important;

    font-size:52px!important;
    line-height:1.04!important;
    letter-spacing:-.035em!important;
}

.hm2026-methodology .method-hero-copy{
    max-width:720px;

    margin:0 0 28px!important;

    color:#cbd5e1;

    font-size:17px;
    line-height:1.68;
}


/* ==========================================================
   03. HERO META
   ========================================================== */

.hm2026-methodology .method-meta{
    display:flex;
    flex-wrap:wrap;

    gap:8px;
}

.hm2026-methodology .method-meta span{
    display:inline-flex;
    align-items:center;

    min-height:34px;

    padding:7px 11px;

    border:1px solid rgba(255,255,255,.14);
    border-radius:999px;

    background:rgba(255,255,255,.055);

    color:#e2e8f0;

    font-size:11px;
    line-height:1;
    font-weight:750;
}


/* ==========================================================
   04. HERO SUMMARY
   Specific component because it belongs to Methodology hero.
   ========================================================== */

.hm2026-methodology .method-summary{
    padding:17px;

    border:1px solid rgba(255,255,255,.15);
    border-radius:var(--hm-radius-lg);

    background:rgba(255,255,255,.075);

    box-shadow:0 28px 65px rgba(0,0,0,.24);
}

.hm2026-methodology .method-summary-head{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-bottom:13px;
}

.hm2026-methodology .method-summary-title{
    color:#a7f3d0;

    font-size:10px;
    line-height:1.2;
    font-weight:900;

    letter-spacing:.09em;
    text-transform:uppercase;
}

.hm2026-methodology .method-summary-version{
    color:#94a3b8;

    font-size:10px;
    font-weight:700;
}

.hm2026-methodology .method-summary-main{
    padding:20px;

    border-radius:var(--hm-radius-md);

    background:#fff;
}

.hm2026-methodology .method-summary-row{
    display:grid;

    grid-template-columns:40px minmax(0,1fr);

    gap:13px;

    align-items:start;

    padding:13px 0;

    border-bottom:1px solid var(--hm-border-soft);
}

.hm2026-methodology .method-summary-row:first-child{
    padding-top:0;
}

.hm2026-methodology .method-summary-row:last-child{
    padding-bottom:0;

    border-bottom:0;
}

.hm2026-methodology .summary-icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:36px;
    height:36px;

    border-radius:var(--hm-radius-sm);

    background:var(--hm-blue-050);
    color:var(--hm-blue-600);

    font-size:9px;
    font-weight:950;
}

.hm2026-methodology .method-summary-row strong{
    display:block;

    margin-bottom:3px;

    color:var(--hm-text-900);

    font-size:13px;
    line-height:1.35;
}

.hm2026-methodology .method-summary-row p{
    margin:0!important;

    color:var(--hm-text-500);

    font-size:11.5px;
    line-height:1.6;
}


/* ==========================================================
   05. PRINCIPLES COMPOSITION
   Card/grid visual language comes from shared CSS.
   ========================================================== */

.hm2026-methodology .method-principles{
    position:relative;
    z-index:4;

    margin-top:-28px;
}

.hm2026-methodology .method-principles-grid{
    gap:14px;
}

.hm2026-methodology .method-principle{
    display:flex;

    gap:14px;

    min-width:0;

    align-items:flex-start;
}

.hm2026-methodology .method-principle strong{
    display:block;

    margin-bottom:5px;

    color:var(--hm-text-900);

    font-size:14px;
    line-height:1.4;
}

.hm2026-methodology .method-principle p{
    margin:0!important;

    color:var(--hm-text-500);

    font-size:12.5px;
    line-height:1.65;
}


/* ==========================================================
   06. SCORE COMPOSITION
   The cards themselves use shared hm-card.
   ========================================================== */

.hm2026-methodology .score-grid{
    grid-template-columns:repeat(6,minmax(0,1fr));

    gap:18px;
}

.hm2026-methodology .score-card{
    grid-column:span 2;

    display:flex;
    flex-direction:column;

    min-width:0;
}

.hm2026-methodology .score-card:nth-child(4){
    grid-column:2 / span 2;
}

.hm2026-methodology .score-card:nth-child(5){
    grid-column:4 / span 2;
}

.hm2026-methodology .score-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;

    margin-bottom:15px;
}

.hm2026-methodology .score-number{
    display:flex;
    align-items:center;
    justify-content:center;

    width:42px;
    height:42px;

    flex:0 0 42px;

    border-radius:var(--hm-radius-sm);

    background:var(--hm-blue-050);
    color:var(--hm-blue-600);

    font-size:10px;
    font-weight:950;
}

.hm2026-methodology .score-card-primary .score-number{
    background:var(--hm-green-050);
    color:var(--hm-green-700);
}

.hm2026-methodology .score-percent{
    color:var(--hm-text-900);

    font-size:28px;
    line-height:1;
    font-weight:950;
}

.hm2026-methodology .score-card h3{
    margin-bottom:9px!important;

    font-size:20px!important;
}

.hm2026-methodology .score-card p{
    margin-bottom:18px!important;

    color:var(--hm-text-500);

    font-size:13px;
    line-height:1.68;
}


/* ==========================================================
   07. WEIGHT VISUALIZATION
   Specific data visualization for this page.
   ========================================================== */

.hm2026-methodology .weight-track{
    height:7px;

    margin-top:auto;

    overflow:hidden;

    border-radius:999px;

    background:var(--hm-border-soft);
}

.hm2026-methodology .weight-fill{
    display:block;

    height:100%;

    border-radius:999px;

    background:var(--hm-blue-600);
}

.hm2026-methodology .score-card-primary .weight-fill{
    background:var(--hm-green-600);
}


/* ==========================================================
   08. MEANING
   ========================================================== */

.hm2026-methodology .meaning-grid{
    display:grid;

    grid-template-columns:
        minmax(0,1.05fr)
        minmax(320px,.95fr);

    gap:24px;

    align-items:stretch;
}

.hm2026-methodology .meaning-list{
    display:grid;

    gap:13px;

    margin-top:21px;
}

.hm2026-methodology .meaning-item{
    display:flex;

    gap:12px;

    align-items:flex-start;
}

.hm2026-methodology .meaning-item .hm-icon{
    width:36px!important;
    height:36px!important;

    flex:0 0 36px!important;
}

.hm2026-methodology .meaning-item strong{
    display:block;

    margin-bottom:2px;

    color:var(--hm-text-900);

    font-size:13px;
}

.hm2026-methodology .meaning-item span{
    color:var(--hm-text-500);

    font-size:12px;
    line-height:1.55;
}


/* ==========================================================
   09. NEGATIVE / LIMITS LIST
   Warning visual comes from shared hm-notice when mapped.
   ========================================================== */

.hm2026-methodology .not-list{
    display:grid;

    gap:13px;

    margin-top:19px;
}

.hm2026-methodology .not-item{
    display:flex;

    gap:11px;

    align-items:flex-start;
}

.hm2026-methodology .not-mark{
    display:flex;
    align-items:center;
    justify-content:center;

    width:27px;
    height:27px;

    flex:0 0 27px;

    border-radius:999px;

    background:var(--hm-warning-bg);
    color:var(--hm-warning);

    font-size:11px;
    font-weight:950;
}


/* ==========================================================
   10. PROCESS
   Grid comes from shared hm-grid.
   Only relationship/content composition is local.
   ========================================================== */

.hm2026-methodology .process-grid{
    gap:14px;

    margin-top:30px;
}

.hm2026-methodology .process-card{
    min-width:0;
}

.hm2026-methodology .process-step{
    display:flex;
    align-items:center;
    justify-content:center;

    width:39px;
    height:39px;

    margin-bottom:15px;

    border-radius:var(--hm-radius-sm);

    background:rgba(37,99,235,.13);
    color:#93c5fd;

    font-size:11px;
    font-weight:950;
}

.hm2026-methodology .process-card h3{
    font-size:18px!important;
}

.hm2026-methodology .process-card p{
    margin:0!important;

    font-size:12.5px;
    line-height:1.65;
}


/* ==========================================================
   11. SOURCE / POLICY COMPOSITION
   Cards/grid/notices come from shared library.
   ========================================================== */

.hm2026-methodology .sources-grid,
.hm2026-methodology .policy-grid{
    gap:18px;
}

.hm2026-methodology .source-card .hm-icon,
.hm2026-methodology .policy-card .hm-icon{
    margin-bottom:16px;
}

.hm2026-methodology .source-card h3,
.hm2026-methodology .policy-card h3{
    font-size:21px!important;
}

.hm2026-methodology .source-card p,
.hm2026-methodology .policy-card p{
    margin-bottom:0!important;

    font-size:13px;
    line-height:1.7;
}

.hm2026-methodology .verification-date{
    display:inline-flex;
    align-items:center;

    gap:7px;

    margin-top:17px;

    padding:8px 10px;

    border-radius:var(--hm-radius-xs);

    background:var(--hm-bg-soft);

    color:var(--hm-text-700);

    font-size:11px;
    font-weight:850;
}


/* ==========================================================
   12. CORRECTION / INSIGHT COMPOSITION
   Base visual = shared hm-insight.
   ========================================================== */

.hm2026-methodology .correction-box{
    grid-template-columns:minmax(0,1fr) auto;

    gap:30px;

    align-items:center;
}

.hm2026-methodology .correction-box h2{
    margin-bottom:8px!important;

    font-size:31px!important;
}

.hm2026-methodology .correction-box p{
    max-width:720px;

    margin:0!important;

    font-size:13.5px;
    line-height:1.7;
}


/* ==========================================================
   13. FINAL CTA COMPOSITION
   Visual component is fully shared.
   ========================================================== */

.hm2026-methodology .methodology-final-section{
    padding-top:58px!important;
}


/* ==========================================================
   14. TYPOGRAPHY ALIGNMENT
   ========================================================== */

.hm2026-methodology .section-head > p{
    max-width:760px;

    font-size:15px!important;
    line-height:1.72!important;
}

.hm2026-methodology .faq summary{
    font-size:16px!important;
    line-height:1.45!important;
}

.hm2026-methodology .faq details > p{
    max-width:900px;

    font-size:14px!important;
    line-height:1.8!important;
}


/* ==========================================================
   15. TABLET
   ========================================================== */

@media(max-width:950px){

    .hm2026-methodology .method-hero-grid{
        grid-template-columns:1fr;

        gap:42px;
    }

    .hm2026-methodology .method-summary{
        max-width:650px;
    }

    .hm2026-methodology .score-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .hm2026-methodology .score-card,
    .hm2026-methodology .score-card:nth-child(4),
    .hm2026-methodology .score-card:nth-child(5){
        grid-column:auto;
    }

    .hm2026-methodology .score-card:last-child{
        grid-column:1 / -1;

        max-width:570px;

        justify-self:center;
    }

    .hm2026-methodology .meaning-grid{
        grid-template-columns:1fr;
    }

    .hm2026-methodology .correction-box{
        grid-template-columns:1fr;
    }

}


/* ==========================================================
   16. MOBILE
   ========================================================== */

@media(max-width:650px){

    .hm2026-methodology .method-hero{
        padding:61px 0 62px;
    }

    .hm2026-methodology .method-hero h1{
        font-size:40px!important;
    }

    .hm2026-methodology .method-hero-copy{
        font-size:15px;
    }

    .hm2026-methodology .method-principles{
        margin-top:-20px;
    }

    .hm2026-methodology .method-meta{
        gap:7px;
    }

    .hm2026-methodology .method-meta span{
        width:100%;

        justify-content:flex-start;
    }

    .hm2026-methodology .method-summary{
        padding:13px;
    }

    .hm2026-methodology .method-summary-main{
        padding:17px;
    }

    .hm2026-methodology .method-summary-head{
        align-items:flex-start;
    }

    .hm2026-methodology .score-grid{
        grid-template-columns:1fr;
    }

    .hm2026-methodology .score-card,
    .hm2026-methodology .score-card:last-child{
        grid-column:auto;

        max-width:none;
    }

    .hm2026-methodology .meaning-grid{
        grid-template-columns:1fr;
    }

    .hm2026-methodology .correction-box h2{
        font-size:27px!important;
    }

    .hm2026-methodology .faq summary{
        font-size:15px!important;
    }

    .hm2026-methodology .faq details > p{
        font-size:13.5px!important;
    }

}


/* ==========================================================
   17. VERY SMALL
   ========================================================== */

@media(max-width:430px){

    .hm2026-methodology .method-hero h1{
        font-size:35px!important;
    }

    .hm2026-methodology .method-summary-row{
        grid-template-columns:36px minmax(0,1fr);

        gap:10px;
    }

    .hm2026-methodology .summary-icon{
        width:34px;
        height:34px;
    }

}


/* ==========================================================
   METHODOLOGY M04C — VISUAL REMEDIATION
   ========================================================== */


/* ----------------------------------------------------------
   REMOVE THEME GAP ABOVE HERO
   Strictly scoped to page 452.
   ---------------------------------------------------------- */

body.page-id-452 .site-content,
body.page-id-452 .content-wrap,
body.page-id-452 .content-area,
body.page-id-452 .site-main,
body.page-id-452 .entry-content{
    margin-top:0!important;
    padding-top:0!important;
}

body.page-id-452 .content-wrap{
    margin-bottom:0!important;
}


/* ----------------------------------------------------------
   SCORE MEANING — stronger editorial composition
   Shared card visuals remain in components.css.
   ---------------------------------------------------------- */

.hm2026-methodology .meaning-grid{
    grid-template-columns:
        minmax(0,1.12fr)
        minmax(320px,.88fr);

    gap:22px;
}

.hm2026-methodology .meaning-card,
.hm2026-methodology .not-box{
    min-width:0;
    min-height:100%;
}

.hm2026-methodology .meaning-card{
    display:flex;
    flex-direction:column;
}

.hm2026-methodology .meaning-card > .hm-icon{
    margin-bottom:17px;
}

.hm2026-methodology .meaning-card h3,
.hm2026-methodology .not-box h3{
    margin:0 0 10px!important;

    font-size:24px!important;
    line-height:1.2!important;
    letter-spacing:-.02em;
}

.hm2026-methodology .meaning-card > p,
.hm2026-methodology .not-box > p{
    font-size:13.5px;
    line-height:1.72;
}

.hm2026-methodology .meaning-list{
    gap:14px;

    margin-top:23px;

    padding-top:21px;

    border-top:1px solid var(--hm-border-soft);
}

.hm2026-methodology .meaning-item{
    gap:13px;
}

.hm2026-methodology .meaning-item strong{
    font-size:13.5px;
}

.hm2026-methodology .meaning-item span{
    font-size:12px;
    line-height:1.6;
}

.hm2026-methodology .not-box{
    display:flex;
    flex-direction:column;

    justify-content:flex-start;
}

.hm2026-methodology .not-list{
    gap:15px;

    margin-top:20px;
}

.hm2026-methodology .not-item{
    gap:12px;

    align-items:flex-start;
}

.hm2026-methodology .not-item:not(:last-child){
    padding-bottom:14px;

    border-bottom:1px solid rgba(180,83,9,.12);
}

.hm2026-methodology .not-mark{
    margin-top:1px;
}

.hm2026-methodology .not-item > div,
.hm2026-methodology .not-item > span:last-child{
    min-width:0;
}


/* ----------------------------------------------------------
   TRANSPARENCY / PROMOTIONAL RELATIONSHIPS
   ---------------------------------------------------------- */

.hm2026-methodology .policy-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:20px;

    align-items:stretch;
}

.hm2026-methodology .policy-card{
    display:flex;
    flex-direction:column;

    min-width:0;
    min-height:100%;
}

.hm2026-methodology .policy-card .hm-icon{
    flex:0 0 auto;

    margin-bottom:18px;
}

.hm2026-methodology .policy-card h3{
    margin:0 0 12px!important;

    font-size:22px!important;
    line-height:1.22!important;
}

.hm2026-methodology .policy-card p{
    width:100%!important;
    max-width:none!important;

    margin:0!important;

    font-size:13.5px!important;
    line-height:1.75!important;

    overflow-wrap:normal;
    word-break:normal;
}

.hm2026-methodology .policy-card-important p{
    color:#92400e;
}


/* ----------------------------------------------------------
   Add stronger separation around transparency section
   without recreating shared cards.
   ---------------------------------------------------------- */

.hm2026-methodology .policy-grid{
    margin-top:4px;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:950px){

    .hm2026-methodology .meaning-grid{
        grid-template-columns:1fr;
    }

    .hm2026-methodology .policy-grid{
        grid-template-columns:1fr;
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:650px){

    .hm2026-methodology .meaning-card h3,
    .hm2026-methodology .not-box h3{
        font-size:21px!important;
    }

    .hm2026-methodology .policy-card h3{
        font-size:20px!important;
    }

    .hm2026-methodology .policy-card p{
        font-size:13px!important;
    }

}