/* Card Styles - Exact PF2E Card Specifications */

/* Import Pathfinder 2e Actions Font */
@font-face {
    font-family: 'Pathfinder2eActions';
    src: url('../fonts/Pathfinder2eActions.ttf') format('truetype');
    font-display: swap;
}

/* Import FF Good Pro Font */
@font-face {
    font-family: 'FFGoodPro';
    src: url('../fonts/ff-good-pro.ttf') format('truetype');
    font-display: swap;
}

/* Import Gin Test Font */
@font-face {
    font-family: 'GinTest';
    src: url('../fonts/GinTest-Regular.otf') format('opentype');
    font-display: swap;
}

/* Import FF Good Pro Condensed Bold Font */
@font-face {
    font-family: 'FFGoodProCondBold';
    src: url('../fonts/FFGoodProCond-Bold.ttf') format('truetype');
    font-display: swap;
}

/* Debug: Add class to test font loading */
.font-test {
    font-family: 'Pathfinder2eActions', Arial, sans-serif;
    font-size: 24px;
    color: white;
}

.card {
    width: 750px;
    height: 1050px;
    background-color: #0e2c5e;
    position: relative;
    border: 1px solid #ccc;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Card Overlay */
.card::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../images/overlay.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 100; /* Above everything */
}

/* Feat Name Box */
.feat-name-box {
    position: absolute;
    top: 40px;
    left: 75px;
    width: 450px;
    height: 75px;
    border: 5px solid black;
    background-color: #0e2c5e;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 35pt;
    font-weight: normal;
    text-align: center;
    padding: 0;
    text-transform: uppercase;
    font-family: 'GinTest', Arial, sans-serif;
    z-index: 30; /* Above overlay */
    line-height: 1;
}

/* Type/Level Box */
.type-level-box {
    position: absolute;
    top: 110px; /* Feat name box is 40px + 75px height = 115px, so 115px - 5px border = 110px to overlap borders */
    left: 75px;
    width: 225px; /* Half of feat name box width */
    height: 37px; /* Half of feat name box height */
    border: 5px solid black;
    background-color: #0e2c5e;
    display: none; /* Initially hidden */
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 17.5pt; /* Half of feat name font size */
    font-weight: normal;
    text-align: center;
    padding: 0;
    text-transform: uppercase;
    font-family: 'FFGoodProCondBold', Arial, sans-serif;
    z-index: 45; /* Above image box and other elements */
    line-height: 1;
}

.type-level-box span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(2px);
}

.feat-name-box span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(-3px);
}

/* Feat Name Font Size Classes */
.feat-name-box .font-size-35 { font-size: 35pt; }
.feat-name-box .font-size-32 { font-size: 32pt; }
.feat-name-box .font-size-30 { font-size: 30pt; }
.feat-name-box .font-size-28 { font-size: 28pt; }
.feat-name-box .font-size-25 { font-size: 25pt; }
.feat-name-box .font-size-22 { font-size: 22pt; }
.feat-name-box .font-size-20 { font-size: 20pt; }
.feat-name-box .font-size-18 { font-size: 18pt; }
.feat-name-box .font-size-16 { font-size: 16pt; }
.feat-name-box .font-size-14 { font-size: 14pt; }
.feat-name-box .font-size-12 { font-size: 12pt; }

/* Image Box */
.image-box {
    position: absolute;
    top: 75px;
    left: 75px;
    width: 600px;
    height: 500px;
    border: 5px solid black;
    background-color: #f0f0f0;
    overflow: hidden;
    z-index: 25; /* Below text but above overlay */
}

.image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1;
    display: block;
    opacity: 1 !important;
    visibility: visible !important;
}

.image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 18px;
    background-color: #e0e0e0;
}

/* Action Cost Box */
.action-cost-box {
    position: absolute;
    left: 580px;
    top: 40px; /* Aligns with feat name as per specification */
    width: 120px;
    height: 120px;
    background-color: #522e2c;
    border: 5px solid black;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 35; /* Above image and text */
}

.action-cost-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-icon {
    max-width: 100px;
    max-height: 100px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Traits Area */
.traits-area {
    position: absolute;
    top: 535px; /* Position for full-size boxes (575px bottom - 50px height) */
    left: 75px;
    width: 600px;
    height: 50px; /* Fixed height */
    display: flex;
    justify-content: center;
    align-items: flex-end; /* Align to bottom - keeps bottom edge at 575px */
    flex-wrap: wrap;
    z-index: 35; /* Above image and text */
}

.trait {
    width: 170px;
    min-width: 80px; /* Allow shrinking to fit more traits */
    max-width: 280px;
    height: 50px;
    background-color: #522e2c;
    border: 3px solid #e3d5b0;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 20pt; /* Reduced from 25pt to 20pt */
    font-weight: normal;
    padding: 0;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
    font-family: 'FFGoodProCondBold', Arial, sans-serif;
    line-height: 1;
}

.trait span {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: translateY(1px);
}

/* Rarity Trait Colors */
.trait.rare {
    background-color: #131375 !important;
    border-color: #e3d5b0 !important;
}

.trait.uncommon {
    background-color: #c45500 !important;
    border-color: #e3d5b0 !important;
}

.trait.unique {
    background-color: #800080 !important;
    border-color: #e3d5b0 !important;
}


/* Auto-sized trait for dynamic width */
.trait.auto-size {
    width: 170px; /* Will be overridden by JavaScript */
}

/* Multi-row traits layout */
.traits-area.multi-row {
    height: 50px; /* Same as single row - trait boxes will resize to fit */
    flex-direction: column;
    justify-content: flex-start; /* Stack from top with no gap */
    align-items: flex-start; /* Align rows to top to prevent gap */
    gap: 0; /* No gap between rows */
    /* No top property - inherit from single row (525px) */
}

/* Trait boxes in multi-row layout are half height to fit 2 rows */
.traits-area.multi-row .trait {
    height: 25px; /* Half height to fit 2 rows in 50px container */
    font-size: 12pt; /* Smaller font for smaller boxes */
}

/* Adjust rows for multi-row traits */
.traits-area.multi-row .traits-row {
    height: auto; /* Let JavaScript control the height */
    min-height: 0; /* Allow shrinking */
}

.traits-row {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 50px;
    padding-left: 40px;
    padding-right: 40px;
    box-sizing: border-box;
}


/* Description Box */
.description-box {
    position: absolute;
    top: 590px;
    left: 75px;
    width: 600px;
    height: 430px;
    background-color: #e1d2aa;
    border: 5px solid black;
    padding: 5px;
    overflow: hidden;
    z-index: 30; /* Above overlay */
}

/* Inline action icons */
.action-icon-inline {
    height: 1.2em;
    width: auto;
    vertical-align: middle;
    margin: 0 2px;
    display: inline-block;
    transform: scale(0.9);
    transform-origin: center;
}

/* Inline action icons that should match text color */
.action-icon-text {
    /* Color will be applied dynamically via JavaScript */
}

.description-box > div {
    margin: 0;
    font-size: 19pt;
    line-height: 1.4;
    color: black;
    text-align: left;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box p {
    margin: 0 0 10px 0;
    font-size: inherit;
    line-height: 1.4;
    color: inherit;
    text-align: left;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

/* Empty paragraphs should still take up space */
.description-box p:empty {
    min-height: 1.4em;
    margin-bottom: 10px;
}

/* Markdown styles */
.description-box strong {
    font-weight: bold;
    color: black;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box em {
    font-style: italic;
    color: black;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box code {
    font-family: 'FFGoodPro', monospace;
    background-color: rgba(0, 0, 0, 0.1);
    padding: 1px 3px;
    border-radius: 3px;
    font-size: 0.9em;
    color: #333;
}

.description-box ul, .description-box ol {
    margin: 5px 0;
    padding-left: 20px;
    color: black;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

/* Better list styling for PF2E cards */
.description-box ul {
    list-style-type: disc;
}

.description-box ol {
    list-style-type: decimal;
}

.description-box ul li::marker {
    color: #522e2c;
    font-size: 0.9em;
}

.description-box ol li::marker {
    color: #522e2c;
    font-weight: bold;
}

.description-box li {
    margin: 2px 0;
    color: black;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box a {
    color: #0a4d8a;
    text-decoration: underline;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box h1, .description-box h2, .description-box h3,
.description-box h4, .description-box h5, .description-box h6 {
    margin: 8px 0 4px 0;
    font-weight: bold;
    color: black;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box h1 { font-size: 1.3em; }
.description-box h2 { font-size: 1.2em; }
.description-box h3 { font-size: 1.1em; }
.description-box h4 { font-size: 1.05em; }
.description-box h5 { font-size: 1.0em; }
.description-box h6 { font-size: 0.95em; }

.description-box blockquote {
    margin: 5px 0;
    padding-left: 10px;
    border-left: 3px solid #ccc;
    color: #666;
    font-style: italic;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box hr {
    border: none;
    border-top: 2px solid black;
    margin: 8px 0;
}

.description-box table {
    border-collapse: collapse;
    width: 100%;
    margin: 5px 0;
}

.description-box th, .description-box td {
    border: 1px solid #ccc;
    padding: 3px 5px;
    text-align: left;
}

.description-box th {
    background-color: rgba(0, 0, 0, 0.1);
    font-weight: bold;
}

/* Font size adjustments for description */
.description-box.font-size-12 > div,
.description-box.font-size-12 p,
.description-box.font-size-12 ul,
.description-box.font-size-12 ol,
.description-box.font-size-12 li,
.description-box.font-size-12 h1,
.description-box.font-size-12 h2,
.description-box.font-size-12 h3,
.description-box.font-size-12 h4,
.description-box.font-size-12 h5,
.description-box.font-size-12 h6,
.description-box.font-size-12 blockquote,
.description-box.font-size-12 code,
.description-box.font-size-12 th,
.description-box.font-size-12 td {
    font-size: 12pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-10 > div,
.description-box.font-size-10 p,
.description-box.font-size-10 ul,
.description-box.font-size-10 ol,
.description-box.font-size-10 li,
.description-box.font-size-10 h1,
.description-box.font-size-10 h2,
.description-box.font-size-10 h3,
.description-box.font-size-10 h4,
.description-box.font-size-10 h5,
.description-box.font-size-10 h6,
.description-box.font-size-10 blockquote,
.description-box.font-size-10 code,
.description-box.font-size-10 th,
.description-box.font-size-10 td {
    font-size: 10pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-9 > div,
.description-box.font-size-9 p,
.description-box.font-size-9 ul,
.description-box.font-size-9 ol,
.description-box.font-size-9 li,
.description-box.font-size-9 h1,
.description-box.font-size-9 h2,
.description-box.font-size-9 h3,
.description-box.font-size-9 h4,
.description-box.font-size-9 h5,
.description-box.font-size-9 h6,
.description-box.font-size-9 blockquote,
.description-box.font-size-9 code,
.description-box.font-size-9 th,
.description-box.font-size-9 td {
    font-size: 9pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-8 > div,
.description-box.font-size-8 p,
.description-box.font-size-8 ul,
.description-box.font-size-8 ol,
.description-box.font-size-8 li,
.description-box.font-size-8 h1,
.description-box.font-size-8 h2,
.description-box.font-size-8 h3,
.description-box.font-size-8 h4,
.description-box.font-size-8 h5,
.description-box.font-size-8 h6,
.description-box.font-size-8 blockquote,
.description-box.font-size-8 code,
.description-box.font-size-8 th,
.description-box.font-size-8 td {
    font-size: 8pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-7 > div,
.description-box.font-size-7 p,
.description-box.font-size-7 ul,
.description-box.font-size-7 ol,
.description-box.font-size-7 li,
.description-box.font-size-7 h1,
.description-box.font-size-7 h2,
.description-box.font-size-7 h3,
.description-box.font-size-7 h4,
.description-box.font-size-7 h5,
.description-box.font-size-7 h6,
.description-box.font-size-7 blockquote,
.description-box.font-size-7 code,
.description-box.font-size-7 th,
.description-box.font-size-7 td {
    font-size: 7pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-12 > div,
.description-box.font-size-12 p,
.description-box.font-size-12 ul,
.description-box.font-size-12 ol,
.description-box.font-size-12 li,
.description-box.font-size-12 h1,
.description-box.font-size-12 h2,
.description-box.font-size-12 h3,
.description-box.font-size-12 h4,
.description-box.font-size-12 h5,
.description-box.font-size-12 h6,
.description-box.font-size-12 blockquote,
.description-box.font-size-12 code,
.description-box.font-size-12 th,
.description-box.font-size-12 td {
    font-size: 12pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-13 > div,
.description-box.font-size-13 p,
.description-box.font-size-13 ul,
.description-box.font-size-13 ol,
.description-box.font-size-13 li,
.description-box.font-size-13 h1,
.description-box.font-size-13 h2,
.description-box.font-size-13 h3,
.description-box.font-size-13 h4,
.description-box.font-size-13 h5,
.description-box.font-size-13 h6,
.description-box.font-size-13 blockquote,
.description-box.font-size-13 code,
.description-box.font-size-13 th,
.description-box.font-size-13 td {
    font-size: 13pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-14 > div,
.description-box.font-size-14 p,
.description-box.font-size-14 ul,
.description-box.font-size-14 ol,
.description-box.font-size-14 li,
.description-box.font-size-14 h1,
.description-box.font-size-14 h2,
.description-box.font-size-14 h3,
.description-box.font-size-14 h4,
.description-box.font-size-14 h5,
.description-box.font-size-14 h6,
.description-box.font-size-14 blockquote,
.description-box.font-size-14 code,
.description-box.font-size-14 th,
.description-box.font-size-14 td {
    font-size: 14pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-15 > div,
.description-box.font-size-15 p,
.description-box.font-size-15 ul,
.description-box.font-size-15 ol,
.description-box.font-size-15 li,
.description-box.font-size-15 h1,
.description-box.font-size-15 h2,
.description-box.font-size-15 h3,
.description-box.font-size-15 h4,
.description-box.font-size-15 h5,
.description-box.font-size-15 h6,
.description-box.font-size-15 blockquote,
.description-box.font-size-15 code,
.description-box.font-size-15 th,
.description-box.font-size-15 td {
    font-size: 15pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-17 > div,
.description-box.font-size-17 p,
.description-box.font-size-17 ul,
.description-box.font-size-17 ol,
.description-box.font-size-17 li,
.description-box.font-size-17 h1,
.description-box.font-size-17 h2,
.description-box.font-size-17 h3,
.description-box.font-size-17 h4,
.description-box.font-size-17 h5,
.description-box.font-size-17 h6,
.description-box.font-size-17 blockquote,
.description-box.font-size-17 code,
.description-box.font-size-17 th,
.description-box.font-size-17 td {
    font-size: 17pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-16 > div,
.description-box.font-size-16 p,
.description-box.font-size-16 ul,
.description-box.font-size-16 ol,
.description-box.font-size-16 li,
.description-box.font-size-16 h1,
.description-box.font-size-16 h2,
.description-box.font-size-16 h3,
.description-box.font-size-16 h4,
.description-box.font-size-16 h5,
.description-box.font-size-16 h6,
.description-box.font-size-16 blockquote,
.description-box.font-size-16 code,
.description-box.font-size-16 th,
.description-box.font-size-16 td {
    font-size: 16pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}

.description-box.font-size-18 > div,
.description-box.font-size-18 p,
.description-box.font-size-18 ul,
.description-box.font-size-18 ol,
.description-box.font-size-18 li,
.description-box.font-size-18 h1,
.description-box.font-size-18 h2,
.description-box.font-size-18 h3,
.description-box.font-size-18 h4,
.description-box.font-size-18 h5,
.description-box.font-size-18 h6,
.description-box.font-size-18 blockquote,
.description-box.font-size-18 code,
.description-box.font-size-18 th,
.description-box.font-size-18 td {
    font-size: 18pt;
    font-family: 'FFGoodPro', Arial, sans-serif;
}


/* Print styles */
@media print {
    .card {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* Card preview adjustments for smaller screens */
@media (max-width: 800px) {
    .preview-container {
        overflow-x: auto;
        padding: 10px;
    }
}

@media (max-width: 600px) {
    .preview-container {
        overflow-x: auto;
        padding: 5px;
    }
}