/*
Theme Name: Marginal
Author: Iftiar Hossain
Author URI: https://iftiarhossain.com
Description: A clean, modern block theme for blogs and business, portfolio, or service sites, with warm editorial style and ready-made page layouts.
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: marginal
Tags: blog, one-column, custom-colors, custom-menu, editor-style, featured-images, full-site-editing, block-patterns, style-variations, translation-ready, threaded-comments, wide-blocks, grid-layout
*/

/**
 * This file is intentionally minimal.
 *
 * In a block theme, nearly all design decisions (color, typography, spacing,
 * layout) live in theme.json, not here. This file exists mainly to satisfy
 * WordPress's theme header requirement (the comment block above) and to hold
 * the small handful of styles that theme.json genuinely cannot express yet.
 *
 * Do not add layout or component styling here without a clear reason -- if
 * it can be expressed in theme.json, it belongs there, where it stays part
 * of the structured design system rather than becoming untracked raw CSS.
 */

/* Accessibility: visually hide text for screen readers only (skip links,
   "Continue reading" context, etc.) while keeping it in the accessibility
   tree. This utility class is a WordPress convention and is expected by
   several core block features. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
}

.screen-reader-text:focus {
  background-color: var(--wp--preset--color--base, #faf6ef);
  color: var(--wp--preset--color--contrast, #2a2420);
  clip: auto !important;
  clip-path: none;
  display: block;
  font-size: 1rem;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
}

/* =========================================
   WooCommerce Blocks -- Cart & Checkout
   Verified against actual rendered markup.
   ========================================= */

.wc-block-components-sidebar {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--40);
}

.wc-block-components-order-summary {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding-bottom: var(--wp--preset--spacing--30);
  margin-bottom: var(--wp--preset--spacing--20);
}

.wc-block-components-totals-item {
  padding-top: var(--wp--preset--spacing--20);
  padding-bottom: var(--wp--preset--spacing--20);
  border-top: 1px solid var(--wp--preset--color--border);
}

.wc-block-components-panel {
  border-top: 1px solid var(--wp--preset--color--border);
  padding-top: var(--wp--preset--spacing--20);
}

.wc-block-components-totals-footer-item {
  border-top: 2px solid var(--wp--preset--color--border);
  margin-top: var(--wp--preset--spacing--20);
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
.wc-block-components-totals-footer-item
  .wc-block-components-totals-item__value {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
}

.wc-block-components-checkout-order-summary__title-text,
.wc-block-components-checkout-order-summary__title-price {
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
}

.wc-block-components-checkout-order-summary__title-price {
  color: var(--wp--preset--color--accent);
}

.wc-block-components-checkout-step {
  background-color: var(--wp--preset--color--base);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--40);
}

.wc-block-components-checkout-step + .wc-block-components-checkout-step {
  margin-top: var(--wp--preset--spacing--40);
}

.wc-block-components-checkout-step__title {
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--large);
  font-weight: 600;
}

.wc-block-components-text-input input,
.wc-block-components-address-form input,
.wc-block-components-address-form select {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  background-color: var(--wp--preset--color--base);
}

.wc-block-components-text-input input:focus,
.wc-block-components-address-form input:focus {
  border-color: var(--wp--preset--color--accent);
  outline: none;
}

.wc-block-components-panel__button {
  color: var(--wp--preset--color--accent);
  font-weight: 600;
}

.wc-block-cart-items__header,
.wc-block-cart-items__row {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.wc-block-components-product-name {
  font-family: var(--wp--preset--font-family--heading);
  color: var(--wp--preset--color--contrast);
}

.wc-block-components-quantity-selector {
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 4px;
  overflow: hidden;
}

.wc-block-components-quantity-selector__button {
  background: transparent;
  border: none;
  color: var(--wp--preset--color--contrast);
}

.wc-block-components-quantity-selector__input {
  border: none;
  background: transparent;
  text-align: center;
}

.wc-block-cart-item__remove-link {
  color: var(--wp--preset--color--secondary);
}

.wc-block-cart-item__remove-link:hover {
  color: var(--wp--preset--color--accent);
}

.wc-block-components-notice-banner {
  border-radius: 4px;
  border: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--30);
  background-color: var(--wp--preset--color--base);
}

.wc-block-components-notice-banner.is-error {
  border-color: var(--wp--preset--color--accent);
}

/* =========================================
   WooCommerce -- My Account
   Classic WooCommerce component classes (stable across
   versions); same exception as above.
   ========================================= */

.woocommerce-MyAccount-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  overflow: hidden;
}

.woocommerce-MyAccount-navigation-link {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.woocommerce-MyAccount-navigation-link:last-child {
  border-bottom: none;
}

.woocommerce-MyAccount-navigation-link a {
  display: block;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.woocommerce-MyAccount-navigation-link.is-active a {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  font-weight: 600;
}

.woocommerce-MyAccount-content {
  margin-top: var(--wp--preset--spacing--50);
}

.woocommerce-Addresses {
  display: flex;
  gap: var(--wp--preset--spacing--40);
  flex-wrap: wrap;
}

.woocommerce-Address {
  flex: 1 1 280px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
  padding: var(--wp--preset--spacing--40);
}

.woocommerce-Address-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--wp--preset--spacing--20);
}

.woocommerce-Address-title h3 {
  margin: 0;
}

table.woocommerce-orders-table,
table.shop_table {
  width: 100%;
  border-collapse: collapse;
}

table.woocommerce-orders-table th,
table.shop_table th {
  text-align: left;
  font-family: var(--wp--preset--font-family--heading);
  border-bottom: 2px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

table.woocommerce-orders-table td,
table.shop_table td {
  border-bottom: 1px solid var(--wp--preset--color--border);
  padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.woocommerce-orders-table__cell-order-status mark.order-status {
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border-radius: 3px;
  padding: 2px var(--wp--preset--spacing--20);
  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
}

.woocommerce-Button,
a.woocommerce-Button,
.woocommerce-button {
  display: inline-block;
  background-color: var(--wp--preset--color--accent);
  color: var(--wp--preset--color--base);
  border: none;
  border-radius: 3px;
  padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50);
  text-decoration: none;
  font-weight: 500;
}

.woocommerce-Button:hover,
a.woocommerce-Button:hover,
.woocommerce-button:hover {
  background-color: var(--wp--preset--color--contrast);
  color: var(--wp--preset--color--base);
}

@media (max-width: 600px) {
  table.woocommerce-orders-table,
  table.shop_table {
    font-size: var(--wp--preset--font-size--small);
  }
}
