/*--------------------------------------------------------------
# Cooking Card General Styles
--------------------------------------------------------------*/
:root {
    --cc-primary-color: #55a630; /* A fresh, vibrant green */
    --cc-primary-darker: #448426;
    --cc-text-color: #3d4f58;
    --cc-heading-color: #2a373f;
    --cc-light-text-color: #7a8c96;
    --cc-border-color: #e8e8e8;
    --cc-background-color: #ffffff;
    --cc-light-background: #f9fbf8;
    --cc-star-color: #f7b731;
}

.cc-recipe-card {
    background: var(--cc-background-color);
    border: 1px solid var(--cc-border-color);
    border-radius: 12px;
    margin-top: 150px;
    margin-bottom: 30px;
    padding: 0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    color: var(--cc-text-color);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    
    /* Ensure container fits on mobile */
    max-width: 100%;
    /* overflow: hidden removed to let image pop out */
}

/* Common block styling */
.cc-block {
    padding: 20px 30px;
}

/* FIX for Mobile Overflow: 
   Force all headings inside the card to break words if they are too long.
*/
.cc-block h1, .cc-block h2, .cc-block h3, .cc-block h4, .cc-block h5, .cc-block h6 {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    max-width: 100%;
}

/*--------------------------------------------------------------
# Block 1: Header (Image, Title, Meta)
--------------------------------------------------------------*/
.cc-block.block1 {
    position: relative;
    text-align: center;
    padding-top: 120px;
    padding-bottom: 0;
}

.cc-block1-image {
    position: absolute;
    top: -125px; /* Pulls the image up */
    left: 50%;
    transform: translateX(-50%);
    width: 250px;
    height: 250px;
    border: 6px solid #fff;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.cc-block1-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-block1-title {
    color: var(--cc-heading-color);
    margin: 0 0 10px;
    font-size: 1.5em;
    line-height: 1.2;
    font-weight: 700;
    /* Ensure no border on main title */
    border: none !important; 
    
    /* FORCE CENTER ALIGNMENT (Override inherited flex) */
    display: block !important;
    text-align: center !important;
    width: 100%;
}

/* FIXED: Explicitly remove the pseudo-element line for the main title */
.cc-block1-title::after {
    content: none !important;
    display: none !important;
}

.cc-block1-desc {
    font-size: 0.8em;
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto 20px auto;
    color: var(--cc-light-text-color);
}

/* Rating Stars */
.cc-block1-rating-stars-container {
    margin-bottom: 25px;
}
#cc-card-stars-container {
    font-size: 36px;
    color: #dcdcdc;
    cursor: pointer;
}
#cc-card-rating-text {
    font-size: 0.9em;
    color: var(--cc-light-text-color);
}
.cc-card-star {
    transition: transform 0.2s ease, color 0.2s ease;
    display: inline-block;
}
.cc-card-star:hover {
    transform: scale(1.2);
    color: var(--cc-star-color);
}
.cc-card-star.filled {
    color: var(--cc-star-color);
}

/* Time Meta */
.cc-block1-times {
    display: flex;
    justify-content: center;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid var(--cc-border-color);
    border-bottom: 1px solid var(--cc-border-color);
    margin-top: 20px;
}

.cc-block1-times .time-item {
    text-align: center;
    border-right: 1px solid var(--cc-border-color);
    padding: 0 25px;
    flex-grow: 1;
}
.cc-block1-times .time-item:last-child {
    border-right: none;
}
.cc-block1-times .time-label {
    font-size: 0.7em;
    font-weight: 600;
    color: var(--cc-light-text-color);
    margin-bottom: 5px;
    letter-spacing: 1px;
    text-transform: uppercase;
}
.cc-block1-times .time-value {
    font-size: 1em;
    color: var(--cc-heading-color);
    font-weight: 500;
}

/*--------------------------------------------------------------
# Block 2: Action Buttons
--------------------------------------------------------------*/
.cc-block.block2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 25px 30px;
    background: var(--cc-light-background);
    border-top: 1px solid var(--cc-border-color);
    border-bottom: 1px solid var(--cc-border-color);
}
.cc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    padding: 12px 25px;
    transition: all 0.25s ease;
    text-transform: uppercase;
}
.cc-btn-print {
    background-color: var(--cc-primary-color);
    color: #fff;
    border: 2px solid var(--cc-primary-color);
}
.cc-btn-print:hover {
    background-color: var(--cc-primary-darker);
    border-color: var(--cc-primary-darker);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.cc-btn-pin {
    background-color: #fff;
    color: var(--cc-text-color);
    border: 2px solid var(--cc-border-color);
}
.cc-btn-pin:hover {
    border-color: var(--cc-primary-color);
    color: var(--cc-primary-color);
}
.cc-btn .dashicons {
    margin-right: 8px;
    font-size: 1.3em;
}

/*--------------------------------------------------------------
# Blocks 3, 4, 5: Content Sections
--------------------------------------------------------------*/
.cc-block.block3, .cc-block.block4, .cc-block.block5 {
    padding-top: 10px;
}

/* Main Section Headers (Ingredients, Instructions, Notes)
   Includes Uppercase & Border Line
*/
.cc-block h2 {
    color: var(--global-palette1);
    text-transform: uppercase; 
    font-weight: 700;
    letter-spacing: 1px;
    margin-top: 0;
    margin-bottom: 1em;
    font-size: 1.2em;
    display: flex;
    align-items: center;
    white-space: normal; 
}

/* The line after the header */
.cc-block h2::after {
    content: '';
    flex-grow: 1;
    height: 1px;
    background: var(--cc-border-color);
    margin-left: 15px;
    min-width: 20px; 
}

/* Sub-steps inside Instructions (Markdown headers, usually H3) */
.cc-block h3 {
    color: var(--cc-heading-color);
    font-weight: 700;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-size: 1.0em;
    line-height: 1.4;
    white-space: normal;
}

/* Ingredient Groups (H4) */
.cc-block .cc-ingredient-group-title {
    font-size: 1em;
    margin-bottom: 0.8em;
    text-transform: none;
    letter-spacing: 0;
    color: var(--cc-primary-color);
    border-bottom: 1px dashed var(--cc-border-color);
    padding-bottom: 5px;
    font-weight: bold;
    white-space: normal;
}

/* Content Lists (Ingredients, Instructions) */
.cc-ingredients-list, .cc-block.block4, .cc-block.block5 {
    line-height: 1.7;
}
.cc-ingredients-list ul, .cc-block.block4 ol {
    padding-left: 25px;
    margin: 0;
}
.cc-block.block4 ol li {
    padding-left: 10px;
    margin-bottom: 1em;
}
.cc-block.block4 ol li::marker {
    font-weight: bold;
    color: var(--cc-primary-color);
}

.cc-ing-item {
    list-style: none;
    margin-bottom: 8px;
}
.cc-ing-item label {
    display: flex;
    align-items: center;
    cursor: pointer;
}
.cc-ing-item input[type="checkbox"] {
    margin-right: 12px;
    width: 18px;
    height: 18px;
    accent-color: var(--cc-primary-color);
    flex-shrink: 0; 
}

/* Cook Mode */
.cc-cookmode-container {
    display: flex; align-items: center; gap: 10px; margin-top: 25px; padding: 15px; background: var(--cc-light-background); border-radius: 8px;
}
.cc-cookmode-labels { flex-grow: 1; }
.cc-cookmode-main-label { font-weight: bold; }
.cc-cookmode-sub-label { font-size: 0.85em; color: var(--cc-light-text-color); }
.cc-switch { position: relative; display: inline-block; width: 50px; height: 26px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 0; height: 0; }
.cc-slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: .4s; border-radius: 26px; }
.cc-slider:before { position: absolute; content: ""; height: 20px; width: 20px; left: 3px; bottom: 3px; background-color: white; transition: .4s; border-radius: 50%; }
.cc-switch input:checked + .cc-slider { background-color: var(--cc-primary-color); }
.cc-switch input:checked + .cc-slider:before { transform: translateX(24px); }

/* Comment Rating Stars */
.cc-star { font-size: 26px; color: #dcdcdc; cursor: pointer; transition: all 0.2s ease; display: inline-block; }
.cc-star:hover { transform: scale(1.2); color: var(--cc-star-color); }
.cc-star.filled { color: var(--cc-star-color); }

/*--------------------------------------------------------------
# Responsive Design (MOBILE FIXES)
--------------------------------------------------------------*/
@media (max-width: 768px) {
    .cc-recipe-card { margin-top: 125px; }
    /* Reduce padding to give text more room */
    .cc-block { padding: 15px 20px; } 
    
    .cc-block1-image { width: 200px; height: 200px; top: -100px; }
    .cc-block1-title { font-size: 1.8em; }
    .cc-block1-desc { font-size: 1em; }
    
    .cc-block1-times { flex-direction: column; align-items: center; }
    .cc-block1-times .time-item { border-right: none; padding: 10px 0; width: 100%; border-bottom: 1px solid var(--cc-border-color); }
    .cc-block1-times .time-item:last-child { border-bottom: none; }
}

@media (max-width: 480px) {
    .cc-recipe-card { margin-top: 100px; }
    /* Even smaller padding for very small screens */
    .cc-block { padding: 15px; }
    
    .cc-block.block1 { padding-top: 80px; }
    .cc-block1-image { width: 160px; height: 160px; top: -80px; }
    .cc-block1-title { font-size: 1.5em; }
    .cc-block.block2 { flex-direction: column; }
    
    /* Slightly smaller headers on mobile to fit better */
    .cc-block h2 { font-size: 1.2em; }
    .cc-block h3 { font-size: 1.1em; }
}