/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


 .table-btn {
  float:right;
  width:200px;
  text-align:center;
  y:-20px;
 }

 .form-select {
    display: block;
    width: 100%;
    padding: .375rem 2.25rem .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: "black;";
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-color: lightgrey;
    
    background-repeat: no-repeat;
    background-position: right .75rem center;
    background-size: 16px 12px;
    border: 1.0;
    border-radius: 0.6;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-date-select {
   float:left; 
   width:20%; 
   margin-left:10px;
}

.form-date-label {
   float:left; 
   width:100%;
}

.post-details iframe {
  max-width: 100%;          /* Ensures it fits the container */
  width: 960px;             /* Default desktop width */
  height: auto;            /* Default desktop height */
  aspect-ratio: 16 / 9;     /* Maintains proportion */
  border: 2px solid #1E2A44; /* Miner theme */
  border-radius: 5px;
  margin: 10px 0;
}

/* Mobile breakpoint (e.g., max-width 768px for tablets, 480px for phones) */
@media (max-width: 768px) {
  .article-container iframe {
    width: 100%;            /* Full width on smaller screens */
    height: auto;           /* Auto-adjusts based on aspect ratio */
    max-width: 400px;       /* Cap to avoid excessive scaling */
  }
}

@media (max-width: 480px) {
  .article-container iframe {
    max-width: 300px;       /* Smaller cap for phones */
  }
}