/* ============================================
   OnlySkunk - Print Stylesheet
   Design System - Phase 2
   ============================================ */

@media print {
  /* ============================================
     PRINT RESET
     ============================================ */
  *,
  *::before,
  *::after {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ============================================
     PAGE SETUP
     ============================================ */
  @page {
    margin: 1.5cm;
    size: auto;
  }

  @page :first {
    margin-top: 2cm;
  }

  html {
    font-size: 12pt;
  }

  body {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 12pt;
    line-height: 1.5;
    background: white !important;
    color: black !important;
    margin: 0;
    padding: 0;
  }

  /* ============================================
     HIDE NON-ESSENTIAL ELEMENTS
     ============================================ */
  /* Header & Navigation (BEM classes) */
  .header,
  .nav,
  .nav__toggle,
  .nav__menu,
  .nav__actions,
  .nav__overlay,
  .nav__brand,
  header[role="banner"],
  nav {
    display: none !important;
  }

  /* Footer (BEM classes) */
  .footer,
  .footer__grid,
  .footer__brand,
  .footer__column,
  .footer__bottom,
  footer[role="contentinfo"] {
    display: none !important;
  }

  /* Buttons (all variants) */
  .btn,
  .btn--primary,
  .btn--secondary,
  .btn--outline,
  .btn--outline-light,
  .btn--gold,
  .btn--link,
  .btn--ghost,
  .btn--lg,
  .btn--sm,
  .btn--block,
  .btn-primary,
  .btn-secondary,
  .btn-outline,
  button:not([type="submit"]),
  input[type="submit"],
  input[type="button"] {
    display: none !important;
  }

  /* Modals & Overlays (BEM classes) */
  .modal,
  .modal--fullscreen,
  .modal__overlay,
  .modal__content,
  .modal__close,
  .age-gate,
  .age-gate__logo,
  .age-gate__actions,
  #age-gate-modal {
    display: none !important;
  }

  /* Cookie banner (BEM classes) */
  .cookie-banner,
  .cookie-banner__content,
  .cookie-banner__actions,
  .cookie-consent,
  #cookie-banner {
    display: none !important;
  }

  /* Toast notifications */
  .toast-container,
  .toast,
  .toast--success,
  .toast--error,
  .toast--warning,
  .toast--info {
    display: none !important;
  }

  /* Cart drawer */
  .cart-drawer,
  .cart-drawer__header,
  .cart-drawer__items,
  .cart-drawer__footer {
    display: none !important;
  }

  /* Skip link */
  .skip-link {
    display: none !important;
  }

  /* Filters sidebar */
  .filters,
  .filters__header,
  .filters__toggle,
  .filter-group,
  .products-toolbar {
    display: none !important;
  }

  /* Loading & Empty states */
  .loading,
  .loading__spinner,
  .empty-state {
    display: none !important;
  }

  /* Pagination */
  .pagination,
  .pagination__btn,
  .pagination__info {
    display: none !important;
  }

  /* Quantity controls */
  .quantity-selector,
  .quantity-selector button {
    display: none !important;
  }

  /* Badges & decorative elements */
  .badge,
  .badge--primary,
  .badge--secondary,
  .product-card__badge,
  .hero__badges {
    display: none !important;
  }

  /* Hero section */
  .hero,
  .hero__content,
  .hero__title,
  .hero__subtitle,
  .hero__cta {
    display: none !important;
  }

  /* Cart item actions */
  .cart-item__actions,
  .cart-item__remove,
  .cart-item-remove {
    display: none !important;
  }

  /* Cart notices */
  .cart-notice,
  .cart-notice--savings,
  .cart-notice--warning {
    display: none !important;
  }

  /* Promo banners */
  .promo-banner {
    display: none !important;
  }

  /* ============================================
     TYPOGRAPHY
     ============================================ */
  h1, h2, h3, h4, h5, h6 {
    font-family: Georgia, 'Times New Roman', serif;
    color: black !important;
    page-break-after: avoid;
    break-after: avoid;
    orphans: 3;
    widows: 3;
  }

  h1 { font-size: 24pt; margin-block-end: 12pt; }
  h2 { font-size: 18pt; margin-block-end: 10pt; }
  h3 { font-size: 14pt; margin-block-end: 8pt; }
  h4 { font-size: 12pt; margin-block-end: 6pt; }
  h5 { font-size: 11pt; margin-block-end: 6pt; }
  h6 { font-size: 10pt; margin-block-end: 6pt; }

  p, li, td, th {
    orphans: 3;
    widows: 3;
  }

  p {
    margin-block-end: 10pt;
  }

  /* ============================================
     LINKS
     ============================================ */
  a,
  a:visited {
    color: black !important;
    text-decoration: underline;
  }

  a[href^="http"]::after,
  a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666 !important;
  }

  /* Don't show URL for internal/navigation links */
  a[href^="#"]::after,
  a[href^="/"]::after,
  a[href^="javascript:"]::after,
  a[href^="tel:"]::after,
  .footer__links a::after,
  .breadcrumb a::after,
  .nav__link::after,
  .nav__dropdown-link::after {
    content: none;
  }

  /* ============================================
     IMAGES
     ============================================ */
  img {
    max-width: 100% !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* Hide decorative images */
  .hero img,
  .nav__logo,
  .footer__logo,
  .category-card__image,
  .promo-banner img,
  svg:not(.cart-item svg) {
    display: none !important;
  }

  /* Show product and cart images */
  .product-card__image img,
  .product-card img,
  .cart-item__image img,
  .cart-item-image img,
  .product-image img {
    display: block !important;
    max-width: 100pt !important;
    max-height: 100pt !important;
  }

  /* ============================================
     CONTAINERS
     ============================================ */
  .container,
  .container--sm,
  .container--md,
  .container--lg {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  main,
  [role="main"],
  .main-content {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* ============================================
     SECTIONS
     ============================================ */
  .section,
  .section--alt,
  .section--products,
  .section--cart {
    padding: 20pt 0 !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-header {
    padding: 10pt 0 !important;
    border-block-end: 1px solid #ccc !important;
  }

  .page-header__title {
    margin-block-end: 5pt;
  }

  .page-header__desc {
    color: #666 !important;
  }

  /* ============================================
     BREADCRUMB
     ============================================ */
  .breadcrumb {
    font-size: 9pt;
    margin-block-end: 10pt;
  }

  .breadcrumb__list {
    display: flex;
    gap: 5pt;
  }

  .breadcrumb__item::after {
    color: #999 !important;
  }

  /* ============================================
     PRODUCT CARDS
     ============================================ */
  .products-layout {
    display: block !important;
  }

  .products-content {
    width: 100% !important;
  }

  .products-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 15pt !important;
  }

  .product-card {
    border: 1px solid #ccc !important;
    padding: 10pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .product-card__image {
    max-height: 80pt !important;
    overflow: hidden;
    margin-block-end: 8pt;
  }

  .product-card__body {
    padding: 0 !important;
  }

  .product-card__category {
    font-size: 8pt;
    color: #666 !important;
  }

  .product-card__name {
    font-size: 11pt;
    font-weight: bold;
    margin-block-end: 5pt;
  }

  .product-card__price {
    font-size: 12pt;
    font-weight: bold;
  }

  .product-card__footer {
    display: none !important;
  }

  /* Legacy product styles */
  .product-image {
    max-height: 80pt;
  }

  .product-name {
    font-weight: bold;
  }

  .product-price {
    font-weight: bold;
  }

  /* ============================================
     CART & CHECKOUT
     ============================================ */
  .cart-layout {
    display: block !important;
  }

  .cart-items,
  .cart-items__list {
    border: 1px solid #ccc !important;
  }

  .cart-item {
    display: flex !important;
    gap: 10pt;
    padding: 10pt !important;
    border-block-end: 1px solid #ccc !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .cart-item__image,
  .cart-item-image {
    width: 50pt !important;
    height: 50pt !important;
    flex-shrink: 0;
  }

  .cart-item__details,
  .cart-item-details {
    flex: 1;
  }

  .cart-item__name,
  .cart-item-name {
    font-weight: bold;
    margin-block-end: 3pt;
  }

  .cart-item__meta {
    font-size: 9pt;
    color: #666 !important;
  }

  .cart-item__price,
  .cart-item-price {
    font-weight: bold;
  }

  /* Cart Summary */
  .cart-summary {
    margin-block-start: 20pt !important;
    padding: 15pt !important;
    border: 2px solid #000 !important;
    position: static !important;
    box-shadow: none !important;
  }

  .cart-summary__title {
    font-size: 14pt;
    font-weight: bold;
    margin-block-end: 10pt;
    padding-block-end: 8pt;
    border-block-end: 1px solid #ccc !important;
  }

  .cart-summary__rows {
    margin-block-end: 10pt;
  }

  .cart-summary__row {
    display: flex;
    justify-content: space-between;
    padding: 5pt 0;
    border-block-end: 1px dotted #ccc;
  }

  .cart-summary__row--total {
    font-size: 14pt;
    font-weight: bold;
    border-block-start: 2px solid #000 !important;
    border-block-end: none;
    margin-block-start: 10pt;
    padding-block-start: 10pt;
  }

  .cart-summary__note {
    display: none !important;
  }

  /* Order summary (legacy) */
  .order-summary {
    border: 2px solid #000 !important;
    padding: 15pt !important;
    margin-block: 15pt;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .order-summary h3 {
    margin-block-end: 10pt;
    padding-block-end: 8pt;
    border-block-end: 1px solid #ccc;
  }

  .order-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 5pt 0;
    border-block-end: 1px dotted #ccc;
  }

  .order-summary-total {
    font-size: 14pt;
    font-weight: bold;
    border-block-start: 2px solid #000;
    border-block-end: none;
    margin-block-start: 10pt;
    padding-block-start: 10pt;
  }

  /* ============================================
     ORDER CONFIRMATION
     ============================================ */
  .order-confirmation {
    border: 2px solid #000 !important;
    padding: 20pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .order-number {
    font-size: 14pt;
    font-weight: bold;
  }

  .order-details {
    margin-block: 15pt;
  }

  .order-item {
    display: flex;
    justify-content: space-between;
    padding: 5pt 0;
    border-block-end: 1px dotted #ccc;
  }

  /* ============================================
     TABLES
     ============================================ */
  table {
    border-collapse: collapse;
    width: 100%;
  }

  th, td {
    border: 1px solid #ccc;
    padding: 8pt;
    text-align: left;
  }

  th {
    background-color: #f5f5f5 !important;
    font-weight: bold;
  }

  thead {
    display: table-header-group;
  }

  tr {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  /* ============================================
     FORMS (hide in print)
     ============================================ */
  form,
  .form-group,
  input:not([type="hidden"]),
  select,
  textarea,
  .checkbox,
  .select {
    display: none !important;
  }

  /* ============================================
     FAQ ACCORDION
     ============================================ */
  .faq-list {
    max-width: 100% !important;
  }

  .faq-item {
    page-break-inside: avoid;
    break-inside: avoid;
    border: 1px solid #ccc !important;
    margin-block-end: 10pt;
  }

  .faq-item__question {
    font-weight: bold;
    padding: 10pt !important;
    background: #f5f5f5 !important;
  }

  .faq-item__question::after {
    display: none !important;
  }

  .faq-item__answer {
    padding: 10pt !important;
    display: block !important;
  }

  /* Force all details to be open */
  details,
  .faq-item[open] {
    display: block !important;
  }

  details > summary::marker,
  details > summary::-webkit-details-marker {
    display: none !important;
  }

  details > *:not(summary) {
    display: block !important;
  }

  /* ============================================
     CATEGORY & AREA CARDS
     ============================================ */
  .category-grid,
  .areas-grid,
  .county-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10pt !important;
  }

  .category-card,
  .area-card,
  .county-card {
    border: 1px solid #ccc !important;
    padding: 10pt !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .category-card__title,
  .area-card__title {
    font-weight: bold;
    margin-block-end: 5pt;
  }

  .category-card__desc,
  .area-card__cities {
    font-size: 9pt;
    color: #666 !important;
  }

  /* ============================================
     STEPS / HOW IT WORKS
     ============================================ */
  .steps-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10pt !important;
  }

  .step {
    border: 1px solid #ccc !important;
    padding: 10pt !important;
    text-align: center;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .step__number {
    width: 30pt !important;
    height: 30pt !important;
    border: 2px solid #000 !important;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 8pt !important;
    font-weight: bold;
  }

  .step__title {
    font-weight: bold;
    margin-block-end: 5pt;
  }

  .step__desc {
    font-size: 9pt;
    color: #666 !important;
  }

  /* ============================================
     UTILITY OVERRIDES
     ============================================ */
  .hidden,
  [hidden] {
    display: none !important;
  }

  .sr-only {
    position: static !important;
    width: auto !important;
    height: auto !important;
    clip: auto !important;
    overflow: visible !important;
    white-space: normal !important;
    margin: 0 !important;
  }

  /* Color utilities - reset to black */
  .text-primary,
  .text-primary-dark,
  .text-primary-light,
  .text-secondary,
  .text-muted,
  .text-success,
  .text-warning,
  .text-error {
    color: black !important;
  }

  /* Background utilities - reset to white */
  .bg-primary,
  .bg-primary-dark,
  .bg-primary-light,
  .bg-secondary,
  .bg-background,
  .bg-surface,
  .bg-success,
  .bg-warning,
  .bg-error {
    background: white !important;
  }

  /* ============================================
     PAGE BREAKS
     ============================================ */
  .card,
  .category-card,
  .area-card,
  .county-card,
  blockquote,
  pre,
  figure {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .page-break,
  .page-break-before {
    page-break-before: always;
    break-before: always;
  }

  .page-break-after {
    page-break-after: always;
    break-after: always;
  }

  .no-break {
    page-break-inside: avoid;
    break-inside: avoid;
  }

  h1, h2, h3, h4, h5, h6 {
    page-break-after: avoid;
    break-after: avoid;
  }

  /* ============================================
     PRINT-SPECIFIC CONTENT
     ============================================ */
  .print-only,
  .d-print-block {
    display: block !important;
  }

  .d-print-inline {
    display: inline !important;
  }

  .d-print-flex {
    display: flex !important;
  }

  .screen-only,
  .no-print,
  .d-print-none {
    display: none !important;
  }
}