/* A4 Print Stylesheet for Content Creator Resume */
@page {
    size: A4;
    margin: 1cm;
}

body {
    width: 21cm;
    height: 29.7cm;
    margin: 0;
    padding: 0;
    font-family: "Sarabun", sans-serif;
    font-size: 11pt;
    line-height: 1.3;
    background: white;
    color: #000;
}

/* Hide elements not needed for print */
footer {
    display: none;
}

/* Header styling for print */
header {
    background: none !important;
    color: #000 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin-bottom: 1cm;
}

header::before {
    display: none;
}

.profile-container {
    display: flex;
    align-items: center;
    gap: 1cm;
}

.profile-image {
    width: 4cm;
    height: 4cm;
    border: 1px solid #ccc;
}

.profile-info h1 {
    font-size: 18pt;
    margin-bottom: 0.2cm;
    color: #000 !important;
}

.profile-info h2 {
    font-size: 16pt;
    margin-bottom: 0.2cm;
    color: #000 !important;
}

.profile-info .title {
    font-size: 12pt;
    margin-bottom: 0.3cm;
    color: #333 !important;
}

.contact-info {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3cm;
}

.contact-item {
    display: flex;
    align-items: center;
    gap: 0.2cm;
    margin-right: 0.5cm;
    font-size: 10pt;
}

.contact-item i {
    color: #333 !important;
    background: none !important;
}

.contact-item a {
    color: #333 !important;
    text-decoration: none;
}

/* Section styling for print */
.section {
    margin-bottom: 0.8cm;
    page-break-inside: avoid;
    border: none !important;
    background: none !important;
    padding: 0 !important;
}

.section-title {
    font-size: 14pt;
    margin-bottom: 0.3cm;
    color: #000 !important;
    border-bottom: 1px solid #ccc;
    padding-bottom: 0.2cm;
}

.section-icon, .category-icon {
    color: #333 !important;
}

/* Experience items */
.experience-item {
    margin-bottom: 0.5cm;
    padding-bottom: 0.3cm;
    border-bottom: 1px dotted #eee;
}

.experience-item h3 {
    font-size: 12pt;
    margin-bottom: 0.1cm;
    color: #000 !important;
}

.experience-item .company {
    font-size: 11pt;
    margin-bottom: 0.2cm;
    color: #333 !important;
    font-style: italic;
}

.experience-item ul {
    margin: 0.2cm 0;
    padding-left: 0.5cm;
}

.experience-item li {
    margin-bottom: 0.1cm;
}

/* Skills section */
.skills-category {
    margin-bottom: 0.5cm;
}

.skills-category h3 {
    font-size: 12pt;
    margin-bottom: 0.2cm;
    color: #000 !important;
}

.skills-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.3cm;
}

.skill-item {
    background: none !important;
    padding: 0.1cm 0;
    border-radius: 0;
    font-size: 10pt;
    border-bottom: 1px dotted #eee;
}

.skill-icon {
    color: #333 !important;
}

/* Portfolio section */
.portfolio-items {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 0.5cm;
}

.portfolio-item {
    background: none !important;
    box-shadow: none !important;
    padding: 0;
    border-bottom: 1px dotted #eee;
    padding-bottom: 0.3cm;
}

.portfolio-item h3 {
    font-size: 12pt;
    margin-bottom: 0.1cm;
    color: #000 !important;
}

.portfolio-item p {
    font-size: 10pt;
}

/* Education section */
.education-item h3 {
    font-size: 12pt;
    margin-bottom: 0.1cm;
    color: #000 !important;
}

.education-item .institution {
    font-size: 11pt;
    margin-bottom: 0.1cm;
    color: #333 !important;
    font-style: italic;
}

/* Languages section */
.languages-container {
    display: flex;
    gap: 1cm;
}

.language-item {
    background: none !important;
    padding: 0;
    font-size: 10pt;
}

.language-icon {
    color: #333 !important;
}

/* Achievements section */
.achievement-item {
    margin-bottom: 0.4cm;
}

.achievement-item h3 {
    font-size: 12pt;
    margin-bottom: 0.1cm;
    color: #000 !important;
}

.achievement-item ul {
    margin: 0.1cm 0;
    padding-left: 0.5cm;
}

/* Remove animations and hover effects for print */
.section-title:hover .section-icon,
h3:hover .category-icon,
.skill-item:hover .skill-icon,
.language-item:hover .language-icon,
.contact-item:hover i,
.portfolio-item:hover {
    transform: none !important;
    transition: none !important;
    box-shadow: none !important;
}

.skill-item:hover {
    transform: none !important;
    box-shadow: none !important;
}