/* =====================================================================
   CRI-ONE  site.css  -  YOUR file.

   * It is loaded LAST on every public page (store pages and the standalone
     pages), so a plain rule here wins over older rules of equal strength.
   * Edit it here, then double-click  publish.cmd  in this folder.
     Every publish keeps a backup on the server;  rollback.cmd  undoes the last one.
   * If DevTools shows a rule pointing at some OTHER file (crione-readable.css,
     crione-luma-shell.php, luma-head.html ...), it is not in this file. See README.txt.
   * Not loaded on: the Magento admin (/admin123), phpList (/lists), Matomo (/analytics).
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. PAGE WIDTH AND WRAPPER
   --------------------------------------------------------------------- */

/* Container sizing. No max-width is set here any more (removed at Chris's request), so Luma's own
   1280px centred column applies on computers. Add  max-width: 100% !important;  to use the whole window. */
.page-wrapper, .page-main, .columns, .column.main, .category-view, .category-description {
    min-width: 0 !important;
    box-sizing: border-box;
}

/* ---------------------------------------------------------------------
   2. HEADER SPACING
   --------------------------------------------------------------------- */

/* 30px all round. On phones the sides stay at 8px (an !important rule for phones
   lives in the store's header file); top and bottom become 30px. */
.page-header .header.content {
    padding: 30px;
}


/* ---------------------------------------------------------------------
   3. SPECIFIC PAGES
   --------------------------------------------------------------------- */

/* home-tools: its boxes carry an inline max-width:1000px and auto margins; let them use the full width. */
.crione-tag-cloud, .crione-si-note {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}

/* Calculators page: the intro block and the card list used to stop at 900px. */
.crione-cal-hero, .crione-cal-grid {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}


/* ---------------------------------------------------------------------
   4. FONTS  (Arial everywhere; monospace for code)
   --------------------------------------------------------------------- */
html,body,div,span,p,h1,h2,h3,h4,h5,h6,a,li,ul,ol,dl,dt,dd,button,input,select,textarea,table,td,th,tr,thead,tbody,form,label,fieldset,legend,small,strong,b,em,i,section,article,header,footer,nav,main,aside,figcaption,blockquote{font-family:Arial,Helvetica,sans-serif !important;}
code,pre,kbd,samp,tt{font-family:"Courier New",Consolas,"Liberation Mono",monospace !important;}


/* ---------------------------------------------------------------------
   5. PRODUCT PAGES: the "invention" panels
      Built in the browser by pub/media/crione-provenance.js with inline styles; the
      !important flags here beat those. Black, white and grey only, square, 15px+ text:
        .crione-components-strip  "Parts of this invention"   (left column)
        .crione-archive-strip     the Wayback capture thumbnails (left column)
        .crione-provenance        the right-hand panels: "Where this invention comes from",
                                  "What came before" (prior art table), "Confirm without taking..."
   --------------------------------------------------------------------- */
.crione-provenance, .crione-components-strip, .crione-archive-strip {
    font-size: 15px;
    line-height: 1.6;
    color: #222;
}
.crione-provenance, .crione-components-strip, .crione-archive-strip,
.crione-provenance *, .crione-components-strip *, .crione-archive-strip * {
    border-radius: 0 !important;
    box-shadow: none !important;
    letter-spacing: normal !important;
    color: #222 !important;
}

/* the panels: light grey, thin border, black bar on the left */
.crione-prov-panel, .crione-components-strip, .crione-archive-strip {
    background: #f5f5f5 !important;
    border: 1px solid #d1d1d1 !important;
    border-left: 4px solid #111 !important;
    padding: 20px 24px !important;
}

/* small labels above each heading: readable, not tiny capitals */
.crione-prov-panel > p:first-child, .crione-components-strip > p:first-child {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    color: #444 !important;
}
.crione-provenance h3, .crione-components-strip h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: #111 !important;
}

/* body text: nothing under 15px (the script uses 11-13px) */
.crione-provenance :is(p, li, div, td, th, span, small),
.crione-components-strip :is(p, li, div, span, small),
.crione-archive-strip :is(p, li, div, span, small) {
    font-size: max(15px, 1em) !important;
}

/* the "Pre-invention due diligence" box and other boxes inside a panel */
.crione-prov-panel > div:not([style*="overflow-x"]) {
    background: #fff !important;
    border: 1px solid #d1d1d1 !important;
    border-left: 4px solid #767676 !important;
    padding: 12px 16px !important;
}
.crione-prov-panel > div:not([style*="overflow-x"]) > p:first-child {
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: none !important;
}

/* links: black and underlined, like the calculators */
.crione-provenance a, .crione-components-strip a, .crione-archive-strip a {
    color: #111 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
    border-bottom: 0 !important;
    font-weight: 700 !important;
}

/* code names: dark on light grey */
.crione-provenance code, .crione-components-strip code {
    background-color: #f2f2f2 !important;
    border: 1px solid #d9d9d9 !important;
    padding: 1px 6px !important;
    font-family: Consolas, "Courier New", monospace !important;
    font-size: 14.5px !important;
    overflow-wrap: anywhere;
}

/* the "Parts of this invention" list: one white card per part */
.crione-components-strip ul { gap: 10px !important; }
.crione-components-strip li {
    background: #fff !important;
    border: 1px solid #d1d1d1 !important;
    padding: 10px 14px !important;
}

/* the prior-art table */
.crione-provenance th {
    background: #f5f5f5 !important;
    color: #111 !important;
    font-weight: 700 !important;
    text-align: left;
    padding: 10px 12px !important;
    border-bottom: 2px solid #111 !important;
}
.crione-provenance td {
    padding: 10px 12px !important;
    border-bottom: 1px solid #d1d1d1 !important;
    vertical-align: top;
}
.crione-provenance thead tr { background: transparent !important; }

/* the archive strip: captions were about 10px */
.crione-archive-strip :is(p, span, div, a) { font-size: 14px !important; }


/* ---------------------------------------------------------------------
   6. LINKS, 1999 STYLE  (every link on the site)
      Plain underlined blue; purple once visited; red while being clicked.
      Left alone on purpose (they keep their own look):
        - white text on dark backgrounds: the top grey bar, the black/coloured buttons, the share
          buttons, the dark cards in the Wandering Aisle, the login-page "Invite by email" button
        - the logo, the cart icon, the mobile menu switches, "skip" links, product photos
        - whole-card links (Calculators cards, Wandering Aisle cards)
        - buttons and tabs: header Account/Log in, sign-in buttons, product tabs, pager buttons
        - the colour-coded chips: home-tools tags, the Press series filter chips
      To change what is left alone, edit the list inside  :not( ... )  below (same list in all three rules).
      The odd  html:not(#x)  at the start only makes these rules strong enough to beat older link rules.
   --------------------------------------------------------------------- */
html:not(#x) a:link:not(.logo, .action.showcart, .nav-toggle, .action.skip, .product-item-photo, .crione-cal, .wa-card, .wa-btn, .wa-page, .btn, .crione-header-login, .data.switch, .nav-sections-item-switch, .action.primary, .action.tocart, .buy, .go, .cta-button, .button, .dl a, .crione-share-btn, .cs-modal-go, #crione-email, .cp-series a, .crione-tag-cloud-tags a, [style*="border-radius:999px"], .panel.wrapper a, .copyright a) {
    color: #0000EE !important;
    text-decoration: underline !important;
}
html:not(#x) a:visited:not(.logo, .action.showcart, .nav-toggle, .action.skip, .product-item-photo, .crione-cal, .wa-card, .wa-btn, .wa-page, .btn, .crione-header-login, .data.switch, .nav-sections-item-switch, .action.primary, .action.tocart, .buy, .go, .cta-button, .button, .dl a, .crione-share-btn, .cs-modal-go, #crione-email, .cp-series a, .crione-tag-cloud-tags a, [style*="border-radius:999px"], .panel.wrapper a, .copyright a) {
    color: #551A8B !important;
    text-decoration: underline !important;
}
html:not(#x) a:active:not(.logo, .action.showcart, .nav-toggle, .action.skip, .product-item-photo, .crione-cal, .wa-card, .wa-btn, .wa-page, .btn, .crione-header-login, .data.switch, .nav-sections-item-switch, .action.primary, .action.tocart, .buy, .go, .cta-button, .button, .dl a, .crione-share-btn, .cs-modal-go, #crione-email, .cp-series a, .crione-tag-cloud-tags a, [style*="border-radius:999px"], .panel.wrapper a, .copyright a) {
    color: #EE0000 !important;
}
/* in the invention panels the links were bold; 1999 links are plain weight */
.crione-provenance a, .crione-components-strip a, .crione-archive-strip a { font-weight: normal !important; }


/* ---------------------------------------------------------------------
   7. PHONES  (screens 767px wide or narrower)
   Note: the h1/h2/h3 sizes are wrapped in :where(...) on purpose, so a page's own heading
   sizes still win (that is how the site behaved before this file existed). Remove the
   :where( ) to force these sizes everywhere.
   --------------------------------------------------------------------- */
@media (max-width:767px){
    html,body{max-width:100vw;overflow-x:hidden}
    .page-wrapper,.page-main,.columns,.column.main,.category-view,.category-description{max-width:100% !important;min-width:0 !important;box-sizing:border-box}
    img,iframe,video,canvas,svg{max-width:100%;height:auto}
    pre,code,kbd,samp{max-width:100%;overflow-x:auto;overflow-wrap:break-word;word-break:break-word;-webkit-overflow-scrolling:touch}
    :where(h1){font-size:clamp(22px,6vw,32px) !important;line-height:1.15 !important;overflow-wrap:break-word;word-break:break-word;letter-spacing:-.01em}
    :where(h2){font-size:clamp(18px,5vw,24px) !important;line-height:1.2 !important;overflow-wrap:break-word;word-break:break-word}
    :where(h3){font-size:clamp(16px,4.5vw,20px) !important;line-height:1.25 !important;overflow-wrap:break-word;word-break:break-word}
    p,li,dd,dt{overflow-wrap:break-word;word-break:break-word;max-width:100%}
    input:not([type=hidden]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px !important;min-height:44px;box-sizing:border-box}
    button,input[type=submit],input[type=button],.action.primary,.action-primary,.cta,.button-primary{min-height:44px !important;padding:12px 20px !important;font-size:16px !important;line-height:1.2 !important}
    table:not(.io){max-width:100%;display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
    .crione-cal-hero,.crione-cal-grid,.crione-cal,.crione-cal-what,.crione-cal-outcomes,.crione-cal-name,.crione-cal-price,.crione-si,.crione-tag-cloud{max-width:100% !important;min-width:0 !important;box-sizing:border-box}
    .crione-cal{width:100% !important;overflow-wrap:break-word;word-break:break-word}
    .crione-cal-grid{overflow:hidden}
    .crione-cal-hero p.lede,.crione-cal-what{max-width:100% !important;font-size:15px !important;line-height:1.55}
    .grid,.form-grid,.two-col,.input-grid,.row-2,.row-3{display:block !important}
    .grid>*,.form-grid>*,.two-col>*,.input-grid>*,.row-2>*,.row-3>*{width:100% !important;max-width:100% !important;margin-bottom:12px}
}