/*
Theme Name: Merchants & Co.
Theme URI: https://merchantsandco.com/
Author: Merchants & Co.
Description: Site theme for Merchants & Co. Editorial page templates, no page builder, no external CSS framework. Brand typefaces self-hosted in /fonts.
Version: 1.3.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mco
*/

/* Brand typefaces, per the Merchants & Co. brand guide v1.1 (September 2026):
   Archivo 400 to 700 (wordmark, titles, body, UI), Fraunces (display titles,
   moderate contrast serif, weight 500 at 40px and up, 600 below), Space Mono
   400/700 (taglines, labels, data). Self-hosted, no third-party font service. */
@font-face{font-family:'Archivo';src:url(fonts/archivo-latin-wght-normal.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Fraunces';src:url(fonts/fraunces-latin-variable.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
/* Brand guide v1.1, section 05: Fraunces always with SOFT 0 and WONK 0, optical size automatic. */
[style*="Fraunces"]{font-variation-settings:"SOFT" 0,"WONK" 0;font-optical-sizing:auto}
@font-face{font-family:'Space Mono';src:url(fonts/space-mono-latin-400-normal.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url(fonts/space-mono-latin-700-normal.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

body{margin:0;background:#F4EFE6;font-family:Archivo,sans-serif}
  a{color:#17324E;text-decoration:none}
  a:hover{color:#9C7A3C}
  p{text-wrap:pretty}
  header a, header a:hover, footer a, footer a:hover{color:inherit}
  /* Light text on navy: smoothing */
  [style*="background:#17324E"] h1,[style*="background:#17324E"] h2,[style*="background:#17324E"] h3,
  [style*="background:#17324E"] p,[style*="background:#17324E"] div,[style*="background:#17324E"] span,
  [style*="background:#17324E"] a,[style*="background:#17324E"] blockquote,[style*="background:#17324E"] footer{
    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Symbols drawn in SVG: none of the three brand fonts contains check marks,
   crosses, bullets or arrows, and the browser would borrow a system font */
.mco-i{display:inline-block;width:.9em;height:.9em;vertical-align:-.1em;overflow:visible}
.mco-i path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square;stroke-linejoin:miter}
.mco-i .f{fill:currentColor;stroke:none}

/* Form controls do not inherit the page font by default */
button,input,select,textarea{font-family:inherit}

[id]{scroll-margin-top:56px}

/* =====================================================================
   Responsive layer, v1.1.0
   The templates set their layout in inline style attributes, which
   cannot carry media queries. The rules below override those inline
   values by attribute selector and !important, below 1280px only.
   Desktop rendering at 1280px and wider is unchanged.
   ===================================================================== */

img,svg,video{max-width:100%;height:auto}

/* Page wrapper: fluid instead of a fixed 1280px canvas */
[data-screen-label][style*="width:1280px"]{width:auto !important;max-width:1280px}

/* Header: hamburger menu below 1100px */
.mco-burger,.mco-nav-cta{display:none}
@media (max-width:1100px){
  body>header{flex-wrap:wrap !important;height:auto !important;min-height:72px;padding-top:12px !important;padding-bottom:12px !important;row-gap:0 !important}
  .mco-burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 11px;margin:0;background:transparent;border:1px solid #E1DBCF;border-radius:6px;cursor:pointer;box-sizing:border-box}
  .mco-burger span{display:block;height:2px;background:#17324E;border-radius:1px;transition:transform .2s ease,opacity .2s ease}
  .mco-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mco-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mco-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .mco-burger:focus-visible{outline:2px solid #9C7A3C;outline-offset:2px}
  body>header>nav{display:none !important;order:3;flex:1 0 100%;flex-direction:column;align-items:stretch !important;gap:0 !important;margin-top:12px;font-size:17px !important;color:#17324E !important}
  body>header.is-open>nav{display:flex !important}
  body>header>nav a{display:block;padding:14px 0;border-top:1px solid #E1DBCF}
}
@media (max-width:370px){
  body>header .mco-header-cta{display:none}
  body>header>nav a.mco-nav-cta{display:block;font-weight:600;color:#9C7A3C}
}

/* Brand guide, section 02: below 250px of available width the tagline
   drops and the short lockup (monogram + name) stands alone. */
@media (max-width:420px){
  body>header .mco-tagline{display:none}
}

/* Tablet: two column layouts with a fixed side column collapse */
@media (max-width:900px){
  [style*="grid-template-columns:1.35fr 1fr"],
  [style*="grid-template-columns:1.15fr 1fr"],
  [style*="grid-template-columns:1.45fr 1fr"],
  [style*="grid-template-columns:1fr 1.5fr"],
  [style*="grid-template-columns:1fr 460px"],
  [style*="grid-template-columns:1fr 400px"],
  [style*="grid-template-columns:1fr 380px"],
  [style*="grid-template-columns:1fr 340px"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr !important}
  [style*="gap:56px"],[style*="gap:48px"]{gap:36px !important}
}

/* Phone */
@media (max-width:760px){
  body{overflow-x:hidden}

  /* Side padding 48px to 20px, on every section, the header and the footer */
  [style*=" 48px"]{padding-left:20px !important;padding-right:20px !important}

  /* Every multi column grid stacks */
  [style*="grid-template-columns:repeat(2,1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"],
  [style*="grid-template-columns:150px 1fr"]{grid-template-columns:1fr !important}

  /* Numbered rows: number in a narrow column, title and text stacked beside it */
  [style*="grid-template-columns:72px 1fr 1fr"],
  [style*="grid-template-columns:80px 240px 1fr"],
  [style*="grid-template-columns:64px 300px 1fr"],
  [style*="grid-template-columns:72px 200px 1fr"],
  [style*="grid-template-columns:80px 300px 1fr"]{grid-template-columns:44px 1fr !important;gap:10px 14px !important}
  [style*="grid-template-columns:72px 1fr 1fr"]>:nth-child(3),
  [style*="grid-template-columns:80px 240px 1fr"]>:nth-child(3),
  [style*="grid-template-columns:64px 300px 1fr"]>:nth-child(3),
  [style*="grid-template-columns:72px 200px 1fr"]>:nth-child(3),
  [style*="grid-template-columns:80px 300px 1fr"]>:nth-child(3){grid-column:2}

  /* The Math, revenue bands: badge moves under the bar */
  [style*="grid-template-columns:96px 1fr 78px 150px"]{grid-template-columns:52px 1fr 58px !important;gap:10px 14px !important}
  [style*="grid-template-columns:96px 1fr 78px 150px"]>:nth-child(4){grid-column:2 / -1}

  /* Large gaps shrink */
  [style*="gap:56px"],[style*="gap:48px"],[style*="gap:44px"]{gap:28px !important}

  /* Rows of labels spread across the width wrap instead of overflowing */
  [style*="display:flex;justify-content:space-between"]{flex-wrap:wrap}

  /* Tables scroll inside their own box */
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  table td,table th{white-space:normal !important}

  /* Headline sizes */
  [style*="font:600 62px"],[style*="font:600 54px"]{font-size:38px !important;line-height:1.08 !important}
  [style*="font:600 42px"]{font-size:31px !important;line-height:1.12 !important}
  [style*="font:600 34px"]{font-size:27px !important}
  [style*="font:600 28px"]{font-size:23px !important}
  [style*="font:600 27px"]{font-size:22px !important}

  /* Header: logo, button and hamburger on one row */
  body>header{column-gap:12px !important}
  body>header>a>span+span{font-size:17px !important}
  body>header>div{gap:8px !important}
  body>header>div>a{padding:11px 14px !important;font-size:14px !important}
}