/*
|--------------------------------------------------------------------------
| Nuts and Bolts Coaching
| Learning Tables
|--------------------------------------------------------------------------
|
| File:
| nbc-learning-.css
|
| Author:
| Thomas L. Vaughn
|
| Date Created:
| 2026-07-19
|
| Purpose:
| Provides consistent styling for educational tables used throughout
| the Nuts and Bolts Coaching website.
|
| Usage:
|
| <table class="nbc-learning-table">
|
| Design Goals:
| - Easy to scan
| - Mobile friendly
| - Accessible
| - Consistent across articles
| - Supports future educational content
|
*/

/*==============================================================
  Base Table
==============================================================*/

.nbc-learning-table{
    width:100%;
    margin:2rem 0;
    border-collapse:collapse;
    background:#ffffff;
    border:1px solid #d7dde2;
    font-size:16px;
    line-height:1.6;
}

/*==============================================================
  Header
==============================================================*/

.nbc-learning-table thead th{

    background:#003f46;

    color:#ffffff;

    font-weight:700;

    text-align:left;

    padding:16px 20px;

    border:1px solid #003f46;

    letter-spacing:.02em;
}

/*==============================================================
  Body Cells
==============================================================*/

.nbc-learning-table tbody td{

    padding:16px 20px;

    border:1px solid #d7dde2;

    vertical-align:top;
}

/*==============================================================
  Zebra Rows
==============================================================*/

.nbc-learning-table tbody tr:nth-child(even){

    background:#f7f9fa;
}

/*==============================================================
  Hover
==============================================================*/

.nbc-learning-table tbody tr:hover{

    background:#eef7f8;
}

/*==============================================================
  Column Widths
==============================================================*/

.nbc-learning-table th:nth-child(1),
.nbc-learning-table td:nth-child(1){

    width:30%;
}

.nbc-learning-table th:nth-child(2),
.nbc-learning-table td:nth-child(2){

    width:20%;

    font-weight:600;
}

.nbc-learning-table th:nth-child(3),
.nbc-learning-table td:nth-child(3){

    width:50%;
}

/*==============================================================
  Links
==============================================================*/

.nbc-learning-table a{

    color:#005f6b;

    text-decoration:underline;
}

.nbc-learning-table a:hover{

    color:#003f46;
}

/*==============================================================
  Mobile
==============================================================*/

@media (max-width:980px){

    .nbc-learning-table{

        font-size:15px;
    }

    .nbc-learning-table th,
    .nbc-learning-table td{

        padding:14px;
    }

}

@media (max-width:767px){

    .nbc-learning-table{

        display:block;

        overflow-x:auto;

        white-space:normal;
    }

}

/*
|--------------------------------------------------------------------------
| Featured Blog Images
|--------------------------------------------------------------------------
|
| Purpose:
| Applies rounded corners to featured images displayed by the Divi
| Blog Module on the Resource Center and other blog listings.
|
| Reason:
| Divi applies the featured image inside an anchor element
| (.entry-featured-image-url). Both the anchor and the image require
| matching border-radius values, and the anchor must hide overflow
| so the rounded corners render correctly.
|
| Dependencies:
| - Divi Blog Module
| - .entry-featured-image-url
|
| Last Updated:
| 2026-07-20
|--------------------------------------------------------------------------
*/

/* Featured image container */
.et_pb_blog .entry-featured-image-url {
	border-radius: 15px !important;
	overflow: hidden;
}

/* Featured image */
.et_pb_blog .entry-featured-image-url img {
	display: block;
	border-radius: 15px !important;
}