/*
Theme Name: Clarksville Fasteners
Template: storefront
Version: 1.0
Description: Storefront child theme matching the original Clarksville Fasteners store.
*/

:root {
  --cf-red: #f60018;
  --cf-yellow: #ffe600;
  --cf-link: #2a9fd6;
  --cf-heading: #636e75;
  --cf-dark: #2b2b2b;
  --cf-menu: #3b3b3b;
}

body {
  background: #666 url(images/bg.png) repeat;
  color: #222;
  font-family: Tahoma, Arial, Helvetica, sans-serif;
  font-size: 14px;
}
a, a:visited { color: var(--cf-link); }
a:hover { color: var(--cf-red); }
h1, h2, h3, .entry-title, .page-title, .woocommerce-products-header__title {
  color: var(--cf-heading);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: normal;
}

/* The page is a white 1000px card on the dark texture, as before. */
.site { max-width: 1000px; margin: 0 auto; background: #fff; }
.col-full { max-width: 1000px; padding: 0 20px; box-sizing: border-box; margin: 0 auto; }

/* Top bar */
.cf-topbar { background: #e3e3e3; border-bottom: 1px solid #c9c9c9; font-size: 12px; }
.cf-topbar .col-full { display: flex; justify-content: space-between; align-items: center; min-height: 30px; max-width: 1000px; }
.cf-toplinks { list-style: none; margin: 0; padding: 0; display: flex; gap: 14px; }
.cf-toplinks a, .cf-cart { color: #333 !important; text-decoration: none; }
.cf-cart { font-weight: bold; background: #f4f4f4; padding: 6px 12px; }

/* Header: hex texture, logo left, search right */
.site-header {
  background: #1d1d1d url(images/header.png) no-repeat left top;
  background-size: cover;
  border: 0;
  padding: 0;
  margin: 0;
}
.site-header > .col-full:first-child { position: relative; min-height: 140px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.site-header .site-branding { margin: 12px 0; width: auto; float: none; }
.site-header .site-branding img { max-height: 105px; width: auto; }
.site-header .site-search { float: none; width: 340px; margin: 0; clear: none; }
.site-search .widget_product_search form { display: flex; }
.site-search .widget_product_search input[type=search] {
  padding: 9px 10px; border: 1px solid #ccc; background: #fff; box-shadow: none; border-radius: 0; font-size: 13px;
}
.site-search .widget_product_search form::before { display: none; }
.site-search .widget_product_search button[type=submit] {
  position: static; clip: auto; width: auto; height: auto; margin-left: 6px; overflow: visible;
  background: var(--cf-yellow); color: #111; font-weight: bold; text-transform: uppercase; font-size: 12px;
  padding: 0 16px; border: 0; border-radius: 0;
}

/* Menu bar */
.storefront-primary-navigation { background: var(--cf-menu); margin: 0; }
.storefront-primary-navigation .col-full { padding: 0; }
.main-navigation { width: 100% !important; float: none !important; margin: 0; padding: 0; }
.main-navigation ul.menu > li > a, .main-navigation ul.nav-menu > li > a {
  color: #fff; font-size: 16px; padding: 13px 18px; border-right: 1px solid #555;
}
.main-navigation ul.menu > li > a:hover,
.main-navigation ul.menu > li.current-menu-item > a { background: #111; color: #fff; }
.menu-toggle { color: #fff; border-color: #777; margin: 8px 12px; }
.storefront-handheld-footer-bar { display: none; }

/* Content */
.site-content { padding-top: 22px; }
.storefront-breadcrumb { background: var(--cf-red); padding: 7px 10px; margin: 0 0 18px; }
.storefront-breadcrumb .col-full { padding: 0; }
.woocommerce-breadcrumb, .woocommerce-breadcrumb a { color: #fff !important; font-weight: bold; font-size: 13px; }
.woocommerce-breadcrumb .breadcrumb-separator { color: #fff; }

/* Section headings with the red tab and underline */
.cf-box-heading, .section-title, .widget-title, .widget .widgettitle {
  border-left: 10px solid var(--cf-red);
  border-bottom: 2px solid var(--cf-red);
  padding: 4px 10px 4px 6px;
  color: var(--cf-heading);
  font-size: 24px;
  font-weight: normal;
  text-align: left;
  margin: 24px 0 18px;
}

/* Buttons */
.button, button, input[type=submit], .added_to_cart, .wc-block-components-button:not(.is-link),
.single_add_to_cart_button, .checkout-button {
  background: var(--cf-red) !important; color: #fff !important; border-radius: 2px; font-weight: normal;
}
.button:hover, button:hover { background: #c40013 !important; }

/* Product and category tiles: grey framed cards */
ul.products li.product, ul.products li.product-category {
  background: #f1f1f1; border: 1px solid #e2e2e2; box-shadow: 0 1px 2px rgba(0,0,0,.12);
  padding: 10px 10px 14px; text-align: center;
}
ul.products li.product img, ul.products li.product-category img { background: #fff; margin-bottom: 8px; }
ul.products li.product-category h2, ul.products li.product .woocommerce-loop-product__title {
  font-size: 13px !important; color: var(--cf-link); text-decoration: underline; font-family: Tahoma, Arial, sans-serif;
}
ul.products li.product-category h2 mark { display: none; }
.cf-sku { display: block; font-size: 12px; color: #777; margin: -4px 0 6px; }
ul.products li.product .price { color: #222; font-weight: bold; }

/* Sidebar category list */
.widget_product_categories ul li { border-bottom: 1px dashed #ccc; padding: 6px 0; margin: 0; }
.widget_product_categories ul li::before { display: none; }
.widget_product_categories ul li a { color: #333; }
.widget_product_categories ul.children { margin: 4px 0 0 12px; }

/* Home welcome block */
.cf-welcome { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start; margin-bottom: 10px; }
.cf-welcome h1 { font-size: 32px; margin-bottom: 18px; }
.cf-welcome p { font-size: 13px; }
.cf-welcome img { max-width: 100%; height: auto; }
.home .entry-header { display: none; }

/* Footer */
.site-footer { background: var(--cf-dark); border-top: 10px solid #232323; color: #bbb; padding: 22px 0 10px; }
.site-footer .widget-title { border: 0; padding: 0; margin: 0 0 10px; color: #ddd; font-size: 22px; }
.site-footer a { color: #ccc !important; font-size: 13px; }
.site-footer ul li { list-style: none; padding: 3px 0 3px 14px; background: url(images/footer-bullet.gif) no-repeat 0 9px; }
.site-footer ul { margin: 0; }
.site-info { color: #888; font-size: 12px; padding: 14px 0 4px; }

@media (max-width: 767px) {
  .site-header .col-full { justify-content: center; }
  .site-header .site-search { width: 100%; margin-bottom: 14px; }
  .cf-welcome { grid-template-columns: 1fr; }
  .main-navigation ul.menu > li > a { border-right: 0; }
}

/* ---- Fixes after first render ---- */
.site-header .col-full, .cf-topbar .col-full, .storefront-primary-navigation .col-full,
.site-content .col-full, .site-footer .col-full, .storefront-breadcrumb .col-full {
  max-width: 1000px !important; width: 100%; padding-left: 20px !important; padding-right: 20px !important; margin: 0 auto;
}
.site-header { background: var(--cf-menu) !important; padding: 0 !important; margin: 0 !important; }
.site-header > .col-full:first-child, .site-header > .col-full:first-of-type {
  background: #1d1d1d url(images/header.png) no-repeat left top; min-height: 140px;
}
.site-header .site-branding { margin: 10px 0 !important; }
.storefront-primary-navigation { padding: 0 !important; }
.storefront-primary-navigation .col-full { padding: 0 !important; }
.main-navigation, .main-navigation ul.menu { margin: 0 !important; }
.main-navigation ul.menu > li > a { line-height: 1.2; }

.site-search .widget_product_search form button[type=submit],
.site-search .widget_product_search button {
  position: static !important; clip: auto !important; clip-path: none !important; width: auto !important; height: auto !important;
  overflow: visible !important; padding: 0 16px !important; margin-left: 6px !important;
  background: var(--cf-yellow) !important; color: #111 !important; font-weight: bold; text-transform: uppercase; font-size: 12px;
}
.site-search .widget_product_search input[type=search] { padding-left: 10px !important; }
.site-search .widget_product_search form::before { content: none !important; }

.site-content { padding-top: 20px !important; }
.site-main, .content-area { margin-bottom: 20px !important; padding-top: 0 !important; }
.hentry { margin-bottom: 0 !important; padding-bottom: 0 !important; border: 0 !important; }
.page-template-template-fullwidth-php .entry-header { display: none; }

/* Tile grid without the float gaps */
ul.products { display: grid !important; grid-template-columns: repeat(4, 1fr); gap: 18px; margin: 0 0 20px !important; }
ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); }
ul.products::before, ul.products::after { display: none !important; }
ul.products li.product, ul.products li.product-category {
  width: auto !important; margin: 0 !important; float: none !important; display: flex; flex-direction: column; align-items: center;
}
ul.products li.product a img, ul.products li.product-category a img {
  aspect-ratio: 1 / 1; object-fit: contain; width: 100%; height: auto;
}
ul.products li.product .button { margin-top: auto; }

/* Sidebar on the left with plain links, like the old store */
.widget_product_categories a { text-decoration: none !important; font-weight: normal !important; color: #333 !important; font-size: 13px; }
.widget_product_categories a:hover { color: var(--cf-red) !important; }
.widget-area .widget { margin-bottom: 20px; }

/* Footer */
.site-footer .widget-title, .site-footer .widget .widget-title { color: #ddd !important; border: 0 !important; padding: 0 !important; }
.site-footer a { text-decoration: none !important; }
.site-footer .widget_nav_menu ul li::before { display: none !important; }
.site-footer .widget_nav_menu ul li { padding: 2px 0 2px 16px; }
.footer-widgets { padding-top: 0 !important; border: 0 !important; }

@media (max-width: 767px) {
  ul.products, ul.products.columns-5 { grid-template-columns: repeat(2, 1fr); }
}

/* Clearfix pseudo-elements and hidden skip links must not count as flex items */
.site-header > .col-full:first-child::before, .site-header > .col-full:first-child::after,
.cf-topbar .col-full::before, .cf-topbar .col-full::after { display: none !important; }
.site-header .skip-link { position: absolute !important; }
.site-header .site-branding { float: none !important; }
.storefront-primary-navigation .col-full { min-height: 0 !important; display: block !important; }
.site-header > .col-full:first-child { background-size: cover !important; }

.storefront-product-pagination { display: none !important; }
@media (max-width: 767px) {
  .cf-toplinks { display: none; }
  .cf-topbar .col-full { justify-content: flex-end; }
  .site-header .site-search { display: block !important; }
  .site-header .site-branding { width: 100%; text-align: center; }
}