/**
 * File: product-document.css
 * Purpose: Styles the layout and icons for product document links such as AI and Data sheets.
 * Usage: Applied where `.pd-doc-list` is rendered via ACF shortcodes, typically on WooCommerce product pages.
 * Dependencies: ACF (for rendering shortcode fields), PHP logic from `generate-pdf.php` (for dynamic PDF handling), Divi (theme structure).
 */


/* -------------------------- */
/* ---- Scoped Variables ---- */
/* -------------------------- */

.pd-doc-list {
  --product-document-ai-image: url('/wp-content/uploads/2025/04/AssemblyInstructions-Icon-sm.webp'); /* assembly instructions document icon */
  --product-document-data-image: url('/wp-content/uploads/2025/04/Datasheet-Icon-sm.webp'); /* data sheet document icon */  
}

/* -------------------------- */



.pd-doc-list{
  display: flex;
  flex-direction: row;
  list-style: none!important;
  padding: 0 0 23px 0em!important;
}

.pd-doc-list li{
  margin-right:1em;
}

.pd-doc-ai, 
.pd-doc-data {
  background-size: cover;
  width: 50px;
  height: 50px; 
}

.pd-doc-ai {
  background-image: var(--product-document-ai-image);
}

.pd-doc-data {
  background-image: var(--product-document-data-image);
}

.pd-doc-list li.pd-doc-ai a,
.pd-doc-list li.pd-doc-data a
{
    display: block; /* Make the link fill the entire  */
    width: 100%;
    height: 100%;
}