/*////////////////////////////////////////////////////////////////////////////////////////////////////
//  Worm Gear Ratios & Torque (worm-gear-ratios-and-torque.php)
//  Same look as the part search page (tech-tools/part-search/customContent.css): a navy header bar with a
//  red underline, then a white card on a light gray panel.
//  The table and the notes under it come from the database ($elements->mainContent), so everything here
//  styles that markup as it is: #partsAndSpecs, .boldText65, #wormgearHorsepowerTable (3 header rows made
//  of <td>s, then one row per gear set: ratio, CD, part number, then HP / torque for 1800, 900, 300, 100 RPM)
//  and the <h4> footnotes. Phones: the table scrolls sideways with Ratio + CD pinned on the left.
////////////////////////////////////////////////////////////////////////////////////////////////////*/
#wormRatios {
    --wr-navy: #1a304d;
    --wr-navy-2: #243f63;
    --wr-red: #cc0033;
    --wr-red-dark: #a3002a;
    --wr-bg: #eef2f6;
    --wr-text: #1d2733;
    --wr-label: #34414f;
    --wr-muted: #5b6776;
    --wr-border: #cfd8e3;
    --wr-band: #f3f6fa;      /* every other RPM group */
    --wr-head: #dfe6ee;
    --wr-head-band: #d2dce7;
    --wr-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --wr-ratio-w: 58px;      /* pinned Ratio column on phones; CD is pinned right after it */

    box-sizing: border-box;
    width: auto;
    max-width: min(1100px, calc(100% - 32px));
    margin: 12px auto 24px;
    padding: 0 0 16px;
    background: var(--wr-bg);
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(26, 48, 77, .18);
    color: var(--wr-text);
    font: 14px/1.4 var(--wr-font);
    text-align: left;
}

#wormRatios *,
#wormRatios *::before,
#wormRatios *::after {
    box-sizing: border-box;
}

/*---------- header bar ----------*/
#wormRatios #wrHeader {
    padding: 14px 18px 12px;
    background: var(--wr-navy);
    border-bottom: 3px solid var(--wr-red);
    border-radius: 14px 14px 0 0;
    color: #fff;
}

#wormRatios #wrTitle {
    margin: 0;
    padding: 0;
    color: #fff;
    font: 700 20px/1.2 var(--wr-font);
    letter-spacing: .02em;
    text-align: left;
    text-shadow: none;
}

#wormRatios #wrSubtitle {
    margin: 4px 0 0;
    color: #c9d6e6;
    font-size: 14px;
}

#wormRatios .wrHint {
    margin: 14px 16px 0;
    color: var(--wr-muted);
    font-size: 13px;
}

#wormRatios .wrSwipe {
    display: none;
}

/*---------- the card (the database content) ----------*/
#wormRatios #mainContent {
    position: static;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 16px 0;
    padding: 16px 18px 18px;
    background: #fff;
    border: 1px solid var(--wr-border);
    border-radius: 10px;
    color: var(--wr-text);
    font: 14px/1.4 var(--wr-font);
    text-align: left;
}

#wormRatios #mainContent > * {
    min-width: 0; /* lets the table scroll inside the card instead of widening the page */
}

#wormRatios #mainContent > br {
    display: none;
}

/* "View Parts & Specs": red pill button */
#wormRatios #mainContent > h3 {
    margin: 0;
    padding: 0;
    text-align: left;
}

#wormRatios #partsAndSpecs,
#wormRatios #partsAndSpecs:visited {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: 0 16px;
    border-radius: 999px;
    background: var(--wr-red);
    color: #fff;
    font: 600 14px var(--wr-font);
    text-decoration: none;
    transition: background .15s;
}

#wormRatios #partsAndSpecs:hover {
    background: var(--wr-red-dark);
    color: #fff;
}

/* the table title */
#wormRatios #mainContent > .center {
    padding: 0 0 10px;
    border-bottom: 1px solid #e3e9f0;
    text-align: left;
}

#wormRatios .boldText65 {
    color: var(--wr-navy);
    font: 700 17px/1.3 var(--wr-font);
}

/*---------- table ----------*/
/* display:block lets the table scroll sideways inside the card; the rows still lay out as a table */
#wormRatios #wormgearHorsepowerTable {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    border: 1px solid var(--wr-border);
    border-radius: 10px;
    border-collapse: separate;
    border-spacing: 0;
    background: #fff;
    -webkit-overflow-scrolling: touch;
}

#wormRatios #wormgearHorsepowerTable tbody {
    display: table;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

#wormRatios #wormgearHorsepowerTable td {
    padding: 7px 10px;
    border: 0;
    border-bottom: 1px solid #edf1f5;
    background: #fff;
    color: var(--wr-text);
    font: 14px/1.3 var(--wr-font);
    font-variant-numeric: tabular-nums;
    text-align: center;
    white-space: nowrap;
}

/* The database table repeats its 3 header rows every ~15 gear sets, after a one-cell spacer row, and the blocks
   aren't all the same length, so rows are picked out by what they hold instead of by position:
     header row 1   tr:has(> td[colspan="3"])     RPM OF WORM | 1800 | 900 | 300 | 100
     header row 2   tr:has(> td[rowspan="2"])     (blank) | part numbers heading | Input-Output x4
     header row 3   that row + tr                 Ratio | CD | HP | Torque x4
     spacer         tr:has(> td:only-child)
     gear set       tr:has(> td.wormGearPartnos)  Ratio | CD | part number | HP | Torque x4 */

/* gear sets: every other RPM group shaded (1800 and 300 = cells 4-5 and 8-9) */
#wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:nth-child(4n),
#wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:nth-child(4n+5) {
    background: var(--wr-band);
}

#wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:nth-child(even):nth-child(n+4) {
    border-left: 1px solid #e3e9f0; /* line before each RPM group (cells 4, 6, 8, 10) */
}

#wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:first-child {
    color: var(--wr-navy);
    font-weight: 700;
}

/* style-main.css turns hovered rows dark gray */
#wormRatios #wormgearHorsepowerTable tr:hover {
    background: none;
    color: inherit;
}

#wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos):hover td {
    background: #e7eef6;
}

/* part numbers */
#wormRatios #wormgearHorsepowerTable td.wormGearPartnos {
    background: #fff;
    color: var(--wr-navy);
}

#wormRatios #wormgearHorsepowerTable td.wormGearPartnos a,
#wormRatios #wormgearHorsepowerTable td.wormGearPartnos a:visited {
    color: var(--wr-navy);
    font: 700 14px var(--wr-font);
    text-decoration: underline;
    text-underline-offset: 3px;
}

#wormRatios #wormgearHorsepowerTable td.wormGearPartnos a:hover {
    color: var(--wr-red);
}

/* spacer between blocks: a gap in the card */
#wormRatios #wormgearHorsepowerTable tr:has(> td:only-child) td {
    height: 18px;
    padding: 0;
    border-bottom: 0;
    background: #fff;
    font-size: 0;
}

/* header rows */
#wormRatios #wormgearHorsepowerTable tr:has(> td[colspan="3"]) td,
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) td,
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td {
    padding: 8px 10px;
    background: var(--wr-head);
    border-bottom: 1px solid var(--wr-border);
    color: var(--wr-label);
    font: 700 12px/1.3 var(--wr-font);
    letter-spacing: .04em;
    text-transform: uppercase;
    vertical-align: middle;
}

/* row 1: RPM OF WORM | 1800 | 900 | 300 | 100 */
#wormRatios #wormgearHorsepowerTable tr:has(> td[colspan="3"]) td {
    background: var(--wr-navy);
    border-bottom-color: var(--wr-navy);
    color: #fff;
    font-size: 13px;
}

#wormRatios #wormgearHorsepowerTable tr:has(> td[colspan="3"]) td:nth-child(n+2) {
    border-left: 1px solid rgba(255, 255, 255, .2);
    font-size: 15px;
    letter-spacing: .02em;
}

#wormRatios #wormgearHorsepowerTable tr:has(> td[colspan="3"]) td:nth-child(2),
#wormRatios #wormgearHorsepowerTable tr:has(> td[colspan="3"]) td:nth-child(4) {
    background: var(--wr-navy-2);
}

/* a line above each repeated header block */
#wormRatios #wormgearHorsepowerTable tr:has(> td:only-child) + tr td {
    border-top: 1px solid var(--wr-border);
}

/* row 2: (blank) | part numbers | Input-Output x4 */
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) td {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--wr-muted);
}

#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) td:nth-child(3),
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) td:nth-child(5),
/* row 3: Ratio | CD | HP | Torque x4 (the part number column is covered by the heading above) */
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:nth-child(3),
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:nth-child(4),
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:nth-child(7),
#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:nth-child(8) {
    background: var(--wr-head-band);
}

#wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) td[rowspan="2"] {
    background: #fff; /* the part number column heading */
    color: var(--wr-navy);
    font-size: 13px;
}

/*---------- footnotes ----------*/
#wormRatios #mainContent > h4 {
    margin: 0;
    padding: 0 0 0 12px;
    border-left: 3px solid #e0a100;
    color: var(--wr-label);
    font: 400 13px/1.5 var(--wr-font);
    text-align: left;
}

#wormRatios #mainContent > h4:first-of-type {
    margin-top: 4px;
    font-weight: 600;
}

/*---------- phones ----------*/
@media (max-width: 760px) {
    #wormRatios {
        max-width: calc(100% - 16px);
        margin-top: 8px;
    }

    #wormRatios #wrHeader {
        padding: 12px 14px 10px;
    }

    #wormRatios #wrTitle {
        font-size: 18px;
    }

    #wormRatios .wrHint {
        margin: 12px 12px 0;
    }

    #wormRatios .wrSwipe {
        display: inline;
    }

    #wormRatios #mainContent {
        margin: 10px 10px 0;
        padding: 14px;
    }

    #wormRatios #partsAndSpecs {
        min-height: 44px;
        font-size: 15px;
    }

    #wormRatios #wormgearHorsepowerTable td {
        padding: 8px 9px;
    }

    /* Ratio and CD stay on screen while the rest scrolls (header row 3 and every gear set) */
    #wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:nth-child(-n+2),
    #wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:nth-child(-n+2) {
        position: sticky;
        z-index: 1;
    }

    #wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:first-child,
    #wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:first-child {
        left: 0;
        min-width: var(--wr-ratio-w);
        max-width: var(--wr-ratio-w);
    }

    #wormRatios #wormgearHorsepowerTable tr:has(> td[rowspan="2"]) + tr td:nth-child(2),
    #wormRatios #wormgearHorsepowerTable tr:has(> td.wormGearPartnos) td:nth-child(2) {
        left: var(--wr-ratio-w);
        box-shadow: 2px 0 4px rgba(26, 48, 77, .12);
    }
}

@media (prefers-reduced-motion: reduce) {
    #wormRatios * {
        transition: none !important;
    }
}