/*
Professional Template Styles (Dompdf Compatible Layout) - Centered Header
These styles apply specifically when the "Professional" template is rendered,
based on the provided image layout, with a centered header.
Core UI styles are in css/style.css.
Dynamic settings (font, color, spacing) are applied via inherited/override styles
and the --rb-theme-color variable.
*/

/* Overall template wrapper (added by app.js) */
/* Padding is handled by the body style generated in PHP */
.rb-template-professional {
    padding: 0; /* Padding handled by body in PDF */
    width: 100%; /* Ensure it uses available width */
    box-sizing: border-box;
    background-color: #fff; /* Explicitly white background for the page */
    /* Theme color variable is available from the body */
    /* Font styles are inherited from body via dynamic CSS */
}

/* Header (Name and Contact Info) */
/* Use rb-section for standard spacing */
.rb-template-professional .rb-header-section {
    text-align: center; /* Center the header content */
    /* Uses standard .rb-section bottom border/padding */
    margin-bottom: 20px; /* Space below header */
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc; /* Lighter bottom border */
}

.rb-template-professional .rb-header-section h1 { /* Name */
    margin: 0 0 8px 0; /* Space below name */
    font-size: 2.2em; /* Make name larger */
    font-weight: 700; /* Bold as in image */
    color: #000 !important; /* Force black color for name */
    /* Font family inherited from heading settings */
}

/* Contact Info Styles - Below name */
.rb-template-professional .rb-contact-info-header {
    margin: 0; /* No top margin needed */
    /* Use flexbox to lay out items inline with wrapping - Dompdf support for flexbox is improving */
    /* Align items to the center */
    display: flex; /* Use flexbox */
    justify-content: center; /* Center the flex items horizontally */
    flex-wrap: wrap;
    gap: 8px 15px; /* Space between rows and columns (slightly smaller gap) */

    /* If flexbox fails, fall back to inline-block with careful spacing */
    /* display: block; */
    /* text-align: center; */ /* Center inline/inline-block items */
    /* line-height: 1.5; */ /* Adjust line height */


    font-size: 0.9em; /* Slightly smaller font for contact details */
    color: #555 !important; /* Slightly grey color for contact */
    line-height: 1.3em; /* Adjust line height for flex */
     /* Font family inherited from text settings */
}
.rb-template-professional .rb-contact-info-header span {
    display: inline-block; /* Display items inline within flex or as inline-block fallback */
    margin: 0; /* Remove default block margins */
    /* Vertical alignment might need adjustment depending on icon font/image */
    vertical-align: middle;
}
/* Add a separator like the image */
.rb-template-professional .rb-contact-info-header span:not(:last-child)::after {
    content: " \00b7"; /* Middle dot separator */
    margin-left: 12px; /* Space after separator (slightly less for centering) */
    color: #888;
     /* Adjust vertical alignment if needed */
     vertical-align: middle;
}

/* Optional: Add styles for icons using ::before if you decide to use an icon font or images */
/* Example using Font Awesome (requires Font Awesome enqueued in plugin or theme) */
/*
.rb-template-professional .rb-contact-info-header span.rb-icon::before {
    font-family: 'Font Awesome 5 Free'; // Or Font Awesome 6, etc.
    font-weight: 900; // For solid icons
    margin-right: 5px;
    color: #555; // Match text color or use theme color
    font-size: 1.1em; // Adjust size
    vertical-align: middle;
    line-height: 1;
}
.rb-template-professional .rb-contact-info-header span.rb-icon-phone::before { content: '\f095'; }
.rb-template-professional .rb-contact-info-header span.rb-icon-email::before { content: '\f0e0'; }
.rb-template-professional .rb-contact-info-header span.rb-icon-linkedin::before { content: '\f08c'; }
.rb-template-professional .rb-contact-info-header span.rb-icon-website::before { content: '\f57c'; } // Or '\f0ac'
.rb-template-professional .rb-contact-info-header span.rb-icon-location::before { content: '\f3c5'; }
*/


/* Section Styles */
.rb-template-professional .rb-section {
    margin-bottom: 20px; /* Space between sections */
    padding-bottom: 15px; /* Space before divider */
    border-bottom: 1px solid #ccc; /* Section divider line */
    page-break-inside: avoid; /* Hint for print/PDF */
    /* No overflow hidden needed for simple block layout */
}
.rb-template-professional .rb-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}


/* Section Titles (H2) */
/* This style applies to H2 elements within the template class, used for section titles */
.rb-template-professional h2.rb-section-title { /* Target H2 with specific class */
    margin-top: 0;
    margin-bottom: 0.5em; /* Space below title */
    font-size: 1.2em; /* Size relative to base heading size */
    font-weight: 700; /* Bold as in image */
    text-transform: uppercase; /* Uppercase as in image */
    letter-spacing: 1px; /* Space out letters */
    color: inherit !important; /* Inherit color from heading settings */
    font-family: inherit !important; /* Inherit font from heading settings */
    border-bottom: none; /* Remove the border-bottom */
    display: block; /* Ensure it takes up its own line */
    padding-bottom: 0; /* Remove padding */
    text-align: left; /* Align section titles left */
}


/* List Item (Education, Experience, Reference, Custom) Entry Styles */
/* Use common styling for entries with date/location on the right */
.rb-template-professional .rb-education-entry,
.rb-template-professional .rb-job-entry,
.rb-template-professional .rb-reference-entry,
.rb-template-professional .rb-custom-entry { /* Include custom entries */
    margin-bottom: 15px; /* Space between entries in a list */
    page-break-inside: avoid; /* Hint for print/PDF */
     /* No overflow hidden needed for simple block layout */
}
.rb-template-professional .rb-education-entry:last-child,
.rb-template-professional .rb-job-entry:last-child,
.rb-template-professional .rb-reference-entry:last-child,
.rb-template-professional .rb-custom-entry:last-child { /* Include custom entries */
    margin-bottom: 0;
}

.rb-template-professional h4 { /* Used for Job Title, Degree, Reference Name, Custom Entry Title */
    margin: 0; /* Remove default margins */
    /* Use float left for the main title line */
    float: left;
    width: 65%; /* Adjust width as needed to leave space for date/location */
    box-sizing: border-box;
    font-size: 1em; /* Size relative to text size */
    font-weight: bold; /* Bold as in image */
    color: inherit !important; /* Inherit color from text settings */
     /* Font family inherited from text settings */
     line-height: 1.2em; /* Match date line height */
}

/* Style for the date/location span */
.rb-template-professional .rb-date-location {
    float: right; /* Position date/location to the right */
    width: 35%; /* Adjust width as needed */
    text-align: right; /* Align text to the right */
    font-style: italic; /* Italic as in image */
    font-size: 1em; /* Same size as text */
    color: #555 !important; /* Slightly greyed out */
    line-height: 1.2em; /* Match title line height */
    box-sizing: border-box;
     /* Font family inherited from text settings */
}


/* Paragraphs within entries (e.g., education details, summary paragraphs, reference details, custom details) */
.rb-template-professional p {
    margin-top: 0;
    margin-bottom: 0.8em; /* Space between paragraphs/items */
    /* Color inherited from text settings */
    /* Line height inherited from body/text settings */
     clear: both; /* Ensure paragraphs start below floats */
}
.rb-template-professional p:last-child {
    margin-bottom: 0;
}

/* Lists (e.g., experience bullet points, skills) */
.rb-template-professional ul {
    padding-left: 20px; /* Standard list padding */
    margin-top: 0.5em;
    margin-bottom: 0.5em;
     clear: both; /* Ensure lists start below floats */
}
.rb-template-professional ul:last-child {
     margin-bottom: 0;
}

.rb-template-professional li {
    margin-bottom: 0.5em; /* Space between list items */
     /* Color inherited from text settings */
     /* Line height inherited from body/text settings */
}
.rb-template-professional li:last-child {
     margin-bottom: 0;
}

/* Specific styling for the Skills section content */
.rb-template-professional .rb-skills-section p {
    margin-top: 0;
    margin-bottom: 0; /* Less space below the single paragraph */
    line-height: 1.5em; /* Adjust line height for clarity */
    /* Color inherited from text settings */
    /* Font size inherited from text settings */
}


/* Reference Contact Info - Stack vertically using display: block */
.rb-template-professional .rb-contact-info-small span {
    display: block; /* Stack items vertically */
    margin-bottom: 5px;
    font-size: 0.9em; /* Smaller font */
    color: inherit !important; /* Inherit color from parent (.rb-reference-entry p) */
     /* Font family inherited from text settings */
}
.rb-template-professional .rb-contact-info-small span:last-child {
    margin-bottom: 0;
}
/* Add icons to reference contact info if needed */
/*
.rb-template-professional .rb-contact-info-small span.rb-icon::before {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 5px;
    color: #555;
    font-size: 1em;
    vertical-align: middle;
    line-height: 1;
}
*/


/* Links */
.rb-template-professional a {
    /* Link color/text-decoration handled by dynamic CSS overrides */
    /* Add any specific link styles here if needed */
}


/* Footer - Not in image, but keeping structure for potential use */
.rb-template-professional .rb-footer-section {
     display: none; /* Hide the default footer */
}
/* Optional: If you want a custom footer, style .rb-footer-section and .rb-footer here */


/* Ensure images scale */
.rb-template-professional img {
    max-width: 100%;
    height: auto;
}

/* Clearfix utility - crucial for float layouts in Dompdf */
.rb-clearfix::after {
    content: "";
    display: table;
    clear: both;
}